BranchesTags

Repository files navigation

Flat UI Free

Join the chat at https://gitter.im/designmodo/Flat-UICDNJS

Flat UI is a beautiful theme for Bootstrap. We have redesigned many of its components to look flat in every pixel.

To get started, check out getting started page or follow instructions below.

Links:

Quick start

Three quick start options are available:

Run npm install and bower install to install dependencies.

Read the getting started page for information on the framework contents.

Examples: https://github.com/designmodo/Flat-UI/tree/master/docs/examples.

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

flat-ui/
├── dist/
| ├── css/
| | ├── vendors/
│ | ├── flat-ui.css
│ | └── flat-ui.min.css
| ├── js/
| | ├── vendors/
│ | ├── flat-ui.js
│ | └── flat-ui.min.js
| ├── fonts/
| | ├── lato/
| | └── glyphicons/
| | ├── flat-ui-icons-regular.eot
| | ├── flat-ui-icons-regular.svg
| | ├── flat-ui-icons-regular.ttf
| | ├── flat-ui-icons-regular.woff
| | └── selection.json
| ├── img/
| └── index.html
├── docs/
| ├── examples/
| ├── components.html
| ├── getting-started.html
| └── template.html
├── fonts/
| ├── glyphicons/
| └── lato/
├── img/
├── js/
└── less/
├── mixins/
├── modules/
├── flat-ui.less
├── mixins.less
└── variables.less

We provide compiled CSS and JS (flat-ui.*), as well as compiled and minified CSS and JS (flat-ui.min.*). Fonts with icons are included.

Documentation

Flat UI's documentation, included in this repo in the docs directory and publicly hosted on GitHub Pages at http://designmodo.github.io/Flat-UI/docs/components.html.

SASS support

If you are interested in SASS source files - you can visit this project made by @wingrunr21: Designmodo's Flat-UI ported to SASS with support for Flat-UI Pro

Authors

Sergey Shmidt

Sergii Iurevych

Dmitry Pytkin

Copyright and license

