Skip to content

brainfood / bootflat

Go to a project
Toggle navigation
Toggle navigation pinning
c4f4b89a by bootflat
Options

support sass 3.4.9, modify gruntfile.js and package.json, min html

1 parent be07dd75
Inline Side-by-side
Showing 15 changed files with 196 additions and 2873 deletions
......@@ -114,7 +114,122 @@ module.exports = function(grunt) {
src: '*.html'
}
},
sed: {
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true,
removeEmptyAttributes: true,
removeCommentsFromCDATA: true,
removeRedundantAttributes: true,
collapseBooleanAttributes: true
},
files: {
// Destination : Source
'./htmlmin/index.html': './index.html',
'./htmlmin/getting-started.html': './getting-started.html',
'./htmlmin/free-psd.html': './free-psd.html',
'./htmlmin/documentation.html': './documentation.html',
'./htmlmin/color-picker.html': './color-picker.html',
'./htmlmin/color-picker-blue.html': './color-picker-blue.html',
'./htmlmin/color-picker-gray.html': './color-picker-gray.html',
'./htmlmin/color-picker-green.html': './color-picker-green.html',
'./htmlmin/color-picker-pink.html': './color-picker-pink.html',
'./htmlmin/color-picker-purple.html': './color-picker-purple.html',
'./htmlmin/color-picker-red.html': './color-picker-red.html',
'./htmlmin/color-picker-yellow.html': './color-picker-yellow.html'
}
}
},
jshint: {
/*
Note:
In case there is a /release/ directory found, we don't want to lint that
so we use the ! (bang) operator to ignore the specified directory
*/
files: ['Gruntfile.js', 'js/application.js'],
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true,
globals: {
// AMD
module: true,
require: true,
requirejs: true,
define: true,
// Environments
console: true,
// General Purpose Libraries
$: true,
jQuery: true,
// Testing
sinon: true,
describe: true,
it: true,
expect: true,
beforeEach: true,
afterEach: true
}
}
},
imagemin: {
png: {
options: {
optimizationLevel: 7
},
files: [
{
expand: true,
cwd: './img/',
src: ['**/*.png'],
dest: './img/compressed/',
ext: '.png'
}
]
},
gif: {
options: {
optimizationLevel: 3
},
files: [
{
expand: true,
cwd: './img/',
src: ['**/*.gif'],
dest: './img/compressed/',
ext: '.gif'
}
]
},
jpg: {
options: {
progressive: true
},
files: [
{
expand: true,
cwd: './img/',
src: ['**/*.jpg'],
dest: './img/compressed/',
ext: '.jpg'
}
]
}
},
sed: {
versionNumber: {
pattern: (function () {
var old = grunt.option('oldver');
......@@ -131,11 +246,16 @@ module.exports = function(grunt) {
require('time-grunt')(grunt);
grunt.registerTask('task-css', ['sass', 'csscomb', 'cssmin']);
grunt.registerTask('task-html', ['htmlmin']);
grunt.registerTask('task-js', ['uglify']);
grunt.registerTask('task', ['clean', 'task-css', 'task-js']);
grunt.registerTask('task-imagemin', ['imagemin']);
grunt.registerTask('task', ['clean', 'task-css', 'task-js','task-imagemin']);
grunt.registerTask('build', ['task']);
grunt.registerTask('default', ['task']);
grunt.registerTask('test', ['task', 'csslint', 'validation']);
grunt.registerTask('check-call', ['csslint', 'validation', 'jshint']);
grunt.registerTask('check-css', ['csslint']);
grunt.registerTask('check-html', ['validation']);
grunt.registerTask('check-js', ['jshint']);
// Version numbering task.
// grunt change-version-number --oldver=A.B.C --newver=X.Y.Z
......
......@@ -13,7 +13,7 @@
BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.
Bootflat is built on the foundations of Bootstrap, visioned in a stunning flat design. Bootstrap itself is a trusted, reliable and proven tool for developers. Built with `Sass 3.3.9`.
Bootflat is built on the foundations of Bootstrap, visioned in a stunning flat design. Bootstrap itself is a trusted, reliable and proven tool for developers. Built with `Sass 3.4.9`.
Bootflat is compatible with the following browsers: `IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome`.
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker - Blue - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
<meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Color Picker</h3>
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container color-picker-nav">
<a href="color-picker.html">All</a>
<a href="color-picker-red.html">Red</a>
<a href="color-picker-pink.html">Pink</a>
<a href="color-picker-purple.html">Purple</a>
<a class="current" href="color-picker-blue.html">Blue</a>
<a href="color-picker-green.html">Green</a>
<a href="color-picker-yellow.html">Yellow</a>
<a href="color-picker-gray.html">Gray</a>
</div>
</div>
</div>
</div>
<!--documents-->
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#4D8FAC;">
<span class="color-name">Sky color</span><br>
<span class="hex-number">#4D8FAC</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5D8CAE;">
<span class="color-name">Ultramarine color</span><br>
<span class="hex-number">#5D8CAE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#22A7F0;">
<span class="color-name">PICTON BLUE</span><br>
<span class="hex-number">#22A7F0</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#19B5FE;">
<span class="color-name">DODGER BLUE</span><br>
<span class="hex-number">#19B5FE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#59ABE3;">
<span class="color-name">PICTON BLUE</span><br>
<span class="hex-number">#59ABE3</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#48929B;">
<span class="color-name">Light blue color</span><br>
<span class="hex-number">#48929B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#317589;">
<span class="color-name">Thousand herb</span><br>
<span class="hex-number">#317589</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#89C4F4;">
<span class="color-name">JORDY BLUE</span><br>
<span class="hex-number">#89C4F4</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #4B77BE;">
<span class="color-name">STEEL BLUE</span><br>
<span class="hex-number">#4B77BE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#1F4788;">
<span class="color-name">Lapis lazuli color</span><br>
<span class="hex-number">#1F4788</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#003171;">
<span class="color-name">Navy blue color</span><br>
<span class="hex-number">#003171</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#044F67;">
<span class="color-name">Hanada</span><br>
<span class="hex-number">#044F67</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #264348;">
<span class="color-name">Indigo color</span><br>
<span class="hex-number">#264348</span><br>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Color Picker - Blue - Bootflat</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe"><meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors"><meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs"><link rel="shortcut icon" href="favicon_16.ico"><link rel="bookmark" href="favicon_16.ico"><link rel="stylesheet" href="css/site.min.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css"><!--[if lt IE 9]><script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script><![endif]--><script type="text/javascript" src="js/site.min.js"></script></head><body><div class="docs-header"><nav class="navbar navbar-default navbar-custom" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-right"><li><a class="nav-link" href="getting-started.html">Getting Started</a></li><li><a class="nav-link" href="documentation.html">Documentation</a></li><li><a class="nav-link" href="free-psd.html">Free PSD</a></li><li><a class="nav-link current" href="color-picker.html">Color Picker</a></li></ul></div></div></nav><div class="topic"><div class="container"><div class="col-md-8"><h3>Color Picker</h3><h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4></div><div class="col-md-4"><div class="advertisement"><script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script></div></div></div><div class="topic__infos"><div class="container color-picker-nav"><a href="color-picker.html">All</a> <a href="color-picker-red.html">Red</a> <a href="color-picker-pink.html">Pink</a> <a href="color-picker-purple.html">Purple</a> <a class="current" href="color-picker-blue.html">Blue</a> <a href="color-picker-green.html">Green</a> <a href="color-picker-yellow.html">Yellow</a> <a href="color-picker-gray.html">Gray</a></div></div></div></div><div class="color-wrap clearfix"><div class="color-picker"><div class="color-item" style="background-color:#4D8FAC"><span class="color-name">Sky color</span><br><span class="hex-number">#4D8FAC</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#5D8CAE"><span class="color-name">Ultramarine color</span><br><span class="hex-number">#5D8CAE</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#22A7F0"><span class="color-name">PICTON BLUE</span><br><span class="hex-number">#22A7F0</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#19B5FE"><span class="color-name">DODGER BLUE</span><br><span class="hex-number">#19B5FE</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#59ABE3"><span class="color-name">PICTON BLUE</span><br><span class="hex-number">#59ABE3</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#48929B"><span class="color-name">Light blue color</span><br><span class="hex-number">#48929B</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#317589"><span class="color-name">Thousand herb</span><br><span class="hex-number">#317589</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#89C4F4"><span class="color-name">JORDY BLUE</span><br><span class="hex-number">#89C4F4</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color: #4B77BE"><span class="color-name">STEEL BLUE</span><br><span class="hex-number">#4B77BE</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#1F4788"><span class="color-name">Lapis lazuli color</span><br><span class="hex-number">#1F4788</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#003171"><span class="color-name">Navy blue color</span><br><span class="hex-number">#003171</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#044F67"><span class="color-name">Hanada</span><br><span class="hex-number">#044F67</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color: #264348"><span class="color-name">Indigo color</span><br><span class="hex-number">#264348</span><br></div></div></div><div class="site-footer"><div class="container"><div class="download"><span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;<script type="text/javascript">(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
<p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
})();</script><a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0"></a></div><hr class="dashed"><div class="row"><div class="col-md-4"><h3>Get involved</h3><p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p></div><div class="col-md-4"><h3>Contribute</h3><p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p></div><div class="col-md-4"><h3>Found a bug?</h3><p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p></div></div><hr class="dashed"><div class="row"><div class="col-md-6"><h3>Talk to us</h3><ul><li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li><li><a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a> <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a> <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a> <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a></li></ul></div><div class="col-md-6"><link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"><div id="mc_embed_signup"><h3 style="margin-bottom: 15px">Newsletter</h3><form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><input style="margin-bottom: 10px" type="email" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required> <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span></form></div></div></div><hr class="dashed"><div class="copyright clearfix"><p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p><p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p></div></div></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
ga('send', 'pageview');</script></body></html>
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker - Gray - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
<meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Color Picker</h3>
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container color-picker-nav">
<a href="color-picker.html">All</a>
<a href="color-picker-red.html">Red</a>
<a href="color-picker-pink.html">Pink</a>
<a href="color-picker-purple.html">Purple</a>
<a href="color-picker-blue.html">Blue</a>
<a href="color-picker-green.html">Green</a>
<a href="color-picker-yellow.html">Yellow</a>
<a class="current" href="color-picker-gray.html">Gray</a>
</div>
</div>
</div>
</div>
<!--documents-->
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#BFBFBF;">
<span class="color-name">SILVER</span><br>
<span class="hex-number">#BFBFBF</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F2F1EF;">
<span class="color-name">CARARRA</span><br>
<span class="hex-number">#F2F1EF</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BDC3C7;">
<span class="color-name">SILVER SAND</span><br>
<span class="hex-number">#BDC3C7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#ECF0F1;">
<span class="color-name">PORCELAIN</span><br>
<span class="hex-number">#ECF0F1</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#D2D7D3;">
<span class="color-name">PUMICE</span><br>
<span class="hex-number">#D2D7D3</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#757D75;">
<span class="color-name">Harbor rat</span><br>
<span class="hex-number">#757D75</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#EEEEEE;">
<span class="color-name">GALLERY</span><br>
<span class="hex-number">#EEEEEE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#ABB7B7;">
<span class="color-name">EDWARD</span><br>
<span class="hex-number">#ABB7B7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #6C7A89;">
<span class="color-name">LYNCH</span><br>
<span class="hex-number">#6C7A89</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#95A5A6;">
<span class="color-name">CASCADE</span><br>
<span class="hex-number">#95A5A6</span><br>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Color Picker - Gray - Bootflat</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe"><meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors"><meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs"><link rel="shortcut icon" href="favicon_16.ico"><link rel="bookmark" href="favicon_16.ico"><link rel="stylesheet" href="css/site.min.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css"><!--[if lt IE 9]><script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script><![endif]--><script type="text/javascript" src="js/site.min.js"></script></head><body><div class="docs-header"><nav class="navbar navbar-default navbar-custom" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-right"><li><a class="nav-link" href="getting-started.html">Getting Started</a></li><li><a class="nav-link" href="documentation.html">Documentation</a></li><li><a class="nav-link" href="free-psd.html">Free PSD</a></li><li><a class="nav-link current" href="color-picker.html">Color Picker</a></li></ul></div></div></nav><div class="topic"><div class="container"><div class="col-md-8"><h3>Color Picker</h3><h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4></div><div class="col-md-4"><div class="advertisement"><script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script></div></div></div><div class="topic__infos"><div class="container color-picker-nav"><a href="color-picker.html">All</a> <a href="color-picker-red.html">Red</a> <a href="color-picker-pink.html">Pink</a> <a href="color-picker-purple.html">Purple</a> <a href="color-picker-blue.html">Blue</a> <a href="color-picker-green.html">Green</a> <a href="color-picker-yellow.html">Yellow</a> <a class="current" href="color-picker-gray.html">Gray</a></div></div></div></div><div class="color-wrap clearfix"><div class="color-picker"><div class="color-item" style="background-color:#BFBFBF"><span class="color-name">SILVER</span><br><span class="hex-number">#BFBFBF</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F2F1EF"><span class="color-name">CARARRA</span><br><span class="hex-number">#F2F1EF</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#BDC3C7"><span class="color-name">SILVER SAND</span><br><span class="hex-number">#BDC3C7</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#ECF0F1"><span class="color-name">PORCELAIN</span><br><span class="hex-number">#ECF0F1</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#D2D7D3"><span class="color-name">PUMICE</span><br><span class="hex-number">#D2D7D3</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#757D75"><span class="color-name">Harbor rat</span><br><span class="hex-number">#757D75</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#EEEEEE"><span class="color-name">GALLERY</span><br><span class="hex-number">#EEEEEE</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#ABB7B7"><span class="color-name">EDWARD</span><br><span class="hex-number">#ABB7B7</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color: #6C7A89"><span class="color-name">LYNCH</span><br><span class="hex-number">#6C7A89</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#95A5A6"><span class="color-name">CASCADE</span><br><span class="hex-number">#95A5A6</span><br></div></div></div><div class="site-footer"><div class="container"><div class="download"><span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;<script type="text/javascript">(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
<p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
})();</script><a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0"></a></div><hr class="dashed"><div class="row"><div class="col-md-4"><h3>Get involved</h3><p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p></div><div class="col-md-4"><h3>Contribute</h3><p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p></div><div class="col-md-4"><h3>Found a bug?</h3><p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p></div></div><hr class="dashed"><div class="row"><div class="col-md-6"><h3>Talk to us</h3><ul><li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li><li><a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a> <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a> <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a> <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a></li></ul></div><div class="col-md-6"><link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"><div id="mc_embed_signup"><h3 style="margin-bottom: 15px">Newsletter</h3><form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><input style="margin-bottom: 10px" type="email" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required> <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span></form></div></div></div><hr class="dashed"><div class="copyright clearfix"><p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p><p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p></div></div></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
ga('send', 'pageview');</script></body></html>
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker - Green - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
<meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Color Picker</h3>
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container color-picker-nav">
<a href="color-picker.html">All</a>
<a href="color-picker-red.html">Red</a>
<a href="color-picker-pink.html">Pink</a>
<a href="color-picker-purple.html">Purple</a>
<a href="color-picker-blue.html">Blue</a>
<a class="current" href="color-picker-green.html">Green</a>
<a href="color-picker-yellow.html">Yellow</a>
<a href="color-picker-gray.html">Gray</a>
</div>
</div>
</div>
</div>
<!--documents-->
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#7A942E;">
<span class="color-name">Siskin sprout yellow</span><br>
<span class="hex-number">#7A942E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#8DB255;">
<span class="color-name">young green onion</span><br>
<span class="hex-number">#8DB255</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5B8930;">
<span class="color-name">Fresh onion</span><br>
<span class="hex-number">#5B8930</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#6B9362;">
<span class="color-name">Young bamboo color</span><br>
<span class="hex-number">#6B9362</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#407A52;">
<span class="color-name">Patina</span><br>
<span class="hex-number">#407A52</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#006442;">
<span class="color-name">Green bamboo</span><br>
<span class="hex-number">#006442</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#87D37C;">
<span class="color-name">GOSSIP</span><br>
<span class="hex-number">#87D37C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#26A65B;">
<span class="color-name">EUCALYPTUS</span><br>
<span class="hex-number">#26A65B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #26C281;">
<span class="color-name">JUNGLE GREEN</span><br>
<span class="hex-number">#26C281</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#049372;">
<span class="color-name">OBSERVATORY</span><br>
<span class="hex-number">#049372</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#2ABB9B;">
<span class="color-name">JUNGLE GREEN</span><br>
<span class="hex-number">#2ABB9B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#16A085;">
<span class="color-name">MOUNTAIN MEADOW</span><br>
<span class="hex-number">#16A085</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#36D7B7;">
<span class="color-name">TURQUOISE</span><br>
<span class="hex-number">#36D7B7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #03A678;">
<span class="color-name">FREE SPEECH AQUAMARINE</span><br>
<span class="hex-number">#03A678</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#4DAF7C;">
<span class="color-name">OCEAN GREEN</span><br>
<span class="hex-number">#4DAF7C</span><br>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Color Picker - Green - Bootflat</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe"><meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors"><meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs"><link rel="shortcut icon" href="favicon_16.ico"><link rel="bookmark" href="favicon_16.ico"><link rel="stylesheet" href="css/site.min.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css"><!--[if lt IE 9]><script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script><![endif]--><script type="text/javascript" src="js/site.min.js"></script></head><body><div class="docs-header"><nav class="navbar navbar-default navbar-custom" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-right"><li><a class="nav-link" href="getting-started.html">Getting Started</a></li><li><a class="nav-link" href="documentation.html">Documentation</a></li><li><a class="nav-link" href="free-psd.html">Free PSD</a></li><li><a class="nav-link current" href="color-picker.html">Color Picker</a></li></ul></div></div></nav><div class="topic"><div class="container"><div class="col-md-8"><h3>Color Picker</h3><h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4></div><div class="col-md-4"><div class="advertisement"><script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script></div></div></div><div class="topic__infos"><div class="container color-picker-nav"><a href="color-picker.html">All</a> <a href="color-picker-red.html">Red</a> <a href="color-picker-pink.html">Pink</a> <a href="color-picker-purple.html">Purple</a> <a href="color-picker-blue.html">Blue</a> <a class="current" href="color-picker-green.html">Green</a> <a href="color-picker-yellow.html">Yellow</a> <a href="color-picker-gray.html">Gray</a></div></div></div></div><div class="color-wrap clearfix"><div class="color-picker"><div class="color-item" style="background-color:#7A942E"><span class="color-name">Siskin sprout yellow</span><br><span class="hex-number">#7A942E</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#8DB255"><span class="color-name">young green onion</span><br><span class="hex-number">#8DB255</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#5B8930"><span class="color-name">Fresh onion</span><br><span class="hex-number">#5B8930</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#6B9362"><span class="color-name">Young bamboo color</span><br><span class="hex-number">#6B9362</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#407A52"><span class="color-name">Patina</span><br><span class="hex-number">#407A52</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#006442"><span class="color-name">Green bamboo</span><br><span class="hex-number">#006442</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#87D37C"><span class="color-name">GOSSIP</span><br><span class="hex-number">#87D37C</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#26A65B"><span class="color-name">EUCALYPTUS</span><br><span class="hex-number">#26A65B</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color: #26C281"><span class="color-name">JUNGLE GREEN</span><br><span class="hex-number">#26C281</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#049372"><span class="color-name">OBSERVATORY</span><br><span class="hex-number">#049372</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#2ABB9B"><span class="color-name">JUNGLE GREEN</span><br><span class="hex-number">#2ABB9B</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#16A085"><span class="color-name">MOUNTAIN MEADOW</span><br><span class="hex-number">#16A085</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#36D7B7"><span class="color-name">TURQUOISE</span><br><span class="hex-number">#36D7B7</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color: #03A678"><span class="color-name">FREE SPEECH AQUAMARINE</span><br><span class="hex-number">#03A678</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#4DAF7C"><span class="color-name">OCEAN GREEN</span><br><span class="hex-number">#4DAF7C</span><br></div></div></div><div class="site-footer"><div class="container"><div class="download"><span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;<script type="text/javascript">(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
<p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
})();</script><a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0"></a></div><hr class="dashed"><div class="row"><div class="col-md-4"><h3>Get involved</h3><p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p></div><div class="col-md-4"><h3>Contribute</h3><p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p></div><div class="col-md-4"><h3>Found a bug?</h3><p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p></div></div><hr class="dashed"><div class="row"><div class="col-md-6"><h3>Talk to us</h3><ul><li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li><li><a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a> <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a> <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a> <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a></li></ul></div><div class="col-md-6"><link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"><div id="mc_embed_signup"><h3 style="margin-bottom: 15px">Newsletter</h3><form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><input style="margin-bottom: 10px" type="email" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required> <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span></form></div></div></div><hr class="dashed"><div class="copyright clearfix"><p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p><p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p></div></div></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
ga('send', 'pageview');</script></body></html>
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker - Pink - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
<meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Color Picker</h3>
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container color-picker-nav">
<a href="color-picker.html">All</a>
<a href="color-picker-red.html">Red</a>
<a class="current" href="color-picker-pink.html">Pink</a>
<a href="color-picker-purple.html">Purple</a>
<a href="color-picker-blue.html">Blue</a>
<a href="color-picker-green.html">Green</a>
<a href="color-picker-yellow.html">Yellow</a>
<a href="color-picker-gray.html">Gray</a>
</div>
</div>
</div>
</div>
<!--documents-->
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#F08F90;">
<span class="color-name">One kin dye</span><br>
<span class="hex-number">#F08F907</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F47983;">
<span class="color-name">Peach-colored</span><br>
<span class="hex-number">#F47983</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#DB5A6B;">
<span class="color-name">Red plum colored</span><br>
<span class="hex-number">#DB5A6B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#C93756;">
<span class="color-name">Medium crimson</span><br>
<span class="hex-number">#C93756</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FCC9B9;">
<span class="color-name">Cherry blossom color</span><br>
<span class="hex-number">#FCC9B9</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFB3A7;">
<span class="color-name">Washed-out crimson</span><br>
<span class="hex-number">#FFB3A7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F62459;">
<span class="color-name">RADICAL RED</span><br>
<span class="hex-number">#F62459</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F58F84;">
<span class="color-name">Ibis wing color</span><br>
<span class="hex-number">#F58F84</span><br>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Color Picker - Pink - Bootflat</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe"><meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors"><meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs"><link rel="shortcut icon" href="favicon_16.ico"><link rel="bookmark" href="favicon_16.ico"><link rel="stylesheet" href="css/site.min.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css"><!--[if lt IE 9]><script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script><![endif]--><script type="text/javascript" src="js/site.min.js"></script></head><body><div class="docs-header"><nav class="navbar navbar-default navbar-custom" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-right"><li><a class="nav-link" href="getting-started.html">Getting Started</a></li><li><a class="nav-link" href="documentation.html">Documentation</a></li><li><a class="nav-link" href="free-psd.html">Free PSD</a></li><li><a class="nav-link current" href="color-picker.html">Color Picker</a></li></ul></div></div></nav><div class="topic"><div class="container"><div class="col-md-8"><h3>Color Picker</h3><h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4></div><div class="col-md-4"><div class="advertisement"><script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script></div></div></div><div class="topic__infos"><div class="container color-picker-nav"><a href="color-picker.html">All</a> <a href="color-picker-red.html">Red</a> <a class="current" href="color-picker-pink.html">Pink</a> <a href="color-picker-purple.html">Purple</a> <a href="color-picker-blue.html">Blue</a> <a href="color-picker-green.html">Green</a> <a href="color-picker-yellow.html">Yellow</a> <a href="color-picker-gray.html">Gray</a></div></div></div></div><div class="color-wrap clearfix"><div class="color-picker"><div class="color-item" style="background-color:#F08F90"><span class="color-name">One kin dye</span><br><span class="hex-number">#F08F907</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F47983"><span class="color-name">Peach-colored</span><br><span class="hex-number">#F47983</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#DB5A6B"><span class="color-name">Red plum colored</span><br><span class="hex-number">#DB5A6B</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#C93756"><span class="color-name">Medium crimson</span><br><span class="hex-number">#C93756</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#FCC9B9"><span class="color-name">Cherry blossom color</span><br><span class="hex-number">#FCC9B9</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#FFB3A7"><span class="color-name">Washed-out crimson</span><br><span class="hex-number">#FFB3A7</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F62459"><span class="color-name">RADICAL RED</span><br><span class="hex-number">#F62459</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F58F84"><span class="color-name">Ibis wing color</span><br><span class="hex-number">#F58F84</span><br></div></div></div><div class="site-footer"><div class="container"><div class="download"><span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;<script type="text/javascript">(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
<p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
})();</script><a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0"></a></div><hr class="dashed"><div class="row"><div class="col-md-4"><h3>Get involved</h3><p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p></div><div class="col-md-4"><h3>Contribute</h3><p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p></div><div class="col-md-4"><h3>Found a bug?</h3><p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p></div></div><hr class="dashed"><div class="row"><div class="col-md-6"><h3>Talk to us</h3><ul><li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li><li><a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a> <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a> <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a> <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a></li></ul></div><div class="col-md-6"><link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"><div id="mc_embed_signup"><h3 style="margin-bottom: 15px">Newsletter</h3><form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><input style="margin-bottom: 10px" type="email" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required> <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span></form></div></div></div><hr class="dashed"><div class="copyright clearfix"><p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p><p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p></div></div></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
ga('send', 'pageview');</script></body></html>
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker - Purple - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
<meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Color Picker</h3>
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container color-picker-nav">
<a href="color-picker.html">All</a>
<a href="color-picker-red.html">Red</a>
<a href="color-picker-pink.html">Pink</a>
<a class="current" href="color-picker-purple.html">Purple</a>
<a href="color-picker-blue.html">Blue</a>
<a href="color-picker-green.html">Green</a>
<a href="color-picker-yellow.html">Yellow</a>
<a href="color-picker-gray.html">Gray</a>
</div>
</div>
</div>
</div>
<!--documents-->
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#875F9A;">
<span class="color-name">Wisteria purple</span><br>
<span class="hex-number">#875F9A</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5D3F6A;">
<span class="color-name">Bellflower color</span><br>
<span class="hex-number">#5D3F6A</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#89729E;">
<span class="color-name">Wisteria color</span><br>
<span class="hex-number">#89729E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#763568;">
<span class="color-name">Iris color</span><br>
<span class="hex-number">#763568</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#8D608C;">
<span class="color-name">Tatarian aster color</span><br>
<span class="hex-number">#8D608C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#A87CA0;">
<span class="color-name">Thin color</span><br>
<span class="hex-number">#A87CA0</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5B3256;">
<span class="color-name">Violet color</span><br>
<span class="hex-number">#5B3256</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BF55EC;">
<span class="color-name">MEDIUM PURPLE</span><br>
<span class="hex-number">#BF55EC</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #8E44AD;">
<span class="color-name">STUDIO</span><br>
<span class="hex-number">#8E44AD</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#9B59B6;">
<span class="color-name">WISTERIA</span><br>
<span class="hex-number">#9B59B6</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BE90D4;">
<span class="color-name">LIGHT WISTERIA</span><br>
<span class="hex-number">#BE90D4</span><br>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Color Picker - Purple - Bootflat</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe"><meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors"><meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs"><link rel="shortcut icon" href="favicon_16.ico"><link rel="bookmark" href="favicon_16.ico"><link rel="stylesheet" href="css/site.min.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css"><!--[if lt IE 9]><script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script><![endif]--><script type="text/javascript" src="js/site.min.js"></script></head><body><div class="docs-header"><nav class="navbar navbar-default navbar-custom" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-right"><li><a class="nav-link" href="getting-started.html">Getting Started</a></li><li><a class="nav-link" href="documentation.html">Documentation</a></li><li><a class="nav-link" href="free-psd.html">Free PSD</a></li><li><a class="nav-link current" href="color-picker.html">Color Picker</a></li></ul></div></div></nav><div class="topic"><div class="container"><div class="col-md-8"><h3>Color Picker</h3><h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4></div><div class="col-md-4"><div class="advertisement"><script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script></div></div></div><div class="topic__infos"><div class="container color-picker-nav"><a href="color-picker.html">All</a> <a href="color-picker-red.html">Red</a> <a href="color-picker-pink.html">Pink</a> <a class="current" href="color-picker-purple.html">Purple</a> <a href="color-picker-blue.html">Blue</a> <a href="color-picker-green.html">Green</a> <a href="color-picker-yellow.html">Yellow</a> <a href="color-picker-gray.html">Gray</a></div></div></div></div><div class="color-wrap clearfix"><div class="color-picker"><div class="color-item" style="background-color:#875F9A"><span class="color-name">Wisteria purple</span><br><span class="hex-number">#875F9A</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#5D3F6A"><span class="color-name">Bellflower color</span><br><span class="hex-number">#5D3F6A</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#89729E"><span class="color-name">Wisteria color</span><br><span class="hex-number">#89729E</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#763568"><span class="color-name">Iris color</span><br><span class="hex-number">#763568</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#8D608C"><span class="color-name">Tatarian aster color</span><br><span class="hex-number">#8D608C</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#A87CA0"><span class="color-name">Thin color</span><br><span class="hex-number">#A87CA0</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#5B3256"><span class="color-name">Violet color</span><br><span class="hex-number">#5B3256</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#BF55EC"><span class="color-name">MEDIUM PURPLE</span><br><span class="hex-number">#BF55EC</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color: #8E44AD"><span class="color-name">STUDIO</span><br><span class="hex-number">#8E44AD</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#9B59B6"><span class="color-name">WISTERIA</span><br><span class="hex-number">#9B59B6</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#BE90D4"><span class="color-name">LIGHT WISTERIA</span><br><span class="hex-number">#BE90D4</span><br></div></div></div><div class="site-footer"><div class="container"><div class="download"><span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;<script type="text/javascript">(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
<p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
})();</script><a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0"></a></div><hr class="dashed"><div class="row"><div class="col-md-4"><h3>Get involved</h3><p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p></div><div class="col-md-4"><h3>Contribute</h3><p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p></div><div class="col-md-4"><h3>Found a bug?</h3><p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p></div></div><hr class="dashed"><div class="row"><div class="col-md-6"><h3>Talk to us</h3><ul><li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li><li><a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a> <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a> <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a> <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a></li></ul></div><div class="col-md-6"><link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"><div id="mc_embed_signup"><h3 style="margin-bottom: 15px">Newsletter</h3><form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><input style="margin-bottom: 10px" type="email" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required> <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span></form></div></div></div><hr class="dashed"><div class="copyright clearfix"><p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p><p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p></div></div></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
ga('send', 'pageview');</script></body></html>
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker - Red - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
<meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Color Picker</h3>
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container color-picker-nav">
<a href="color-picker.html">All</a>
<a class="current" href="color-picker-red.html">Red</a>
<a href="color-picker-pink.html">Pink</a>
<a href="color-picker-purple.html">Purple</a>
<a href="color-picker-blue.html">Blue</a>
<a href="color-picker-green.html">Green</a>
<a href="color-picker-yellow.html">Yellow</a>
<a href="color-picker-gray.html">Gray</a>
</div>
</div>
</div>
</div>
<!--documents-->
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#C91F37;">
<span class="color-name">Foreign crimson</span><br>
<span class="hex-number">#C91F37</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#DC3023;">
<span class="color-name">Red orange</span><br>
<span class="hex-number">#DC3023</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#9D2933;">
<span class="color-name">Cochineal red</span><br>
<span class="hex-number">#9D2933</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#CF000F;">
<span class="color-name">Monza</span><br>
<span class="hex-number">#CF000F</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E68364;">
<span class="color-name">Brewed mustard-brown</span><br>
<span class="hex-number">#E68364</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F22613;">
<span class="color-name">Pomegranate</span><br>
<span class="hex-number">#F22613</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#CF3A24;">
<span class="color-name">Scarlet</span><br>
<span class="hex-number">#CF3A24</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#C3272B;">
<span class="color-name">Pure crimson</span><br>
<span class="hex-number">#C3272B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #8F1D21;">
<span class="color-name">True red</span><br>
<span class="hex-number">#8F1D21</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#D24D57;">
<span class="color-name">Chestnut Rose</span><br>
<span class="hex-number">#D24D57</span><br>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Color Picker - Red - Bootflat</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe"><meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors"><meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs"><link rel="shortcut icon" href="favicon_16.ico"><link rel="bookmark" href="favicon_16.ico"><link rel="stylesheet" href="css/site.min.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css"><!--[if lt IE 9]><script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script><![endif]--><script type="text/javascript" src="js/site.min.js"></script></head><body><div class="docs-header"><nav class="navbar navbar-default navbar-custom" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-right"><li><a class="nav-link" href="getting-started.html">Getting Started</a></li><li><a class="nav-link" href="documentation.html">Documentation</a></li><li><a class="nav-link" href="free-psd.html">Free PSD</a></li><li><a class="nav-link current" href="color-picker.html">Color Picker</a></li></ul></div></div></nav><div class="topic"><div class="container"><div class="col-md-8"><h3>Color Picker</h3><h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4></div><div class="col-md-4"><div class="advertisement"><script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script></div></div></div><div class="topic__infos"><div class="container color-picker-nav"><a href="color-picker.html">All</a> <a class="current" href="color-picker-red.html">Red</a> <a href="color-picker-pink.html">Pink</a> <a href="color-picker-purple.html">Purple</a> <a href="color-picker-blue.html">Blue</a> <a href="color-picker-green.html">Green</a> <a href="color-picker-yellow.html">Yellow</a> <a href="color-picker-gray.html">Gray</a></div></div></div></div><div class="color-wrap clearfix"><div class="color-picker"><div class="color-item" style="background-color:#C91F37"><span class="color-name">Foreign crimson</span><br><span class="hex-number">#C91F37</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#DC3023"><span class="color-name">Red orange</span><br><span class="hex-number">#DC3023</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#9D2933"><span class="color-name">Cochineal red</span><br><span class="hex-number">#9D2933</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#CF000F"><span class="color-name">Monza</span><br><span class="hex-number">#CF000F</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#E68364"><span class="color-name">Brewed mustard-brown</span><br><span class="hex-number">#E68364</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F22613"><span class="color-name">Pomegranate</span><br><span class="hex-number">#F22613</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#CF3A24"><span class="color-name">Scarlet</span><br><span class="hex-number">#CF3A24</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#C3272B"><span class="color-name">Pure crimson</span><br><span class="hex-number">#C3272B</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color: #8F1D21"><span class="color-name">True red</span><br><span class="hex-number">#8F1D21</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#D24D57"><span class="color-name">Chestnut Rose</span><br><span class="hex-number">#D24D57</span><br></div></div></div><div class="site-footer"><div class="container"><div class="download"><span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;<script type="text/javascript">(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
<p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
})();</script><a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0"></a></div><hr class="dashed"><div class="row"><div class="col-md-4"><h3>Get involved</h3><p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p></div><div class="col-md-4"><h3>Contribute</h3><p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p></div><div class="col-md-4"><h3>Found a bug?</h3><p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p></div></div><hr class="dashed"><div class="row"><div class="col-md-6"><h3>Talk to us</h3><ul><li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li><li><a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a> <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a> <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a> <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a></li></ul></div><div class="col-md-6"><link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"><div id="mc_embed_signup"><h3 style="margin-bottom: 15px">Newsletter</h3><form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><input style="margin-bottom: 10px" type="email" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required> <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span></form></div></div></div><hr class="dashed"><div class="copyright clearfix"><p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p><p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p></div></div></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
ga('send', 'pageview');</script></body></html>
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker - Yellow - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
<meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Color Picker</h3>
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container color-picker-nav">
<a href="color-picker.html">All</a>
<a href="color-picker-red.html">Red</a>
<a href="color-picker-pink.html">Pink</a>
<a href="color-picker-purple.html">Purple</a>
<a href="color-picker-blue.html">Blue</a>
<a href="color-picker-green.html">Green</a>
<a class="current" href="color-picker-yellow.html">Yellow</a>
<a href="color-picker-gray.html">Gray</a>
</div>
</div>
</div>
</div>
<!--documents-->
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#D9B611;">
<span class="color-name">Patrinia flowers</span><br>
<span class="hex-number">#D9B611</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F3C13A;">
<span class="color-name">Amur cork tree</span><br>
<span class="hex-number">#F3C13A</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F7CA18;">
<span class="color-name">RIPE LEMON</span><br>
<span class="hex-number">#F7CA18</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E2B13C;">
<span class="color-name">Japanese triandra grass</span><br>
<span class="hex-number">#E2B13C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#A17917;">
<span class="color-name">Rapeseed oil-colored</span><br>
<span class="hex-number">#A17917</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F5D76E;">
<span class="color-name">CREAM CAN</span><br>
<span class="hex-number">#F5D76E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F4D03F;">
<span class="color-name">SAFFRON</span><br>
<span class="hex-number">#F4D03F</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFA400;">
<span class="color-name">Bright golden yellow</span><br>
<span class="hex-number">#FFA400</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E08A1E;">
<span class="color-name">Sumac-dyed</span><br>
<span class="hex-number">#E08A1E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFB61E;">
<span class="color-name">Gamboge</span><br>
<span class="hex-number">#FFB61E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FAA945;">
<span class="color-name">Corn-colored</span><br>
<span class="hex-number">#FAA945</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFA631;">
<span class="color-name">Egg-colored</span><br>
<span class="hex-number">#FFA631</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFB94E;">
<span class="color-name">Floral leaf-colored</span><br>
<span class="hex-number">#FFB94E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E29C45;">
<span class="color-name">Golden fallen leaves</span><br>
<span class="hex-number">#E29C45</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F9690E;">
<span class="color-name">ECSTASY</span><br>
<span class="hex-number">#F9690E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #CA6924;">
<span class="color-name">Amber</span><br>
<span class="hex-number">#CA6924</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F5AB35;">
<span class="color-name">LIGHTNING YELLOW</span><br>
<span class="hex-number">#F5AB35</span><br>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Color Picker - Yellow - Bootflat</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe"><meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors"><meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs"><link rel="shortcut icon" href="favicon_16.ico"><link rel="bookmark" href="favicon_16.ico"><link rel="stylesheet" href="css/site.min.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css"><!--[if lt IE 9]><script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script><![endif]--><script type="text/javascript" src="js/site.min.js"></script></head><body><div class="docs-header"><nav class="navbar navbar-default navbar-custom" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-right"><li><a class="nav-link" href="getting-started.html">Getting Started</a></li><li><a class="nav-link" href="documentation.html">Documentation</a></li><li><a class="nav-link" href="free-psd.html">Free PSD</a></li><li><a class="nav-link current" href="color-picker.html">Color Picker</a></li></ul></div></div></nav><div class="topic"><div class="container"><div class="col-md-8"><h3>Color Picker</h3><h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4></div><div class="col-md-4"><div class="advertisement"><script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script></div></div></div><div class="topic__infos"><div class="container color-picker-nav"><a href="color-picker.html">All</a> <a href="color-picker-red.html">Red</a> <a href="color-picker-pink.html">Pink</a> <a href="color-picker-purple.html">Purple</a> <a href="color-picker-blue.html">Blue</a> <a href="color-picker-green.html">Green</a> <a class="current" href="color-picker-yellow.html">Yellow</a> <a href="color-picker-gray.html">Gray</a></div></div></div></div><div class="color-wrap clearfix"><div class="color-picker"><div class="color-item" style="background-color:#D9B611"><span class="color-name">Patrinia flowers</span><br><span class="hex-number">#D9B611</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F3C13A"><span class="color-name">Amur cork tree</span><br><span class="hex-number">#F3C13A</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F7CA18"><span class="color-name">RIPE LEMON</span><br><span class="hex-number">#F7CA18</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#E2B13C"><span class="color-name">Japanese triandra grass</span><br><span class="hex-number">#E2B13C</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#A17917"><span class="color-name">Rapeseed oil-colored</span><br><span class="hex-number">#A17917</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F5D76E"><span class="color-name">CREAM CAN</span><br><span class="hex-number">#F5D76E</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F4D03F"><span class="color-name">SAFFRON</span><br><span class="hex-number">#F4D03F</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#FFA400"><span class="color-name">Bright golden yellow</span><br><span class="hex-number">#FFA400</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#E08A1E"><span class="color-name">Sumac-dyed</span><br><span class="hex-number">#E08A1E</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#FFB61E"><span class="color-name">Gamboge</span><br><span class="hex-number">#FFB61E</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#FAA945"><span class="color-name">Corn-colored</span><br><span class="hex-number">#FAA945</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#FFA631"><span class="color-name">Egg-colored</span><br><span class="hex-number">#FFA631</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#FFB94E"><span class="color-name">Floral leaf-colored</span><br><span class="hex-number">#FFB94E</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#E29C45"><span class="color-name">Golden fallen leaves</span><br><span class="hex-number">#E29C45</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F9690E"><span class="color-name">ECSTASY</span><br><span class="hex-number">#F9690E</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color: #CA6924"><span class="color-name">Amber</span><br><span class="hex-number">#CA6924</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F5AB35"><span class="color-name">LIGHTNING YELLOW</span><br><span class="hex-number">#F5AB35</span><br></div></div></div><div class="site-footer"><div class="container"><div class="download"><span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;<script type="text/javascript">(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
<p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
})();</script><a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0"></a></div><hr class="dashed"><div class="row"><div class="col-md-4"><h3>Get involved</h3><p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p></div><div class="col-md-4"><h3>Contribute</h3><p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p></div><div class="col-md-4"><h3>Found a bug?</h3><p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p></div></div><hr class="dashed"><div class="row"><div class="col-md-6"><h3>Talk to us</h3><ul><li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li><li><a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a> <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a> <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a> <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a></li></ul></div><div class="col-md-6"><link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"><div id="mc_embed_signup"><h3 style="margin-bottom: 15px">Newsletter</h3><form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><input style="margin-bottom: 10px" type="email" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required> <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span></form></div></div></div><hr class="dashed"><div class="copyright clearfix"><p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p><p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p></div></div></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
ga('send', 'pageview');</script></body></html>
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker - All - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
<meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Color Picker</h3>
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container color-picker-nav">
<a class="current" href="color-picker.html">All</a>
<a href="color-picker-red.html">Red</a>
<a href="color-picker-pink.html">Pink</a>
<a href="color-picker-purple.html">Purple</a>
<a href="color-picker-blue.html">Blue</a>
<a href="color-picker-green.html">Green</a>
<a href="color-picker-yellow.html">Yellow</a>
<a href="color-picker-gray.html">Gray</a>
</div>
</div>
</div>
</div>
<!--documents-->
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#C91F37;">
<span class="color-name">Foreign crimson</span><br>
<span class="hex-number">#C91F37</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#DC3023;">
<span class="color-name">Red orange</span><br>
<span class="hex-number">#DC3023</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#9D2933;">
<span class="color-name">Cochineal red</span><br>
<span class="hex-number">#9D2933</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#CF000F;">
<span class="color-name">Monza</span><br>
<span class="hex-number">#CF000F</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E68364;">
<span class="color-name">Brewed mustard-brown</span><br>
<span class="hex-number">#E68364</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F22613;">
<span class="color-name">Pomegranate</span><br>
<span class="hex-number">#F22613</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#CF3A24;">
<span class="color-name">Scarlet</span><br>
<span class="hex-number">#CF3A24</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#C3272B;">
<span class="color-name">Pure crimson</span><br>
<span class="hex-number">#C3272B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #8F1D21;">
<span class="color-name">True red</span><br>
<span class="hex-number">#8F1D21</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#D24D57;">
<span class="color-name">Chestnut Rose</span><br>
<span class="hex-number">#D24D57</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F08F90;">
<span class="color-name">One kin dye</span><br>
<span class="hex-number">#F08F907</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F47983;">
<span class="color-name">Peach-colored</span><br>
<span class="hex-number">#F47983</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#DB5A6B;">
<span class="color-name">Red plum colored</span><br>
<span class="hex-number">#DB5A6B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#C93756;">
<span class="color-name">Medium crimson</span><br>
<span class="hex-number">#C93756</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FCC9B9;">
<span class="color-name">Cherry blossom color</span><br>
<span class="hex-number">#FCC9B9</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFB3A7;">
<span class="color-name">Washed-out crimson</span><br>
<span class="hex-number">#FFB3A7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F62459;">
<span class="color-name">RADICAL RED</span><br>
<span class="hex-number">#F62459</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F58F84;">
<span class="color-name">Ibis wing color</span><br>
<span class="hex-number">#F58F84</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#875F9A;">
<span class="color-name">Wisteria purple</span><br>
<span class="hex-number">#875F9A</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5D3F6A;">
<span class="color-name">Bellflower color</span><br>
<span class="hex-number">#5D3F6A</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#89729E;">
<span class="color-name">Wisteria color</span><br>
<span class="hex-number">#89729E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#763568;">
<span class="color-name">Iris color</span><br>
<span class="hex-number">#763568</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#8D608C;">
<span class="color-name">Tatarian aster color</span><br>
<span class="hex-number">#8D608C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#A87CA0;">
<span class="color-name">Thin color</span><br>
<span class="hex-number">#A87CA0</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5B3256;">
<span class="color-name">Violet color</span><br>
<span class="hex-number">#5B3256</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BF55EC;">
<span class="color-name">MEDIUM PURPLE</span><br>
<span class="hex-number">#BF55EC</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #8E44AD;">
<span class="color-name">STUDIO</span><br>
<span class="hex-number">#8E44AD</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#9B59B6;">
<span class="color-name">WISTERIA</span><br>
<span class="hex-number">#9B59B6</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BE90D4;">
<span class="color-name">LIGHT WISTERIA</span><br>
<span class="hex-number">#BE90D4</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#4D8FAC;">
<span class="color-name">Sky color</span><br>
<span class="hex-number">#4D8FAC</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5D8CAE;">
<span class="color-name">Ultramarine color</span><br>
<span class="hex-number">#5D8CAE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#22A7F0;">
<span class="color-name">PICTON BLUE</span><br>
<span class="hex-number">#22A7F0</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#19B5FE;">
<span class="color-name">DODGER BLUE</span><br>
<span class="hex-number">#19B5FE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#59ABE3;">
<span class="color-name">PICTON BLUE</span><br>
<span class="hex-number">#59ABE3</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#48929B;">
<span class="color-name">Light blue color</span><br>
<span class="hex-number">#48929B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#317589;">
<span class="color-name">Thousand herb</span><br>
<span class="hex-number">#317589</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#89C4F4;">
<span class="color-name">JORDY BLUE</span><br>
<span class="hex-number">#89C4F4</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #4B77BE;">
<span class="color-name">STEEL BLUE</span><br>
<span class="hex-number">#4B77BE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#1F4788;">
<span class="color-name">Lapis lazuli color</span><br>
<span class="hex-number">#1F4788</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#003171;">
<span class="color-name">Navy blue color</span><br>
<span class="hex-number">#003171</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#044F67;">
<span class="color-name">Hanada</span><br>
<span class="hex-number">#044F67</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #264348;">
<span class="color-name">Indigo color</span><br>
<span class="hex-number">#264348</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#7A942E;">
<span class="color-name">Siskin sprout yellow</span><br>
<span class="hex-number">#7A942E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#8DB255;">
<span class="color-name">young green onion</span><br>
<span class="hex-number">#8DB255</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5B8930;">
<span class="color-name">Fresh onion</span><br>
<span class="hex-number">#5B8930</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#6B9362;">
<span class="color-name">Young bamboo color</span><br>
<span class="hex-number">#6B9362</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#407A52;">
<span class="color-name">Patina</span><br>
<span class="hex-number">#407A52</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#006442;">
<span class="color-name">Green bamboo</span><br>
<span class="hex-number">#006442</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#87D37C;">
<span class="color-name">GOSSIP</span><br>
<span class="hex-number">#87D37C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#26A65B;">
<span class="color-name">EUCALYPTUS</span><br>
<span class="hex-number">#26A65B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #26C281;">
<span class="color-name">JUNGLE GREEN</span><br>
<span class="hex-number">#26C281</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#049372;">
<span class="color-name">OBSERVATORY</span><br>
<span class="hex-number">#049372</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#2ABB9B;">
<span class="color-name">JUNGLE GREEN</span><br>
<span class="hex-number">#2ABB9B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#16A085;">
<span class="color-name">MOUNTAIN MEADOW</span><br>
<span class="hex-number">#16A085</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#36D7B7;">
<span class="color-name">TURQUOISE</span><br>
<span class="hex-number">#36D7B7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #03A678;">
<span class="color-name">FREE SPEECH AQUAMARINE</span><br>
<span class="hex-number">#03A678</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#4DAF7C;">
<span class="color-name">OCEAN GREEN</span><br>
<span class="hex-number">#4DAF7C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#D9B611;">
<span class="color-name">Patrinia flowers</span><br>
<span class="hex-number">#D9B611</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F3C13A;">
<span class="color-name">Amur cork tree</span><br>
<span class="hex-number">#F3C13A</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F7CA18;">
<span class="color-name">RIPE LEMON</span><br>
<span class="hex-number">#F7CA18</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E2B13C;">
<span class="color-name">Japanese triandra grass</span><br>
<span class="hex-number">#E2B13C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#A17917;">
<span class="color-name">Rapeseed oil-colored</span><br>
<span class="hex-number">#A17917</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F5D76E;">
<span class="color-name">CREAM CAN</span><br>
<span class="hex-number">#F5D76E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F4D03F;">
<span class="color-name">SAFFRON</span><br>
<span class="hex-number">#F4D03F</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFA400;">
<span class="color-name">Bright golden yellow</span><br>
<span class="hex-number">#FFA400</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E08A1E;">
<span class="color-name">Sumac-dyed</span><br>
<span class="hex-number">#E08A1E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFB61E;">
<span class="color-name">Gamboge</span><br>
<span class="hex-number">#FFB61E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FAA945;">
<span class="color-name">Corn-colored</span><br>
<span class="hex-number">#FAA945</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFA631;">
<span class="color-name">Egg-colored</span><br>
<span class="hex-number">#FFA631</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFB94E;">
<span class="color-name">Floral leaf-colored</span><br>
<span class="hex-number">#FFB94E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E29C45;">
<span class="color-name">Golden fallen leaves</span><br>
<span class="hex-number">#E29C45</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F9690E;">
<span class="color-name">ECSTASY</span><br>
<span class="hex-number">#F9690E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #CA6924;">
<span class="color-name">Amber</span><br>
<span class="hex-number">#CA6924</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F5AB35;">
<span class="color-name">LIGHTNING YELLOW</span><br>
<span class="hex-number">#F5AB35</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BFBFBF;">
<span class="color-name">SILVER</span><br>
<span class="hex-number">#BFBFBF</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F2F1EF;">
<span class="color-name">CARARRA</span><br>
<span class="hex-number">#F2F1EF</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BDC3C7;">
<span class="color-name">SILVER SAND</span><br>
<span class="hex-number">#BDC3C7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#ECF0F1;">
<span class="color-name">PORCELAIN</span><br>
<span class="hex-number">#ECF0F1</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#D2D7D3;">
<span class="color-name">PUMICE</span><br>
<span class="hex-number">#D2D7D3</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#757D75;">
<span class="color-name">Harbor rat</span><br>
<span class="hex-number">#757D75</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#EEEEEE;">
<span class="color-name">GALLERY</span><br>
<span class="hex-number">#EEEEEE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#ABB7B7;">
<span class="color-name">EDWARD</span><br>
<span class="hex-number">#ABB7B7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #6C7A89;">
<span class="color-name">LYNCH</span><br>
<span class="hex-number">#6C7A89</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#95A5A6;">
<span class="color-name">CASCADE</span><br>
<span class="hex-number">#95A5A6</span><br>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Color Picker - All - Bootflat</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors"><meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs"><meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe"><link rel="shortcut icon" href="favicon_16.ico"><link rel="bookmark" href="favicon_16.ico"><link rel="stylesheet" href="css/site.min.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css"><!--[if lt IE 9]><script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script><![endif]--><script type="text/javascript" src="js/site.min.js"></script></head><body><div class="docs-header"><nav class="navbar navbar-default navbar-custom" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-right"><li><a class="nav-link" href="getting-started.html">Getting Started</a></li><li><a class="nav-link" href="documentation.html">Documentation</a></li><li><a class="nav-link" href="free-psd.html">Free PSD</a></li><li><a class="nav-link current" href="color-picker.html">Color Picker</a></li></ul></div></div></nav><div class="topic"><div class="container"><div class="col-md-8"><h3>Color Picker</h3><h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4></div><div class="col-md-4"><div class="advertisement"><script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script></div></div></div><div class="topic__infos"><div class="container color-picker-nav"><a class="current" href="color-picker.html">All</a> <a href="color-picker-red.html">Red</a> <a href="color-picker-pink.html">Pink</a> <a href="color-picker-purple.html">Purple</a> <a href="color-picker-blue.html">Blue</a> <a href="color-picker-green.html">Green</a> <a href="color-picker-yellow.html">Yellow</a> <a href="color-picker-gray.html">Gray</a></div></div></div></div><div class="color-wrap clearfix"><div class="color-picker"><div class="color-item" style="background-color:#C91F37"><span class="color-name">Foreign crimson</span><br><span class="hex-number">#C91F37</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#DC3023"><span class="color-name">Red orange</span><br><span class="hex-number">#DC3023</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#9D2933"><span class="color-name">Cochineal red</span><br><span class="hex-number">#9D2933</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#CF000F"><span class="color-name">Monza</span><br><span class="hex-number">#CF000F</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#E68364"><span class="color-name">Brewed mustard-brown</span><br><span class="hex-number">#E68364</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F22613"><span class="color-name">Pomegranate</span><br><span class="hex-number">#F22613</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#CF3A24"><span class="color-name">Scarlet</span><br><span class="hex-number">#CF3A24</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#C3272B"><span class="color-name">Pure crimson</span><br><span class="hex-number">#C3272B</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color: #8F1D21"><span class="color-name">True red</span><br><span class="hex-number">#8F1D21</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#D24D57"><span class="color-name">Chestnut Rose</span><br><span class="hex-number">#D24D57</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F08F90"><span class="color-name">One kin dye</span><br><span class="hex-number">#F08F907</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F47983"><span class="color-name">Peach-colored</span><br><span class="hex-number">#F47983</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#DB5A6B"><span class="color-name">Red plum colored</span><br><span class="hex-number">#DB5A6B</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#C93756"><span class="color-name">Medium crimson</span><br><span class="hex-number">#C93756</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#FCC9B9"><span class="color-name">Cherry blossom color</span><br><span class="hex-number">#FCC9B9</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#FFB3A7"><span class="color-name">Washed-out crimson</span><br><span class="hex-number">#FFB3A7</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F62459"><span class="color-name">RADICAL RED</span><br><span class="hex-number">#F62459</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F58F84"><span class="color-name">Ibis wing color</span><br><span class="hex-number">#F58F84</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#875F9A"><span class="color-name">Wisteria purple</span><br><span class="hex-number">#875F9A</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#5D3F6A"><span class="color-name">Bellflower color</span><br><span class="hex-number">#5D3F6A</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#89729E"><span class="color-name">Wisteria color</span><br><span class="hex-number">#89729E</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#763568"><span class="color-name">Iris color</span><br><span class="hex-number">#763568</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#8D608C"><span class="color-name">Tatarian aster color</span><br><span class="hex-number">#8D608C</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#A87CA0"><span class="color-name">Thin color</span><br><span class="hex-number">#A87CA0</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#5B3256"><span class="color-name">Violet color</span><br><span class="hex-number">#5B3256</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#BF55EC"><span class="color-name">MEDIUM PURPLE</span><br><span class="hex-number">#BF55EC</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color: #8E44AD"><span class="color-name">STUDIO</span><br><span class="hex-number">#8E44AD</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#9B59B6"><span class="color-name">WISTERIA</span><br><span class="hex-number">#9B59B6</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#BE90D4"><span class="color-name">LIGHT WISTERIA</span><br><span class="hex-number">#BE90D4</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#4D8FAC"><span class="color-name">Sky color</span><br><span class="hex-number">#4D8FAC</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#5D8CAE"><span class="color-name">Ultramarine color</span><br><span class="hex-number">#5D8CAE</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#22A7F0"><span class="color-name">PICTON BLUE</span><br><span class="hex-number">#22A7F0</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#19B5FE"><span class="color-name">DODGER BLUE</span><br><span class="hex-number">#19B5FE</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#59ABE3"><span class="color-name">PICTON BLUE</span><br><span class="hex-number">#59ABE3</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#48929B"><span class="color-name">Light blue color</span><br><span class="hex-number">#48929B</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#317589"><span class="color-name">Thousand herb</span><br><span class="hex-number">#317589</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#89C4F4"><span class="color-name">JORDY BLUE</span><br><span class="hex-number">#89C4F4</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color: #4B77BE"><span class="color-name">STEEL BLUE</span><br><span class="hex-number">#4B77BE</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#1F4788"><span class="color-name">Lapis lazuli color</span><br><span class="hex-number">#1F4788</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#003171"><span class="color-name">Navy blue color</span><br><span class="hex-number">#003171</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#044F67"><span class="color-name">Hanada</span><br><span class="hex-number">#044F67</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color: #264348"><span class="color-name">Indigo color</span><br><span class="hex-number">#264348</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#7A942E"><span class="color-name">Siskin sprout yellow</span><br><span class="hex-number">#7A942E</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#8DB255"><span class="color-name">young green onion</span><br><span class="hex-number">#8DB255</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#5B8930"><span class="color-name">Fresh onion</span><br><span class="hex-number">#5B8930</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#6B9362"><span class="color-name">Young bamboo color</span><br><span class="hex-number">#6B9362</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#407A52"><span class="color-name">Patina</span><br><span class="hex-number">#407A52</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#006442"><span class="color-name">Green bamboo</span><br><span class="hex-number">#006442</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#87D37C"><span class="color-name">GOSSIP</span><br><span class="hex-number">#87D37C</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#26A65B"><span class="color-name">EUCALYPTUS</span><br><span class="hex-number">#26A65B</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color: #26C281"><span class="color-name">JUNGLE GREEN</span><br><span class="hex-number">#26C281</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#049372"><span class="color-name">OBSERVATORY</span><br><span class="hex-number">#049372</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#2ABB9B"><span class="color-name">JUNGLE GREEN</span><br><span class="hex-number">#2ABB9B</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#16A085"><span class="color-name">MOUNTAIN MEADOW</span><br><span class="hex-number">#16A085</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#36D7B7"><span class="color-name">TURQUOISE</span><br><span class="hex-number">#36D7B7</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color: #03A678"><span class="color-name">FREE SPEECH AQUAMARINE</span><br><span class="hex-number">#03A678</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#4DAF7C"><span class="color-name">OCEAN GREEN</span><br><span class="hex-number">#4DAF7C</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#D9B611"><span class="color-name">Patrinia flowers</span><br><span class="hex-number">#D9B611</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F3C13A"><span class="color-name">Amur cork tree</span><br><span class="hex-number">#F3C13A</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F7CA18"><span class="color-name">RIPE LEMON</span><br><span class="hex-number">#F7CA18</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#E2B13C"><span class="color-name">Japanese triandra grass</span><br><span class="hex-number">#E2B13C</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#A17917"><span class="color-name">Rapeseed oil-colored</span><br><span class="hex-number">#A17917</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F5D76E"><span class="color-name">CREAM CAN</span><br><span class="hex-number">#F5D76E</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F4D03F"><span class="color-name">SAFFRON</span><br><span class="hex-number">#F4D03F</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#FFA400"><span class="color-name">Bright golden yellow</span><br><span class="hex-number">#FFA400</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#E08A1E"><span class="color-name">Sumac-dyed</span><br><span class="hex-number">#E08A1E</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#FFB61E"><span class="color-name">Gamboge</span><br><span class="hex-number">#FFB61E</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#FAA945"><span class="color-name">Corn-colored</span><br><span class="hex-number">#FAA945</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#FFA631"><span class="color-name">Egg-colored</span><br><span class="hex-number">#FFA631</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#FFB94E"><span class="color-name">Floral leaf-colored</span><br><span class="hex-number">#FFB94E</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#E29C45"><span class="color-name">Golden fallen leaves</span><br><span class="hex-number">#E29C45</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F9690E"><span class="color-name">ECSTASY</span><br><span class="hex-number">#F9690E</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color: #CA6924"><span class="color-name">Amber</span><br><span class="hex-number">#CA6924</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F5AB35"><span class="color-name">LIGHTNING YELLOW</span><br><span class="hex-number">#F5AB35</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#BFBFBF"><span class="color-name">SILVER</span><br><span class="hex-number">#BFBFBF</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#F2F1EF"><span class="color-name">CARARRA</span><br><span class="hex-number">#F2F1EF</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#BDC3C7"><span class="color-name">SILVER SAND</span><br><span class="hex-number">#BDC3C7</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#ECF0F1"><span class="color-name">PORCELAIN</span><br><span class="hex-number">#ECF0F1</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#D2D7D3"><span class="color-name">PUMICE</span><br><span class="hex-number">#D2D7D3</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#757D75"><span class="color-name">Harbor rat</span><br><span class="hex-number">#757D75</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#EEEEEE"><span class="color-name">GALLERY</span><br><span class="hex-number">#EEEEEE</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#ABB7B7"><span class="color-name">EDWARD</span><br><span class="hex-number">#ABB7B7</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color: #6C7A89"><span class="color-name">LYNCH</span><br><span class="hex-number">#6C7A89</span><br></div></div><div class="color-picker"><div class="color-item" style="background-color:#95A5A6"><span class="color-name">CASCADE</span><br><span class="hex-number">#95A5A6</span><br></div></div></div><div class="site-footer"><div class="container"><div class="download"><span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;<script type="text/javascript">(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
<p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
})();</script><a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0"></a></div><hr class="dashed"><div class="row"><div class="col-md-4"><h3>Get involved</h3><p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p></div><div class="col-md-4"><h3>Contribute</h3><p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p></div><div class="col-md-4"><h3>Found a bug?</h3><p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p></div></div><hr class="dashed"><div class="row"><div class="col-md-6"><h3>Talk to us</h3><ul><li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li><li><a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a> <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a> <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a> <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a></li></ul></div><div class="col-md-6"><link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"><div id="mc_embed_signup"><h3 style="margin-bottom: 15px">Newsletter</h3><form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><input style="margin-bottom: 10px" type="email" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required> <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span></form></div></div></div><hr class="dashed"><div class="copyright clearfix"><p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p><p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p></div></div></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
ga('send', 'pageview');</script></body></html>
\ No newline at end of file
......
This diff could not be displayed because it is too large.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootflat UI Kit Free PSD Download - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Bootstrap, Bootflat, Flat UI colors, colors">
<meta name="description" content="Bootflat UI Kit is PSD User Interface Pack including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link current" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Bootflat UI Kit (Version 2.0.4)</h3>
<h4>Bootflat UI Kit is PSD User Interface Pack including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.</h4>
<a class="btn btn-primary" href="https://github.com/Bootflat/Bootflat.UI.Kit.PSD/archive/master.zip">Download Bootflat UI KIT PSD</a>&nbsp;&nbsp;&nbsp;&nbsp;
<span class="github github-watch">
<iframe src="http://ghbtns.com/github-btn.html?user=bootflat&amp;repo=Bootflat.UI.Kit.PSD&amp;type=watch&amp;count=true" title="Star on GitHub" frameborder="0" scrolling="0" width="150" height="25"></iframe>
</span>
<span class="github github-fork">
<iframe src="http://ghbtns.com/github-btn.html?user=bootflat&amp;repo=Bootflat.UI.Kit.PSD&amp;type=fork&amp;count=true" title="Fork on GitHub" frameborder="0" scrolling="0" width="150" height="25"></iframe>
</span>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container">
Bootflat UI is a set of beautiful components featuring the flat design trend.
</div>
</div>
</div>
</div>
<div class="psd-download">
<div class="container">
<div class="row">
<div class="col-md-10">
<h2>Overview</h2>
<p class="infos">We love the new graphic design trend, and Bootflat UI Kit is a kind of style. Simple, rich and colorful and graphic design of components of the UI almost any project is perfect, from the complex Web applications and small start-up project website, and follow the Bootflat Frame update.</p>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-4"><img src="img/fast.png" /></div>
<div class="col-md-8">
<h4>Save your time</h4>
<p>Don't waste your time on the composition of the same. Use your time to develop new ideas and projects.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-4"><img src="img/design.png" /></div>
<div class="col-md-8">
<h4>Elaborate design</h4>
<p>All the components are independent, easy to be integrated into the design and layout of any project.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-4"><img src="img/together.png" /></div>
<div class="col-md-8">
<h4>Components fit together</h4>
<p>All components to use the same style. You can easily apply them in the design projects of various.</p>
</div>
</div>
</div>
<div class="col-md-6 clearfix">
<div class="row">
<div class="col-md-4"><img src="img/prototyping.png" /></div>
<div class="col-md-8">
<h4>Fast prototyping</h4>
<p>You will be able to quickly develop high-quality prototypes in full-color. Your clients will appreciate prototypes with beautiful components.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="previews">
<div class="container">
<h2>Preview</h2>
<p>You will find Buttons, Text edits, Menus, Sliders and more, Beautiful Complex Blocks and many other useful web elements. </p>
</div>
<img src="img/bootflat-ui-kit.jpg" alt="Bootflat UI Kit" />
<div class="container">
<h2>Thanks for watching!</h2>
<p>I hope you will enjoy this new product, and if you use it, do not forget to share your projects with us. I love to see all the great things you are working on!</p>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You can <b>free</b> download it.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/Bootflat/Bootflat.UI.Kit.PSD/archive/master.zip">Download Bootflat UI Kit PSD</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bootflat UI Kit Free PSD Download - Bootflat</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe"><meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Bootstrap, Bootflat, Flat UI colors, colors"><meta name="description" content="Bootflat UI Kit is PSD User Interface Pack including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps."><link rel="shortcut icon" href="favicon_16.ico"><link rel="bookmark" href="favicon_16.ico"><link rel="stylesheet" href="css/site.min.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css"><!--[if lt IE 9]><script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script><![endif]--><script type="text/javascript" src="js/site.min.js"></script></head><body><div class="docs-header"><nav class="navbar navbar-default navbar-custom" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-right"><li><a class="nav-link" href="getting-started.html">Getting Started</a></li><li><a class="nav-link" href="documentation.html">Documentation</a></li><li><a class="nav-link current" href="free-psd.html">Free PSD</a></li><li><a class="nav-link" href="color-picker.html">Color Picker</a></li></ul></div></div></nav><div class="topic"><div class="container"><div class="col-md-8"><h3>Bootflat UI Kit (Version 2.0.4)</h3><h4>Bootflat UI Kit is PSD User Interface Pack including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.</h4><a class="btn btn-primary" href="https://github.com/Bootflat/Bootflat.UI.Kit.PSD/archive/master.zip">Download Bootflat UI KIT PSD</a>&nbsp;&nbsp;&nbsp;&nbsp; <span class="github github-watch"><iframe src="http://ghbtns.com/github-btn.html?user=bootflat&amp;repo=Bootflat.UI.Kit.PSD&amp;type=watch&amp;count=true" title="Star on GitHub" frameborder="0" scrolling="0" width="150" height="25"></iframe></span> <span class="github github-fork"><iframe src="http://ghbtns.com/github-btn.html?user=bootflat&amp;repo=Bootflat.UI.Kit.PSD&amp;type=fork&amp;count=true" title="Fork on GitHub" frameborder="0" scrolling="0" width="150" height="25"></iframe></span></div><div class="col-md-4"><div class="advertisement"><script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script></div></div></div><div class="topic__infos"><div class="container">Bootflat UI is a set of beautiful components featuring the flat design trend.</div></div></div></div><div class="psd-download"><div class="container"><div class="row"><div class="col-md-10"><h2>Overview</h2><p class="infos">We love the new graphic design trend, and Bootflat UI Kit is a kind of style. Simple, rich and colorful and graphic design of components of the UI almost any project is perfect, from the complex Web applications and small start-up project website, and follow the Bootflat Frame update.</p><div class="row"><div class="col-md-6"><div class="row"><div class="col-md-4"><img src="img/fast.png"></div><div class="col-md-8"><h4>Save your time</h4><p>Don't waste your time on the composition of the same. Use your time to develop new ideas and projects.</p></div></div></div><div class="col-md-6"><div class="row"><div class="col-md-4"><img src="img/design.png"></div><div class="col-md-8"><h4>Elaborate design</h4><p>All the components are independent, easy to be integrated into the design and layout of any project.</p></div></div></div></div><div class="row"><div class="col-md-6"><div class="row"><div class="col-md-4"><img src="img/together.png"></div><div class="col-md-8"><h4>Components fit together</h4><p>All components to use the same style. You can easily apply them in the design projects of various.</p></div></div></div><div class="col-md-6 clearfix"><div class="row"><div class="col-md-4"><img src="img/prototyping.png"></div><div class="col-md-8"><h4>Fast prototyping</h4><p>You will be able to quickly develop high-quality prototypes in full-color. Your clients will appreciate prototypes with beautiful components.</p></div></div></div></div></div></div></div></div><div class="previews"><div class="container"><h2>Preview</h2><p>You will find Buttons, Text edits, Menus, Sliders and more, Beautiful Complex Blocks and many other useful web elements.</p></div><img src="img/bootflat-ui-kit.jpg" alt="Bootflat UI Kit"><div class="container"><h2>Thanks for watching!</h2><p>I hope you will enjoy this new product, and if you use it, do not forget to share your projects with us. I love to see all the great things you are working on!</p></div></div><div class="site-footer"><div class="container"><div class="download"><span class="download__infos">You can <b>free</b> download it.</span>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn btn-primary" href="https://github.com/Bootflat/Bootflat.UI.Kit.PSD/archive/master.zip">Download Bootflat UI Kit PSD</a>&nbsp;&nbsp;&nbsp;&nbsp;<script type="text/javascript">(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<p>Bootflat is hosted on <a href="https://github.com/bootflat/Bootflat.UI.Kit.PSD" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/Bootflat/Bootflat.UI.Kit.PSD" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<p>Open a <a href="https://github.com/bootflat/Bootflat.UI.Kit.PSD/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
<p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
})();</script><a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0"></a></div><hr class="dashed"><div class="row"><div class="col-md-4"><h3>Get involved</h3><p>Bootflat is hosted on <a href="https://github.com/bootflat/Bootflat.UI.Kit.PSD" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p></div><div class="col-md-4"><h3>Contribute</h3><p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/Bootflat/Bootflat.UI.Kit.PSD" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p></div><div class="col-md-4"><h3>Found a bug?</h3><p>Open a <a href="https://github.com/bootflat/Bootflat.UI.Kit.PSD/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p></div></div><hr class="dashed"><div class="row"><div class="col-md-6"><h3>Talk to us</h3><ul><li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li><li><a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a> <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a> <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a> <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a></li></ul></div><div class="col-md-6"><link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"><div id="mc_embed_signup"><h3 style="margin-bottom: 15px">Newsletter</h3><form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><input style="margin-bottom: 10px" type="email" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required> <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span></form></div></div></div><hr class="dashed"><div class="copyright clearfix"><p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p><p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p></div></div></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
ga('send', 'pageview');</script></body></html>
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting Started - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Bootstrap, Bootflat, Flat UI colors, colors">
<meta name="description" content="An overview of Bootflat, why we built it, how to use it, and what you should know along the way.">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link current" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Getting Started with Bootflat Framework</h3>
<h4>An overview of Bootflat, why we built it, how to use it, and what you should know along the way.</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container">
Getting started With Bootflat is easy. Whether you are a master of Sass, building a new app, we've got you covered.
</div>
</div>
</div>
</div>
<!--documents-->
<div class="container documents">
<div class="row">
<div class="col-md-12">
<!-- Overview
================================================== -->
<div class="docs-article docs--start" id="overview">
<h3>Overview</h3>
<p>Why is this important? Bootstrap is a reliable and proven tool for developers, validated in the field. It reminds us of Superman, a friend you can trust completely with a serious project.</p>
<dl>
<dt>OOCSS Approach</dt>
<dd>Object-based coding method encourages code reuse and creates faster and more efficient style sheets, which are easier to add to and maintain.</dd>
<dt>Bootstrap 3.3.0 Support</dt>
<dd>Now Bootflat is supporting Bootstrap 3.3.0 as well.</dd>
<dt>Configurable Color Scheme</dt>
<dd>You can change any or all of the colors if you wish. Bootflat is easy to configure and match to your brand's color scheme.</dd>
<dt>Easy Installation</dt>
<dd>Upload all Bootflat files and paste one line of code at the bottom of your <code>head</code> tag. That’s it!</dd>
<dt>Bootflat UI Kit Free Download</dt>
<dd><a href="free-psd.html">Bootflat UI Kit</a> is PSD User Interface Pack including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.</dd>
<dt>Bootflat Flat UI Color Picker</dt>
<dd><a href="color-picker.html">Bootflat Flat UI Color Picker</a> is a project digging the Flat Color Picker which gives you the perfect colors for flat designs.</dd>
</dl>
</div>
<!--
================================================== -->
<div class="docs-article docs--start" id="download">
<h3>Download</h3>
<p>Download the latest official release of Bootflat and get started!</p>
<ul class="item__infos">
<li>Version 2.0.4</li>
<li>Released July 09 2014</li>
</ul>
<p><a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat Framework (v2.0.4)</a></p>
</div>
<!--
================================================== -->
<div class="docs-article docs--start" id="Install">
<h3>Install</h3>
<ul class="item__infos">
<li>Clone the repo: <code>git clone https://github.com/bootflat/bootflat.github.io.git</code></li>
<li>Install with <a href="https://www.npmjs.org/" target="_blank" rel="nofollow">npm</a> <code>npm install bootflat</code></li>
<li>Install with <a href="http://bower.io/" target="_blank" rel="nofollow">bower</a> <code>bower install Bootflat</code></li>
</ul>
</div>
<!-- What's included
================================================== -->
<div class="docs-article docs--start" id="included">
<h3>What's included</h3>
<p>Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.</p>
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootflat. You'll see something like this:</p>
<pre><code class="bash">bootflat/
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Getting Started - Bootflat</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe"><meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Bootstrap, Bootflat, Flat UI colors, colors"><meta name="description" content="An overview of Bootflat, why we built it, how to use it, and what you should know along the way."><link rel="shortcut icon" href="favicon_16.ico"><link rel="bookmark" href="favicon_16.ico"><link rel="stylesheet" href="css/site.min.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css"><!--[if lt IE 9]><script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script><![endif]--><script type="text/javascript" src="js/site.min.js"></script></head><body><div class="docs-header"><nav class="navbar navbar-default navbar-custom" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-right"><li><a class="nav-link current" href="getting-started.html">Getting Started</a></li><li><a class="nav-link" href="documentation.html">Documentation</a></li><li><a class="nav-link" href="free-psd.html">Free PSD</a></li><li><a class="nav-link" href="color-picker.html">Color Picker</a></li></ul></div></div></nav><div class="topic"><div class="container"><div class="col-md-8"><h3>Getting Started with Bootflat Framework</h3><h4>An overview of Bootflat, why we built it, how to use it, and what you should know along the way.</h4></div><div class="col-md-4"><div class="advertisement"><script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script></div></div></div><div class="topic__infos"><div class="container">Getting started With Bootflat is easy. Whether you are a master of Sass, building a new app, we've got you covered.</div></div></div></div><div class="container documents"><div class="row"><div class="col-md-12"><div class="docs-article docs--start" id="overview"><h3>Overview</h3><p>Why is this important? Bootstrap is a reliable and proven tool for developers, validated in the field. It reminds us of Superman, a friend you can trust completely with a serious project.</p><dl><dt>OOCSS Approach</dt><dd>Object-based coding method encourages code reuse and creates faster and more efficient style sheets, which are easier to add to and maintain.</dd><dt>Bootstrap 3.3.0 Support</dt><dd>Now Bootflat is supporting Bootstrap 3.3.0 as well.</dd><dt>Configurable Color Scheme</dt><dd>You can change any or all of the colors if you wish. Bootflat is easy to configure and match to your brand's color scheme.</dd><dt>Easy Installation</dt><dd>Upload all Bootflat files and paste one line of code at the bottom of your <code>head</code> tag. That’s it!</dd><dt>Bootflat UI Kit Free Download</dt><dd><a href="free-psd.html">Bootflat UI Kit</a> is PSD User Interface Pack including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.</dd><dt>Bootflat Flat UI Color Picker</dt><dd><a href="color-picker.html">Bootflat Flat UI Color Picker</a> is a project digging the Flat Color Picker which gives you the perfect colors for flat designs.</dd></dl></div><div class="docs-article docs--start" id="download"><h3>Download</h3><p>Download the latest official release of Bootflat and get started!</p><ul class="item__infos"><li>Version 2.0.4</li><li>Released July 09 2014</li></ul><p><a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat Framework (v2.0.4)</a></p></div><div class="docs-article docs--start" id="Install"><h3>Install</h3><ul class="item__infos"><li>Clone the repo: <code>git clone https://github.com/bootflat/bootflat.github.io.git</code></li><li>Install with <a href="https://www.npmjs.org/" target="_blank" rel="nofollow">npm</a> <code>npm install bootflat</code></li><li>Install with <a href="http://bower.io/" target="_blank" rel="nofollow">bower</a> <code>bower install Bootflat</code></li></ul></div><div class="docs-article docs--start" id="included"><h3>What's included</h3><p>Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.</p><p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootflat. You'll see something like this:</p><pre><code class="bash">bootflat/
├── css/
│ ├── bootflat.css
│ ├── bootflat.css.map
......@@ -170,120 +53,15 @@
└── check_flat/
├── default.png
└── default.psd
</code></pre>
</div>
<!-- CSS/SASS
================================================== -->
<div class="docs-article docs--start" id="css-sass">
<h3>CSS/SASS</h3>
<p>The CSS can stand on its own, but it is also built to be enhanced by the developer. For simplicity you can always just add in your own CSS and override default properties. And for even more power and flexibility, the core is written with <a href="http://sass-lang.com/" target="_blank" rel="external nofollow">Sass 3.3.9</a> and includes easily customized variables and mixins. We feel we’ve left the CSS in a state which can be easily extended to get your own look and feel.</p>
</div>
<!-- Browser Support
================================================== -->
<div class="docs-article docs--start" id="browser-support">
<h3>Browser Support</h3>
<p>As such, our browser support tends to be whatever Web View API is available to native on a given platform. For Bootflat v2.0.4, that means UIWebView for E8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.</p>
</div>
<!-- Free PSD
================================================== -->
<div class="docs-article docs--start" id="download">
<h3>Bootflat UI Kit</h3>
<p>For the designers, we offer a free PSD file for you, it including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.</p>
<p><a class="btn btn-primary" href="free-psd.html">Download Bootflat UI Kit (v2.0.0)</a></p>
</div>
<!-- Color Picker
================================================== -->
<div class="docs-article docs--start" id="color-picker">
<h3>Bootflat Flat UI Color Picker</h3>
<p><a href="color-picker.html">Bootflat Flat UI Color Picker</a> is a project digging the Flat Color Picker which gives you the perfect colors for flat designs.</p>
</div>
<!-- Licensing
================================================== -->
<div class="docs-article docs--start" id="licensing">
<h3>Licensing</h3>
<p>Bootflat is an open source framework released under a permisive <a href="http://opensource.org/licenses/MIT">MIT</a> license. This means you can use Bootflat in your own personal or commercial projects for free. MIT is the same license used by such popular projects as jQuery and Ruby on Rails.</p>
</div>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
</code></pre></div><div class="docs-article docs--start" id="css-sass"><h3>CSS/SASS</h3><p>The CSS can stand on its own, but it is also built to be enhanced by the developer. For simplicity you can always just add in your own CSS and override default properties. And for even more power and flexibility, the core is written with <a href="http://sass-lang.com/" target="_blank" rel="external nofollow">Sass 3.4.9</a> and includes easily customized variables and mixins. We feel we’ve left the CSS in a state which can be easily extended to get your own look and feel.</p></div><div class="docs-article docs--start" id="browser-support"><h3>Browser Support</h3><p>As such, our browser support tends to be whatever Web View API is available to native on a given platform. For Bootflat v2.0.4, that means UIWebView for E8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.</p></div><div class="docs-article docs--start" id="download"><h3>Bootflat UI Kit</h3><p>For the designers, we offer a free PSD file for you, it including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.</p><p><a class="btn btn-primary" href="free-psd.html">Download Bootflat UI Kit (v2.0.0)</a></p></div><div class="docs-article docs--start" id="color-picker"><h3>Bootflat Flat UI Color Picker</h3><p><a href="color-picker.html">Bootflat Flat UI Color Picker</a> is a project digging the Flat Color Picker which gives you the perfect colors for flat designs.</p></div><div class="docs-article docs--start" id="licensing"><h3>Licensing</h3><p>Bootflat is an open source framework released under a permisive <a href="http://opensource.org/licenses/MIT">MIT</a> license. This means you can use Bootflat in your own personal or commercial projects for free. MIT is the same license used by such popular projects as jQuery and Ruby on Rails.</p></div></div></div></div><div class="site-footer"><div class="container"><div class="download"><span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;<script type="text/javascript">(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
<p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
})();</script><a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0"></a></div><hr class="dashed"><div class="row"><div class="col-md-4"><h3>Get involved</h3><p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p></div><div class="col-md-4"><h3>Contribute</h3><p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p></div><div class="col-md-4"><h3>Found a bug?</h3><p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p></div></div><hr class="dashed"><div class="row"><div class="col-md-6"><h3>Talk to us</h3><ul><li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li><li><a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a> <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a> <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a> <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a></li></ul></div><div class="col-md-6"><link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"><div id="mc_embed_signup"><h3 style="margin-bottom: 15px">Newsletter</h3><form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><input style="margin-bottom: 10px" type="email" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required> <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span></form></div></div></div><hr class="dashed"><div class="copyright clearfix"><p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p><p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p></div></div></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
ga('send', 'pageview');</script></body></html>
\ No newline at end of file
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Bootstrap, Bootflat, Flat UI colors, colors">
<meta name="description" content="BOOTFLAT is an open source Flat UI KIT based on Bootstrap CSS framework.
And, for the designers, we offer a free PSD Download. It provides a faster, easier and less repetitive way for web developers or designers to create elegant web apps.">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body class="home">
<div class="docs-header header--noBackground">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--index-->
<div class="index">
<h1>
<img src="img/logo-index.png" alt="Bootflat: Advanced HTML5 Hybrid Mobile App Framework">
</h1>
<h2>BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework. <br/>And, for the designers, we offer a <a href="free-psd.html">free PSD Download</a>. <br />It provides a faster, easier and less repetitive way for web developers or designers to create elegant web apps. </h2>
<h3>Compatible Browsers: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.</h3>
<p class="download-link">
<a class="btn btn-primary" href="https://github.com/Bootflat/Bootflat.github.io/archive/master.zip">Download (Version 2.0.4)</a>
</p>
<p class="version-text">MIT Licensed - Version 2.0.4</p>
<p class="adpacks">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</p>
<p class="learn-more Bootflat">
<a href="#learn-more">Learn more <i class="icon" data-icon="&#xe035"></i></a>
</p>
</div>
<!--social-->
<ul class="social">
<li class="github-watch">
<iframe src="http://ghbtns.com/github-btn.html?user=bootflat&amp;repo=bootflat.github.io&amp;type=watch&amp;count=true" title="Star on GitHub" frameborder="0" scrolling="0" width="150" height="25"></iframe>
</li>
<li class="github-fork">
<iframe src="http://ghbtns.com/github-btn.html?user=bootflat&amp;repo=bootflat.github.io&amp;type=fork&amp;count=true" title="Fork on GitHub" frameborder="0" scrolling="0" width="150" height="25"></iframe>
</li>
<li class="twitter-follow">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1375828408.html#_=1376720237528&amp;id=twitter-widget-1&amp;lang=en&amp;screen_name=flathemes&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 254px; height: 20px;"></iframe>
</li>
<li class="twitter-share">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.1375828408.html#_=1376720237525&amp;count=horizontal&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fgetbootstrap.com%2F&amp;related=mdo%3ACreator%20of%20Twitter%20Bootstrap&amp;size=m&amp;text=Bootflat&amp;url=http%3A%2F%2Fflathemes.com%2F&amp;via=flathemes" class="twitter-share-button twitter-count-horizontal" title="Twitter Tweet Button" data-twttr-rendered="true" style="width: 116px; height: 20px;"></iframe>
</li>
</ul>
<!--desc-->
<div id="learn-more" class="desc container">
<div class="desc__introduces">
<h3>Designed for everyone, everywhere.</h3>
<p>Bootflat is built on the foundations of Bootstrap, visioned in a stunning flat design. Bootstrap itself is a trusted, reliable and proven tool for developers. Built with <a href="http://sass-lang.com/" target="_blank" rel="external nofollow">Sass 3.3.9</a>.</p>
</div>
<div class="desc__features">
<div class="row">
<div class="col-md-6">
<div class="features__photo"><img src="img/feature-bootstrap.png" /></div>
<h4>Bootstrap 3.3.0</h4>
<p>Bootflat is built on Bootstrap 3.3.0: the sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>
</div>
<div class="col-md-6">
<div class="features__photo"><img src="img/feature-css.png" /></div>
<h4>HTML5 &amp; CSS3</h4>
<p>Bootflat's components are built with HTML5 and CSS3. The pages use `header`, `nav` and `section` to build the layout. Bootflat also comes with several splendid color schemes built-in, and allows for easy customization.</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="features__photo"><img src="img/feature-lightweight.png" /></div>
<h4>Lightweight</h4>
<p>Bootflat uses lightweight high-function plugins for maximum performance, keeping CSS and JS file sizes down.</p>
</div>
<div class="col-md-6">
<div class="features__photo"><img src="img/feature-mobile.png" /></div>
<h4>Mobile first</h4>
<p>Bootflat is fully responsive, built for mobile-first in mind. It provides off screen navigation, and almost all the widgets are compatible with all screen sizes.</p>
</div>
</div>
</div>
<div class="desc__introduces">
<h3>Bootflat UI Kit</h3>
<p>Bootflat UI Kit is PSD User Interface Pack including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps. <a href="free-psd.html">Go to download it</a>.</p>
<div class="photo--responsive"><img src="img/bootflat-ui-kit.jpg" /></div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bootflat</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe"><meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Bootstrap, Bootflat, Flat UI colors, colors"><meta name="description" content="BOOTFLAT is an open source Flat UI KIT based on Bootstrap CSS framework.
And, for the designers, we offer a free PSD Download. It provides a faster, easier and less repetitive way for web developers or designers to create elegant web apps."><link rel="shortcut icon" href="favicon_16.ico"><link rel="bookmark" href="favicon_16.ico"><link rel="stylesheet" href="css/site.min.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css"><!--[if lt IE 9]><script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script><![endif]--><script type="text/javascript" src="js/site.min.js"></script></head><body class="home"><div class="docs-header header--noBackground"><nav class="navbar navbar-default navbar-custom" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-right"><li><a class="nav-link" href="getting-started.html">Getting Started</a></li><li><a class="nav-link" href="documentation.html">Documentation</a></li><li><a class="nav-link" href="free-psd.html">Free PSD</a></li><li><a class="nav-link" href="color-picker.html">Color Picker</a></li></ul></div></div></nav><div class="index"><h1><img src="img/logo-index.png" alt="Bootflat: Advanced HTML5 Hybrid Mobile App Framework"></h1><h2>BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework.<br>And, for the designers, we offer a <a href="free-psd.html">free PSD Download</a>.<br>It provides a faster, easier and less repetitive way for web developers or designers to create elegant web apps.</h2><h3>Compatible Browsers: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.</h3><p class="download-link"><a class="btn btn-primary" href="https://github.com/Bootflat/Bootflat.github.io/archive/master.zip">Download (Version 2.0.4)</a></p><p class="version-text">MIT Licensed - Version 2.0.4</p><p class="adpacks"><script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script></p><p class="learn-more Bootflat"><a href="#learn-more">Learn more <i class="icon" data-icon="&#xe035"></i></a></p></div><ul class="social"><li class="github-watch"><iframe src="http://ghbtns.com/github-btn.html?user=bootflat&amp;repo=bootflat.github.io&amp;type=watch&amp;count=true" title="Star on GitHub" frameborder="0" scrolling="0" width="150" height="25"></iframe></li><li class="github-fork"><iframe src="http://ghbtns.com/github-btn.html?user=bootflat&amp;repo=bootflat.github.io&amp;type=fork&amp;count=true" title="Fork on GitHub" frameborder="0" scrolling="0" width="150" height="25"></iframe></li><li class="twitter-follow"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1375828408.html#_=1376720237528&amp;id=twitter-widget-1&amp;lang=en&amp;screen_name=flathemes&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 254px; height: 20px"></iframe></li><li class="twitter-share"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.1375828408.html#_=1376720237525&amp;count=horizontal&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fgetbootstrap.com%2F&amp;related=mdo%3ACreator%20of%20Twitter%20Bootstrap&amp;size=m&amp;text=Bootflat&amp;url=http%3A%2F%2Fflathemes.com%2F&amp;via=flathemes" class="twitter-share-button twitter-count-horizontal" title="Twitter Tweet Button" data-twttr-rendered="true" style="width: 116px; height: 20px"></iframe></li></ul><div id="learn-more" class="desc container"><div class="desc__introduces"><h3>Designed for everyone, everywhere.</h3><p>Bootflat is built on the foundations of Bootstrap, visioned in a stunning flat design. Bootstrap itself is a trusted, reliable and proven tool for developers. Built with <a href="http://sass-lang.com/" target="_blank" rel="external nofollow">Sass 3.4.9</a>.</p></div><div class="desc__features"><div class="row"><div class="col-md-6"><div class="features__photo"><img src="img/feature-bootstrap.png"></div><h4>Bootstrap 3.3.0</h4><p>Bootflat is built on Bootstrap 3.3.0: the sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p></div><div class="col-md-6"><div class="features__photo"><img src="img/feature-css.png"></div><h4>HTML5 &amp; CSS3</h4><p>Bootflat's components are built with HTML5 and CSS3. The pages use `header`, `nav` and `section` to build the layout. Bootflat also comes with several splendid color schemes built-in, and allows for easy customization.</p></div></div><div class="row"><div class="col-md-6"><div class="features__photo"><img src="img/feature-lightweight.png"></div><h4>Lightweight</h4><p>Bootflat uses lightweight high-function plugins for maximum performance, keeping CSS and JS file sizes down.</p></div><div class="col-md-6"><div class="features__photo"><img src="img/feature-mobile.png"></div><h4>Mobile first</h4><p>Bootflat is fully responsive, built for mobile-first in mind. It provides off screen navigation, and almost all the widgets are compatible with all screen sizes.</p></div></div></div><div class="desc__introduces"><h3>Bootflat UI Kit</h3><p>Bootflat UI Kit is PSD User Interface Pack including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps. <a href="free-psd.html">Go to download it</a>.</p><div class="photo--responsive"><img src="img/bootflat-ui-kit.jpg"></div></div></div><div class="site-footer"><div class="container"><div class="download"><span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp; <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;<script type="text/javascript">(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
<p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
</div>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
})();</script><a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0"></a></div><hr class="dashed"><div class="row"><div class="col-md-4"><h3>Get involved</h3><p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p></div><div class="col-md-4"><h3>Contribute</h3><p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p></div><div class="col-md-4"><h3>Found a bug?</h3><p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p></div></div><hr class="dashed"><div class="row"><div class="col-md-6"><h3>Talk to us</h3><ul><li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li><li><a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a> <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a> <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a> <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a></li></ul></div><div class="col-md-6"><link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"><div id="mc_embed_signup"><h3 style="margin-bottom: 15px">Newsletter</h3><form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><input style="margin-bottom: 10px" type="email" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required> <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span></form></div></div></div><hr class="dashed"><div class="copyright clearfix"><p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p><p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p></div></div></div></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
ga('send', 'pageview');</script></body></html>
\ No newline at end of file
......
......@@ -3,38 +3,41 @@
"private": false,
"version": "2.0.4",
"description": "BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.",
"author":"Flathemes <info@flathemes.com>",
"author": "Flathemes <info@flathemes.com>",
"homepage": "http://bootflat.github.com/",
"keywords": [
"mobile",
"html5",
"css3",
"scss",
"bootflat",
"bootstrap",
"flat",
"flat ui",
"ui"
"mobile",
"html5",
"css3",
"scss",
"bootflat",
"bootstrap",
"flat",
"flat ui",
"ui"
],
"bugs": {
"url": "https://github.com/bootflat/bootflat.github.io/issues"
},
"license": "MIT",
"repository" : {
"type" : "git",
"url" : "https://github.com/bootflat/bootflat.github.io.git"
},
"repository": {
"type": "git",
"url": "https://github.com/bootflat/bootflat.github.io.git"
},
"devDependencies": {
"grunt": "~0.4.4",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-csslint": "~0.2.0",
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-csslint": "^0.3.1",
"grunt-contrib-cssmin": "~0.9.0",
"grunt-contrib-uglify": "~0.4.0",
"grunt-contrib-htmlmin": "^0.3.0",
"grunt-contrib-imagemin": "^0.9.2",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-sass": "~0.7.3",
"grunt-csscomb": "~2.0.1",
"grunt-html-validation": "~0.1.15",
"grunt-sed": "~0.1.1",
"load-grunt-tasks": "~0.4.0",
"time-grunt": "~0.3.1"
"grunt-contrib-uglify": "~0.4.0",
"grunt-csscomb": "^3.0.0",
"grunt-html-validation": "^0.1.18",
"grunt-sed": "^0.1.1",
"load-grunt-tasks": "^1.0.0",
"time-grunt": "^1.0.0"
}
}
......