# designmodo/flat-ui

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/designmodo-flat-ui).**

15,213 stars · 2,275 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/designmodo/Flat-UI
- Homepage: https://designmodo.com/flat-free/
- awesome-repositories: https://awesome-repositories.com/repository/designmodo-flat-ui.md

## Description

Flat-UI is a collection of responsive UI toolkits and CSS libraries used to build websites and interactive web components with a flat design aesthetic. It provides a responsive frontend toolkit and a web component library based on the Bootstrap framework to create adaptive layouts.

The library focuses on implementing a consistent flat design through predefined hex color palettes and typography styles. It replaces standard browser elements with customized visual styles to remove skeuomorphic depth.

The toolkit covers a broad range of interface capabilities, including customized form elements such as toggle switches, range sliders, and typeahead search fields. It also provides navigation primitives like pagination and dropdown menus, overlay components for informational tooltips, and stylized video players with custom playback controls.

## Tags

### User Interface & Experience

- [Modern Interface Design](https://awesome-repositories.com/f/user-interface-experience/modern-interface-design.md) — Implements a modern flat design aesthetic with coordinated colors and typography.
- [CSS Styling](https://awesome-repositories.com/f/user-interface-experience/css-styling.md) — Provides a flat visual aesthetic using CSS-based styling to remove skeuomorphic depth.
- [Flat Design CSS Libraries](https://awesome-repositories.com/f/user-interface-experience/flat-design-css-libraries.md) — Provides a collection of predefined hex colors and typography for a consistent flat aesthetic.
- [Frontend UI Toolkits](https://awesome-repositories.com/f/user-interface-experience/frontend-ui-toolkits.md) — Supplies a toolkit of HTML and CSS elements for building adaptive layouts and navigation.
- [Responsive Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-layouts.md) — Implements a responsive grid system and component base to ensure cross-device compatibility.
- [Responsive Grid Systems](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-systems.md) — Builds websites that adapt to different screen sizes using a responsive grid system.
- [UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries.md) — Ships a comprehensive library of pre-styled elements including tooltips, sliders, and navigation bars.
- [Action Buttons](https://awesome-repositories.com/f/user-interface-experience/button-styles/action-buttons.md) — Provides styled action buttons with various sizes and responsive scaling. ([source](http://designmodo.github.io/Flat-UI/docs/components.html))
- [Semantic State Buttons](https://awesome-repositories.com/f/user-interface-experience/button-styles/action-buttons/semantic-state-buttons.md) — Ships buttons utilizing a flat-design color palette to indicate semantic states like success or danger. ([source](http://designmodo.github.io/Flat-UI/))
- [Custom Checkbox and Radio Button Styling](https://awesome-repositories.com/f/user-interface-experience/checkbox-components/custom-checkbox-and-radio-button-styling.md) — Replaces default browser checkboxes and radio buttons with custom flat-design styles. ([source](http://designmodo.github.io/Flat-UI/docs/components.html))
- [Stylable Select Fields](https://awesome-repositories.com/f/user-interface-experience/custom-element-renderers/custom-component-injection/custom-form-field-components/stylable-select-fields.md) — Ships stylable selection fields supporting multiple choices and block-level layouts. ([source](http://designmodo.github.io/Flat-UI/docs/components.html))
- [Design System Components](https://awesome-repositories.com/f/user-interface-experience/design-system-components.md) — Provides reusable UI elements that adhere to a coordinated flat design system. ([source](https://cdn.jsdelivr.net/gh/designmodo/flat-ui@master/README.md))
- [Toggle Switches](https://awesome-repositories.com/f/user-interface-experience/form-input-components/toggle-switches.md) — Provides binary toggle switches with customizable colors, shapes, and handler icons. ([source](http://designmodo.github.io/Flat-UI/docs/components.html))
- [Form Styling](https://awesome-repositories.com/f/user-interface-experience/form-styling.md) — Provides cross-browser consistent styling for checkboxes, radio buttons, and text fields.
- [Interactive Interface Design](https://awesome-repositories.com/f/user-interface-experience/interactive-graphics/interactive-interface-design.md) — Includes functional interactive elements such as typeahead search and toggle switches.
- [Dropdown Menus](https://awesome-repositories.com/f/user-interface-experience/navigation-components/dropdown-menus.md) — Provides toggleable dropdown menus for organizing navigation and options in compact spaces. ([source](http://designmodo.github.io/Flat-UI/))
- [Navigation Bars](https://awesome-repositories.com/f/user-interface-experience/navigation-components/navigation-bars.md) — Ships responsive navigation bars featuring inverted styles, inline forms, and status indicators. ([source](http://designmodo.github.io/Flat-UI/docs/components.html))
- [Navigation Links](https://awesome-repositories.com/f/user-interface-experience/navigation-links.md) — Provides styled navigation links that maintain a consistent flat design aesthetic. ([source](http://designmodo.github.io/Flat-UI/))
- [Pagination Components](https://awesome-repositories.com/f/user-interface-experience/pagination-components.md) — Implements minimalistic pagination components using text or dropdown layouts for page navigation. ([source](http://designmodo.github.io/Flat-UI/docs/components.html))
- [Range Sliders](https://awesome-repositories.com/f/user-interface-experience/range-sliders.md) — Implements horizontal and vertical range sliders with visual segments for value increments. ([source](http://designmodo.github.io/Flat-UI/docs/components.html))
- [Selection Inputs](https://awesome-repositories.com/f/user-interface-experience/selection-inputs.md) — Provides a suite of styled selection inputs including dropdowns, checkboxes, radio buttons, and switches. ([source](http://designmodo.github.io/Flat-UI/))
- [Tag Inputs](https://awesome-repositories.com/f/user-interface-experience/tag-inputs.md) — Implements tag input fields for entering and removing multiple discrete tags with validation. ([source](http://designmodo.github.io/Flat-UI/docs/components.html))
- [Tooltips](https://awesome-repositories.com/f/user-interface-experience/tooltips.md) — Provides informational tooltips that appear as pop-ups when a user hovers over an element. ([source](http://designmodo.github.io/Flat-UI/docs/components.html))
- [Color Palettes](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/color-system-utilities/color-palettes.md) — Includes predefined sets of flat-design hex colors to maintain visual consistency. ([source](http://designmodo.github.io/Flat-UI/))
- [Video Players](https://awesome-repositories.com/f/user-interface-experience/video-players.md) — Implements stylized video players with custom controls for playback rate, subtitles, and chapters. ([source](http://designmodo.github.io/Flat-UI/docs/components.html))

### Part of an Awesome List

- [Flat Design Themes](https://awesome-repositories.com/f/awesome-lists/devtools/bootstrap-components/flat-design-themes.md) — Provides a responsive set of components based on Bootstrap to create a modern flat design.
- [Text Input Fields](https://awesome-repositories.com/f/awesome-lists/devtools/text-inputs/text-input-fields.md) — Provides stylized text input fields with customizable sizes and borderless flat designs. ([source](http://designmodo.github.io/Flat-UI/docs/components.html))

### Web Development

- [Interactive Web Component Libraries](https://awesome-repositories.com/f/web-development/interactive-web-component-libraries.md) — Offers a variety of pre-styled interactive web components like toggle switches and range sliders.

### Data & Databases

- [Autocomplete Search Fields](https://awesome-repositories.com/f/data-databases/search-suggestions/input-suggestions/autocomplete-search-fields.md) — Provides typeahead search inputs that suggest entries from a defined data source. ([source](http://designmodo.github.io/Flat-UI/docs/components.html))