Flat UI Free is licensed under a Creative Commons Attribution 3.0 Unported (CC BY 3.0) (http://creativecommons.org/licenses/by/3.0/) and MIT License - http://opensource.org/licenses/mit-license.html.

You are allowed to use these elements anywhere you want, however we’ll highly appreciate if you will link to our website.

Typeface

Flat UI Free is made using the Lato typeface, which can be downloaded for free here: http://www.google.com/webfonts/specimen/Lato

Useful Links (How To)

More products from Designmodo: https://designmodo.com/shop/

Designmodo Market: http://market.designmodo.com/

Tutorials: https://designmodo.com/tutorials/

Freebies: https://designmodo.com/freebies/

Affiliate Program (earn money): https://designmodo.com/affiliates/

Social Media:

Twitter: http://www.twitter.com/designmodo

Facebook: http://www.facebook.com/designmodo

RSS: http://feeds.feedburner.com/designmodo

Google+: https://www.google.com/+DesignModo

About

Flat UI Free - Design Framework (html/css3/less/js). Flat UI is based on Bootstrap, a comfortable, responsive, and functional framework that simplifies the development of websites.

designmodo.com/flat-free/

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Flat UI Free
Join the chat at https://gitter.im/designmodo/Flat-UICDNJS
Flat UI is a beautiful theme for Bootstrap. We have redesigned many of its components to look flat in every pixel.
To get started, check out getting started page or follow instructions below.
Links:
Quick start
Three quick start options are available:
Run npm install and bower install to install dependencies.
Read the getting started page for information on the framework contents.
Examples: https://github.com/designmodo/Flat-UI/tree/master/docs/examples.
What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
flat-ui/
├── dist/
| ├── css/
| | ├── vendors/
│ | ├── flat-ui.css
│ | └── flat-ui.min.css
| ├── js/
| | ├── vendors/
│ | ├── flat-ui.js
│ | └── flat-ui.min.js
| ├── fonts/
| | ├── lato/
| | └── glyphicons/
| | ├── flat-ui-icons-regular.eot
| | ├── flat-ui-icons-regular.svg
| | ├── flat-ui-icons-regular.ttf
| | ├── flat-ui-icons-regular.woff
| | └── selection.json
| ├── img/
| └── index.html
├── docs/
| ├── examples/
| ├── components.html
| ├── getting-started.html
| └── template.html
├── fonts/
| ├── glyphicons/
| └── lato/
├── img/
├── js/
└── less/
├── mixins/
├── modules/
├── flat-ui.less
├── mixins.less
└── variables.less

We provide compiled CSS and JS (flat-ui.*), as well as compiled and minified CSS and JS (flat-ui.min.*). Fonts with icons are included.
Documentation
Flat UI's documentation, included in this repo in the docs directory and publicly hosted on GitHub Pages at http://designmodo.github.io/Flat-UI/docs/components.html.
SASS support
If you are interested in SASS source files - you can visit this project made by @wingrunr21:
Designmodo's Flat-UI ported to SASS with support for Flat-UI Pro
Authors
Sergey Shmidt
Sergii Iurevych
Dmitry Pytkin
Copyright and license
Flat UI Free is licensed under a Creative Commons Attribution 3.0 Unported (CC BY 3.0) (http://creativecommons.org/licenses/by/3.0/) and MIT License - http://opensource.org/licenses/mit-license.html.
You are allowed to use these elements anywhere you want, however we’ll highly appreciate if you will link to our website.
Typeface
Flat UI Free is made using the Lato typeface, which can be downloaded for free here: http://www.google.com/webfonts/specimen/Lato
Useful Links (How To)
More products from Designmodo: https://designmodo.com/shop/
Designmodo Market: http://market.designmodo.com/
Tutorials: https://designmodo.com/tutorials/
Freebies: https://designmodo.com/freebies/
Affiliate Program (earn money): https://designmodo.com/affiliates/
Social Media:
Twitter: http://www.twitter.com/designmodo
Facebook: http://www.facebook.com/designmodo
RSS: http://feeds.feedburner.com/designmodo
Google+: https://www.google.com/+DesignModo
About
Flat UI Free - Design Framework (html/css3/less/js). Flat UI is based on Bootstrap, a comfortable, responsive, and functional framework that simplifies the development of websites.
designmodo.com/flat-free/
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Flat UI Free
Join the chat at https://gitter.im/designmodo/Flat-UICDNJS
Flat UI is a beautiful theme for Bootstrap. We have redesigned many of its components to look flat in every pixel.
To get started, check out getting started page or follow instructions below.
Links:
Quick start
Three quick start options are available:
Run npm install and bower install to install dependencies.
Read the getting started page for information on the framework contents.
Examples: https://github.com/designmodo/Flat-UI/tree/master/docs/examples.
What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
flat-ui/
├── dist/
| ├── css/
| | ├── vendors/
│ | ├── flat-ui.css
│ | └── flat-ui.min.css
| ├── js/
| | ├── vendors/
│ | ├── flat-ui.js
│ | └── flat-ui.min.js
| ├── fonts/
| | ├── lato/
| | └── glyphicons/
| | ├── flat-ui-icons-regular.eot
| | ├── flat-ui-icons-regular.svg
| | ├── flat-ui-icons-regular.ttf
| | ├── flat-ui-icons-regular.woff
| | └── selection.json
| ├── img/
| └── index.html
├── docs/
| ├── examples/
| ├── components.html
| ├── getting-started.html
| └── template.html
├── fonts/
| ├── glyphicons/
| └── lato/
├── img/
├── js/
└── less/
├── mixins/
├── modules/
├── flat-ui.less
├── mixins.less
└── variables.less

We provide compiled CSS and JS (flat-ui.*), as well as compiled and minified CSS and JS (flat-ui.min.*). Fonts with icons are included.
Documentation
Flat UI's documentation, included in this repo in the docs directory and publicly hosted on GitHub Pages at http://designmodo.github.io/Flat-UI/docs/components.html.
SASS support
If you are interested in SASS source files - you can visit this project made by @wingrunr21:
Designmodo's Flat-UI ported to SASS with support for Flat-UI Pro
Authors
Sergey Shmidt
Sergii Iurevych
Dmitry Pytkin
Copyright and license
Flat UI Free is licensed under a Creative Commons Attribution 3.0 Unported (CC BY 3.0) (http://creativecommons.org/licenses/by/3.0/) and MIT License - http://opensource.org/licenses/mit-license.html.
You are allowed to use these elements anywhere you want, however we’ll highly appreciate if you will link to our website.
Typeface
Flat UI Free is made using the Lato typeface, which can be downloaded for free here: http://www.google.com/webfonts/specimen/Lato
Useful Links (How To)
More products from Designmodo: https://designmodo.com/shop/
Designmodo Market: http://market.designmodo.com/
Tutorials: https://designmodo.com/tutorials/
Freebies: https://designmodo.com/freebies/
Affiliate Program (earn money): https://designmodo.com/affiliates/
Social Media:
Twitter: http://www.twitter.com/designmodo
Facebook: http://www.facebook.com/designmodo
RSS: http://feeds.feedburner.com/designmodo
Google+: https://www.google.com/+DesignModo
About
Flat UI Free - Design Framework (html/css3/less/js). Flat UI is based on Bootstrap, a comfortable, responsive, and functional framework that simplifies the development of websites.
designmodo.com/flat-free/
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Flat UI Free
Join the chat at https://gitter.im/designmodo/Flat-UICDNJS
Flat UI is a beautiful theme for Bootstrap. We have redesigned many of its components to look flat in every pixel.
To get started, check out getting started page or follow instructions below.
Links:
Quick start
Three quick start options are available:
Run npm install and bower install to install dependencies.
Read the getting started page for information on the framework contents.
Examples: https://github.com/designmodo/Flat-UI/tree/master/docs/examples.
What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
flat-ui/
├── dist/
| ├── css/
| | ├── vendors/
│ | ├── flat-ui.css
│ | └── flat-ui.min.css
| ├── js/
| | ├── vendors/
│ | ├── flat-ui.js
│ | └── flat-ui.min.js
| ├── fonts/
| | ├── lato/
| | └── glyphicons/
| | ├── flat-ui-icons-regular.eot
| | ├── flat-ui-icons-regular.svg
| | ├── flat-ui-icons-regular.ttf
| | ├── flat-ui-icons-regular.woff
| | └── selection.json
| ├── img/
| └── index.html
├── docs/
| ├── examples/
| ├── components.html
| ├── getting-started.html
| └── template.html
├── fonts/
| ├── glyphicons/
| └── lato/
├── img/
├── js/
└── less/
├── mixins/
├── modules/
├── flat-ui.less
├── mixins.less
└── variables.less

We provide compiled CSS and JS (flat-ui.*), as well as compiled and minified CSS and JS (flat-ui.min.*). Fonts with icons are included.
Documentation
Flat UI's documentation, included in this repo in the docs directory and publicly hosted on GitHub Pages at http://designmodo.github.io/Flat-UI/docs/components.html.
SASS support
If you are interested in SASS source files - you can visit this project made by @wingrunr21:
Designmodo's Flat-UI ported to SASS with support for Flat-UI Pro
Authors
Sergey Shmidt
Sergii Iurevych
Dmitry Pytkin
Copyright and license
Flat UI Free is licensed under a Creative Commons Attribution 3.0 Unported (CC BY 3.0) (http://creativecommons.org/licenses/by/3.0/) and MIT License - http://opensource.org/licenses/mit-license.html.
You are allowed to use these elements anywhere you want, however we’ll highly appreciate if you will link to our website.
Typeface
Flat UI Free is made using the Lato typeface, which can be downloaded for free here: http://www.google.com/webfonts/specimen/Lato
Useful Links (How To)
More products from Designmodo: https://designmodo.com/shop/
Designmodo Market: http://market.designmodo.com/
Tutorials: https://designmodo.com/tutorials/
Freebies: https://designmodo.com/freebies/
Affiliate Program (earn money): https://designmodo.com/affiliates/
Social Media:
Twitter: http://www.twitter.com/designmodo
Facebook: http://www.facebook.com/designmodo
RSS: http://feeds.feedburner.com/designmodo
Google+: https://www.google.com/+DesignModo
About
Flat UI Free - Design Framework (html/css3/less/js). Flat UI is based on Bootstrap, a comfortable, responsive, and functional framework that simplifies the development of websites.
designmodo.com/flat-free/
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Flat UI Free
Join the chat at https://gitter.im/designmodo/Flat-UICDNJS
Flat UI is a beautiful theme for Bootstrap. We have redesigned many of its components to look flat in every pixel.
To get started, check out getting started page or follow instructions below.
Links:
Quick start
Three quick start options are available:
Run npm install and bower install to install dependencies.
Read the getting started page for information on the framework contents.
Examples: https://github.com/designmodo/Flat-UI/tree/master/docs/examples.
What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
flat-ui/
├── dist/
| ├── css/
| | ├── vendors/
│ | ├── flat-ui.css
│ | └── flat-ui.min.css
| ├── js/
| | ├── vendors/
│ | ├── flat-ui.js
│ | └── flat-ui.min.js
| ├── fonts/
| | ├── lato/
| | └── glyphicons/
| | ├── flat-ui-icons-regular.eot
| | ├── flat-ui-icons-regular.svg
| | ├── flat-ui-icons-regular.ttf
| | ├── flat-ui-icons-regular.woff
| | └── selection.json
| ├── img/
| └── index.html
├── docs/
| ├── examples/
| ├── components.html
| ├── getting-started.html
| └── template.html
├── fonts/
| ├── glyphicons/
| └── lato/
├── img/
├── js/
└── less/
├── mixins/
├── modules/
├── flat-ui.less
├── mixins.less
└── variables.less

We provide compiled CSS and JS (flat-ui.*), as well as compiled and minified CSS and JS (flat-ui.min.*). Fonts with icons are included.
Documentation
Flat UI's documentation, included in this repo in the docs directory and publicly hosted on GitHub Pages at http://designmodo.github.io/Flat-UI/docs/components.html.
SASS support
If you are interested in SASS source files - you can visit this project made by @wingrunr21:
Designmodo's Flat-UI ported to SASS with support for Flat-UI Pro
Authors
Sergey Shmidt
Sergii Iurevych
Dmitry Pytkin
Copyright and license
Flat UI Free is licensed under a Creative Commons Attribution 3.0 Unported (CC BY 3.0) (http://creativecommons.org/licenses/by/3.0/) and MIT License - http://opensource.org/licenses/mit-license.html.
You are allowed to use these elements anywhere you want, however we’ll highly appreciate if you will link to our website.
Typeface
Flat UI Free is made using the Lato typeface, which can be downloaded for free here: http://www.google.com/webfonts/specimen/Lato
Useful Links (How To)
More products from Designmodo: https://designmodo.com/shop/
Designmodo Market: http://market.designmodo.com/
Tutorials: https://designmodo.com/tutorials/
Freebies: https://designmodo.com/freebies/
Affiliate Program (earn money): https://designmodo.com/affiliates/
Social Media:
Twitter: http://www.twitter.com/designmodo
Facebook: http://www.facebook.com/designmodo
RSS: http://feeds.feedburner.com/designmodo
Google+: https://www.google.com/+DesignModo
About
Flat UI Free - Design Framework (html/css3/less/js). Flat UI is based on Bootstrap, a comfortable, responsive, and functional framework that simplifies the development of websites.
designmodo.com/flat-free/
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Flat UI Free
Join the chat at https://gitter.im/designmodo/Flat-UICDNJS
Flat UI is a beautiful theme for Bootstrap. We have redesigned many of its components to look flat in every pixel.
To get started, check out getting started page or follow instructions below.
Links:
Quick start
Three quick start options are available:
Run npm install and bower install to install dependencies.
Read the getting started page for information on the framework contents.
Examples: https://github.com/designmodo/Flat-UI/tree/master/docs/examples.
What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
flat-ui/
├── dist/
| ├── css/
| | ├── vendors/
│ | ├── flat-ui.css
│ | └── flat-ui.min.css
| ├── js/
| | ├── vendors/
│ | ├── flat-ui.js
│ | └── flat-ui.min.js
| ├── fonts/
| | ├── lato/
| | └── glyphicons/
| | ├── flat-ui-icons-regular.eot
| | ├── flat-ui-icons-regular.svg
| | ├── flat-ui-icons-regular.ttf
| | ├── flat-ui-icons-regular.woff
| | └── selection.json
| ├── img/
| └── index.html
├── docs/
| ├── examples/
| ├── components.html
| ├── getting-started.html
| └── template.html
├── fonts/
| ├── glyphicons/
| └── lato/
├── img/
├── js/
└── less/
├── mixins/
├── modules/
├── flat-ui.less
├── mixins.less
└── variables.less

We provide compiled CSS and JS (flat-ui.*), as well as compiled and minified CSS and JS (flat-ui.min.*). Fonts with icons are included.
Documentation
Flat UI's documentation, included in this repo in the docs directory and publicly hosted on GitHub Pages at http://designmodo.github.io/Flat-UI/docs/components.html.
SASS support
If you are interested in SASS source files - you can visit this project made by @wingrunr21:
Designmodo's Flat-UI ported to SASS with support for Flat-UI Pro
Authors
Sergey Shmidt
Sergii Iurevych
Dmitry Pytkin
Copyright and license
Flat UI Free is licensed under a Creative Commons Attribution 3.0 Unported (CC BY 3.0) (http://creativecommons.org/licenses/by/3.0/) and MIT License - http://opensource.org/licenses/mit-license.html.
You are allowed to use these elements anywhere you want, however we’ll highly appreciate if you will link to our website.
Typeface
Flat UI Free is made using the Lato typeface, which can be downloaded for free here: http://www.google.com/webfonts/specimen/Lato
Useful Links (How To)
More products from Designmodo: https://designmodo.com/shop/
Designmodo Market: http://market.designmodo.com/
Tutorials: https://designmodo.com/tutorials/
Freebies: https://designmodo.com/freebies/
Affiliate Program (earn money): https://designmodo.com/affiliates/
Social Media:
Twitter: http://www.twitter.com/designmodo
Facebook: http://www.facebook.com/designmodo
RSS: http://feeds.feedburner.com/designmodo
Google+: https://www.google.com/+DesignModo
About
Flat UI Free - Design Framework (html/css3/less/js). Flat UI is based on Bootstrap, a comfortable, responsive, and functional framework that simplifies the development of websites.
designmodo.com/flat-free/
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Flat UI Free
Join the chat at https://gitter.im/designmodo/Flat-UICDNJS
Flat UI is a beautiful theme for Bootstrap. We have redesigned many of its components to look flat in every pixel.
To get started, check out getting started page or follow instructions below.
Links:
Quick start
Three quick start options are available:
Run npm install and bower install to install dependencies.
Read the getting started page for information on the framework contents.
Examples: https://github.com/designmodo/Flat-UI/tree/master/docs/examples.
What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
flat-ui/
├── dist/
| ├── css/
| | ├── vendors/
│ | ├── flat-ui.css
│ | └── flat-ui.min.css
| ├── js/
| | ├── vendors/
│ | ├── flat-ui.js
│ | └── flat-ui.min.js
| ├── fonts/
| | ├── lato/
| | └── glyphicons/
| | ├── flat-ui-icons-regular.eot
| | ├── flat-ui-icons-regular.svg
| | ├── flat-ui-icons-regular.ttf
| | ├── flat-ui-icons-regular.woff
| | └── selection.json
| ├── img/
| └── index.html
├── docs/
| ├── examples/
| ├── components.html
| ├── getting-started.html
| └── template.html
├── fonts/
| ├── glyphicons/
| └── lato/
├── img/
├── js/
└── less/
├── mixins/
├── modules/
├── flat-ui.less
├── mixins.less
└── variables.less

We provide compiled CSS and JS (flat-ui.*), as well as compiled and minified CSS and JS (flat-ui.min.*). Fonts with icons are included.
Documentation
Flat UI's documentation, included in this repo in the docs directory and publicly hosted on GitHub Pages at http://designmodo.github.io/Flat-UI/docs/components.html.
SASS support
If you are interested in SASS source files - you can visit this project made by @wingrunr21:
Designmodo's Flat-UI ported to SASS with support for Flat-UI Pro
Authors
Sergey Shmidt
Sergii Iurevych
Dmitry Pytkin
Copyright and license
Flat UI Free is licensed under a Creative Commons Attribution 3.0 Unported (CC BY 3.0) (http://creativecommons.org/licenses/by/3.0/) and MIT License - http://opensource.org/licenses/mit-license.html.
You are allowed to use these elements anywhere you want, however we’ll highly appreciate if you will link to our website.
Typeface
Flat UI Free is made using the Lato typeface, which can be downloaded for free here: http://www.google.com/webfonts/specimen/Lato
Useful Links (How To)
More products from Designmodo: https://designmodo.com/shop/
Designmodo Market: http://market.designmodo.com/
Tutorials: https://designmodo.com/tutorials/
Freebies: https://designmodo.com/freebies/
Affiliate Program (earn money): https://designmodo.com/affiliates/
Social Media:
Twitter: http://www.twitter.com/designmodo
Facebook: http://www.facebook.com/designmodo
RSS: http://feeds.feedburner.com/designmodo
Google+: https://www.google.com/+DesignModo
About
Flat UI Free - Design Framework (html/css3/less/js). Flat UI is based on Bootstrap, a comfortable, responsive, and functional framework that simplifies the development of websites.
designmodo.com/flat-free/
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
Flat UI Free
Join the chat at https://gitter.im/designmodo/Flat-UICDNJS
Flat UI is a beautiful theme for Bootstrap. We have redesigned many of its components to look flat in every pixel.
To get started, check out getting started page or follow instructions below.
Links:
Quick start
Three quick start options are available:
Run npm install and bower install to install dependencies.
Read the getting started page for information on the framework contents.
Examples: https://github.com/designmodo/Flat-UI/tree/master/docs/examples.
What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
flat-ui/
├── dist/
| ├── css/
| | ├── vendors/
│ | ├── flat-ui.css
│ | └── flat-ui.min.css
| ├── js/
| | ├── vendors/
│ | ├── flat-ui.js
│ | └── flat-ui.min.js
| ├── fonts/
| | ├── lato/
| | └── glyphicons/
| | ├── flat-ui-icons-regular.eot
| | ├── flat-ui-icons-regular.svg
| | ├── flat-ui-icons-regular.ttf
| | ├── flat-ui-icons-regular.woff
| | └── selection.json
| ├── img/
| └── index.html
├── docs/
| ├── examples/
| ├── components.html
| ├── getting-started.html
| └── template.html
├── fonts/
| ├── glyphicons/
| └── lato/
├── img/
├── js/
└── less/
├── mixins/
├── modules/
├── flat-ui.less
├── mixins.less
└── variables.less

We provide compiled CSS and JS (flat-ui.*), as well as compiled and minified CSS and JS (flat-ui.min.*). Fonts with icons are included.
Documentation
Flat UI's documentation, included in this repo in the docs directory and publicly hosted on GitHub Pages at http://designmodo.github.io/Flat-UI/docs/components.html.
SASS support
If you are interested in SASS source files - you can visit this project made by @wingrunr21:
Designmodo's Flat-UI ported to SASS with support for Flat-UI Pro
Authors
Sergey Shmidt
Sergii Iurevych
Dmitry Pytkin
Copyright and license
Flat UI Free is licensed under a Creative Commons Attribution 3.0 Unported (CC BY 3.0) (http://creativecommons.org/licenses/by/3.0/) and MIT License - http://opensource.org/licenses/mit-license.html.
You are allowed to use these elements anywhere you want, however we’ll highly appreciate if you will link to our website.
Typeface
Flat UI Free is made using the Lato typeface, which can be downloaded for free here: http://www.google.com/webfonts/specimen/Lato
Useful Links (How To)
More products from Designmodo: https://designmodo.com/shop/
Designmodo Market: http://market.designmodo.com/
Tutorials: https://designmodo.com/tutorials/
Freebies: https://designmodo.com/freebies/
Affiliate Program (earn money): https://designmodo.com/affiliates/
Social Media:
Twitter: http://www.twitter.com/designmodo
Facebook: http://www.facebook.com/designmodo
RSS: http://feeds.feedburner.com/designmodo
Google+: https://www.google.com/+DesignModo
About
Flat UI Free - Design Framework (html/css3/less/js). Flat UI is based on Bootstrap, a comfortable, responsive, and functional framework that simplifies the development of websites.
designmodo.com/flat-free/
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages