• FRAMEWORK

About

Ford Otosan UI Framework

About FO Framework

FO Framework v1 is Ford Otosan’s in-house User Interface framework designed to provide a unified, scalable, and mobile-first design system across all internal and external digital products.

The framework consolidates core UI principles — typography, colors, spacing, components, and helpers — into a single modular system. Its goal is to deliver faster development cycles, consistent design language, and improved accessibility.

All features are accessible through the navigation links. To use FO Framework, ensure that the required CSS, JS, and font files are included in your project.

Contact

For feedback, suggestions, or component/module requests, please contact framework@ford.com.tr.

Important! Please do not add custom CSS for new components. Reach out to the framework team to ensure consistency and maintainability.
Why FO Framework?
  • Mobile-first and rem-based spacing architecture for seamless scaling across devices
  • Unified design guidelines ensuring visual and functional consistency
  • Modular components with minimal dependencies and high reusability
  • Improved maintainability and reduced technical debt
  • Continuous updates aligned with modern frontend practices
Accessibility

FO Framework complies with WCAG 2.1 AA standards to ensure accessibility for all users:

  • Dark & Light mode support
  • High-contrast themes
  • Keyboard and screen reader compatibility
  • Semantic HTML and ARIA labeling

Accessibility

Accessibility and usability are key priorities of the FO Framework. The system supports light and dark themes and aims to provide sufficient contrast for all users. We continuously enhance accessibility features in line with modern standards.

License & Usage

This framework is strictly intended for use in Ford Otosan internal software projects. It is not licensed for external or commercial use. Any external usage must be reported to Ford Otosan.

  • Fonts: Uses Ford F1 (licensed) and Roboto (open-source) only.
  • Images: Only authorized and approved assets are included within the framework.
  • Plugins: Open-source plugins (MIT license) are used to ensure compliance and flexibility.

Frequently Asked Questions

Is FO Framework finalized?

No. FO Framework is continuously developed and improved with new components, utilities, and accessibility enhancements.

Can I add third-party plugins?

Third-party plugins should be reviewed and integrated by the FO Framework team to ensure compatibility and licensing compliance.

Which browsers are supported?

The framework supports the last two major versions of Chrome, Edge, Safari, and Firefox. Internet Explorer support has been discontinued.

Is FO Framework mobile-first?

Yes, FO Framework is designed with a mobile-first approach, ensuring responsive layouts and scalable components on all devices.

How do I request a new component?

Please send your requests to the framework team via framework@ford.com.tr. Avoid writing extra CSS for new needs; instead, collaborate with the team to maintain consistency and code quality.

Plugins

FO Framework 3rd party plug-ins that we use in the framework are listed below with their versions and licenses.

Vendor Version Size (Kb) What do we use? License type License info
jQuery 3.4.1 87 All library MIT jquery.org/license
Bootstrap 3.3.7 37 Grid system, tabs, collapse, datepicker, dropdown, multiselect, tooltip MIT github.com/twbs/bootstrap/blob/master/LICENSE
Bootstrap Tab to Collapse ver size Tab to Collapse MIT github.com/flatlogic/bootstrap-tabcollapse
BlueBird ver size Promise MIT github.com/petkaantonov/bluebird/
Chart.js ver size Charts MIT github.com/chartjs/Chart.js
DataTables ver size DataTable MIT datatables.net/license/mit
DateRangePicker ver size Date Range MIT github.com/dangrossman/daterangepicker
FancyTree ver size TreeView MIT github.com/mar10/fancytree
Modernizr ver size Cross Browser MIT modernizr.com/
Moment.js ver size Time Zone MIT momentjs.com/
Owl.Carousel ver size Carousel MIT github.com/OwlCarousel2/OwlCarousel2
Select2 ver size Select MIT github.com/select2/select2/blob/master/LICENSE.md
Quill ver size Quill MIT quilljs.com/
SmartWizard ver size Wizard MIT github.com/techlab/jquery-smartwizard
Toastr ver size Alert message MIT github.com/CodeSeven/toastr
TimePicker ver size Time Picker MIT github.com/trentrichardson/jQuery-Timepicker-Addon