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) { ...@@ -114,7 +114,122 @@ module.exports = function(grunt) {
114 src: '*.html' 114 src: '*.html'
115 } 115 }
116 }, 116 },
117 sed: { 117 htmlmin: {
118 dist: {
119 options: {
120 removeComments: true,
121 collapseWhitespace: true,
122 removeEmptyAttributes: true,
123 removeCommentsFromCDATA: true,
124 removeRedundantAttributes: true,
125 collapseBooleanAttributes: true
126 },
127 files: {
128 // Destination : Source
129 './htmlmin/index.html': './index.html',
130 './htmlmin/getting-started.html': './getting-started.html',
131 './htmlmin/free-psd.html': './free-psd.html',
132 './htmlmin/documentation.html': './documentation.html',
133 './htmlmin/color-picker.html': './color-picker.html',
134 './htmlmin/color-picker-blue.html': './color-picker-blue.html',
135 './htmlmin/color-picker-gray.html': './color-picker-gray.html',
136 './htmlmin/color-picker-green.html': './color-picker-green.html',
137 './htmlmin/color-picker-pink.html': './color-picker-pink.html',
138 './htmlmin/color-picker-purple.html': './color-picker-purple.html',
139 './htmlmin/color-picker-red.html': './color-picker-red.html',
140 './htmlmin/color-picker-yellow.html': './color-picker-yellow.html'
141 }
142 }
143 },
144 jshint: {
145 /*
146 Note:
147 In case there is a /release/ directory found, we don't want to lint that
148 so we use the ! (bang) operator to ignore the specified directory
149 */
150 files: ['Gruntfile.js', 'js/application.js'],
151 options: {
152 curly: true,
153 eqeqeq: true,
154 immed: true,
155 latedef: true,
156 newcap: true,
157 noarg: true,
158 sub: true,
159 undef: true,
160 boss: true,
161 eqnull: true,
162 browser: true,
163
164 globals: {
165 // AMD
166 module: true,
167 require: true,
168 requirejs: true,
169 define: true,
170
171 // Environments
172 console: true,
173
174 // General Purpose Libraries
175 $: true,
176 jQuery: true,
177
178 // Testing
179 sinon: true,
180 describe: true,
181 it: true,
182 expect: true,
183 beforeEach: true,
184 afterEach: true
185 }
186 }
187 },
188 imagemin: {
189 png: {
190 options: {
191 optimizationLevel: 7
192 },
193 files: [
194 {
195 expand: true,
196 cwd: './img/',
197 src: ['**/*.png'],
198 dest: './img/compressed/',
199 ext: '.png'
200 }
201 ]
202 },
203 gif: {
204 options: {
205 optimizationLevel: 3
206 },
207 files: [
208 {
209 expand: true,
210 cwd: './img/',
211 src: ['**/*.gif'],
212 dest: './img/compressed/',
213 ext: '.gif'
214 }
215 ]
216 },
217 jpg: {
218 options: {
219 progressive: true
220 },
221 files: [
222 {
223 expand: true,
224 cwd: './img/',
225 src: ['**/*.jpg'],
226 dest: './img/compressed/',
227 ext: '.jpg'
228 }
229 ]
230 }
231 },
232 sed: {
118 versionNumber: { 233 versionNumber: {
119 pattern: (function () { 234 pattern: (function () {
120 var old = grunt.option('oldver'); 235 var old = grunt.option('oldver');
...@@ -131,11 +246,16 @@ module.exports = function(grunt) { ...@@ -131,11 +246,16 @@ module.exports = function(grunt) {
131 require('time-grunt')(grunt); 246 require('time-grunt')(grunt);
132 247
133 grunt.registerTask('task-css', ['sass', 'csscomb', 'cssmin']); 248 grunt.registerTask('task-css', ['sass', 'csscomb', 'cssmin']);
249 grunt.registerTask('task-html', ['htmlmin']);
134 grunt.registerTask('task-js', ['uglify']); 250 grunt.registerTask('task-js', ['uglify']);
135 grunt.registerTask('task', ['clean', 'task-css', 'task-js']); 251 grunt.registerTask('task-imagemin', ['imagemin']);
252 grunt.registerTask('task', ['clean', 'task-css', 'task-js','task-imagemin']);
136 grunt.registerTask('build', ['task']); 253 grunt.registerTask('build', ['task']);
137 grunt.registerTask('default', ['task']); 254 grunt.registerTask('default', ['task']);
138 grunt.registerTask('test', ['task', 'csslint', 'validation']); 255 grunt.registerTask('check-call', ['csslint', 'validation', 'jshint']);
256 grunt.registerTask('check-css', ['csslint']);
257 grunt.registerTask('check-html', ['validation']);
258 grunt.registerTask('check-js', ['jshint']);
139 259
140 // Version numbering task. 260 // Version numbering task.
141 // grunt change-version-number --oldver=A.B.C --newver=X.Y.Z 261 // grunt change-version-number --oldver=A.B.C --newver=X.Y.Z
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
13 13
14 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. 14 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.
15 15
16 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`. 16 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`.
17 17
18 Bootflat is compatible with the following browsers: `IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome`. 18 Bootflat is compatible with the following browsers: `IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome`.
19 19
......
1 <!DOCTYPE html> 1 <!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>
2 <html> 2 <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() {
3 <head>
4 <meta charset="utf-8">
5 <title>Color Picker - Blue - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <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">
11 <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">
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <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">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Color Picker</h3>
53 <h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container color-picker-nav">
63 <a href="color-picker.html">All</a>
64 <a href="color-picker-red.html">Red</a>
65 <a href="color-picker-pink.html">Pink</a>
66 <a href="color-picker-purple.html">Purple</a>
67 <a class="current" href="color-picker-blue.html">Blue</a>
68 <a href="color-picker-green.html">Green</a>
69 <a href="color-picker-yellow.html">Yellow</a>
70 <a href="color-picker-gray.html">Gray</a>
71 </div>
72 </div>
73 </div>
74 </div>
75 <!--documents-->
76 <div class="color-wrap clearfix">
77 <div class="color-picker">
78 <div class="color-item" style="background-color:#4D8FAC;">
79 <span class="color-name">Sky color</span><br>
80 <span class="hex-number">#4D8FAC</span><br>
81 </div>
82 </div>
83 <div class="color-picker">
84 <div class="color-item" style="background-color:#5D8CAE;">
85 <span class="color-name">Ultramarine color</span><br>
86 <span class="hex-number">#5D8CAE</span><br>
87 </div>
88 </div>
89 <div class="color-picker">
90 <div class="color-item" style="background-color:#22A7F0;">
91 <span class="color-name">PICTON BLUE</span><br>
92 <span class="hex-number">#22A7F0</span><br>
93 </div>
94 </div>
95 <div class="color-picker">
96 <div class="color-item" style="background-color:#19B5FE;">
97 <span class="color-name">DODGER BLUE</span><br>
98 <span class="hex-number">#19B5FE</span><br>
99 </div>
100 </div>
101 <div class="color-picker">
102 <div class="color-item" style="background-color:#59ABE3;">
103 <span class="color-name">PICTON BLUE</span><br>
104 <span class="hex-number">#59ABE3</span><br>
105 </div>
106 </div>
107 <div class="color-picker">
108 <div class="color-item" style="background-color:#48929B;">
109 <span class="color-name">Light blue color</span><br>
110 <span class="hex-number">#48929B</span><br>
111 </div>
112 </div>
113
114 <div class="color-picker">
115 <div class="color-item" style="background-color:#317589;">
116 <span class="color-name">Thousand herb</span><br>
117 <span class="hex-number">#317589</span><br>
118 </div>
119 </div>
120 <div class="color-picker">
121 <div class="color-item" style="background-color:#89C4F4;">
122 <span class="color-name">JORDY BLUE</span><br>
123 <span class="hex-number">#89C4F4</span><br>
124 </div>
125 </div>
126 <div class="color-picker">
127 <div class="color-item" style="background-color: #4B77BE;">
128 <span class="color-name">STEEL BLUE</span><br>
129 <span class="hex-number">#4B77BE</span><br>
130 </div>
131 </div>
132 <div class="color-picker">
133 <div class="color-item" style="background-color:#1F4788;">
134 <span class="color-name">Lapis lazuli color</span><br>
135 <span class="hex-number">#1F4788</span><br>
136 </div>
137 </div>
138 <div class="color-picker">
139 <div class="color-item" style="background-color:#003171;">
140 <span class="color-name">Navy blue color</span><br>
141 <span class="hex-number">#003171</span><br>
142 </div>
143 </div>
144
145 <div class="color-picker">
146 <div class="color-item" style="background-color:#044F67;">
147 <span class="color-name">Hanada</span><br>
148 <span class="hex-number">#044F67</span><br>
149 </div>
150 </div>
151 <div class="color-picker">
152 <div class="color-item" style="background-color: #264348;">
153 <span class="color-name">Indigo color</span><br>
154 <span class="hex-number">#264348</span><br>
155 </div>
156 </div>
157 </div>
158 <!--footer-->
159 <div class="site-footer">
160 <div class="container">
161 <div class="download">
162 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
163 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
164 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
165 <!-- SmartAddon BEGIN -->
166 <script type="text/javascript">
167 (function() {
168 var s=document.createElement('script');s.type='text/javascript';s.async = true; 3 var s=document.createElement('script');s.type='text/javascript';s.async = true;
169 s.src='http://s1'+'.smartaddon.com/share_addon.js'; 4 s.src='http://s1'+'.smartaddon.com/share_addon.js';
170 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j); 5 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
171 })(); 6 })();</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(){
172 </script>
173
174 <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>
175 <!-- SmartAddon END -->
176 </div>
177 <hr class="dashed" />
178 <div class="row">
179 <div class="col-md-4">
180 <h3>Get involved</h3>
181 <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>
182 </div>
183 <div class="col-md-4">
184 <h3>Contribute</h3>
185 <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>
186 </div>
187 <div class="col-md-4">
188 <h3>Found a bug?</h3>
189 <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>
190 </div>
191 </div>
192 <hr class="dashed" />
193 <div class="row">
194 <div class="col-md-6">
195 <h3>Talk to us</h3>
196 <ul>
197 <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>
198 <li>
199 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
200 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
201 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
202 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
203 </li>
204 </ul>
205 </div>
206 <div class="col-md-6">
207 <!-- Begin MailChimp Signup Form -->
208 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
209 <div id="mc_embed_signup">
210 <h3 style="margin-bottom: 15px;">Newsletter</h3>
211 <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>
212 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
213 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
214 </form>
215 </div>
216 <!--End mc_embed_signup-->
217 </div>
218 </div>
219 <hr class="dashed" />
220 <div class="copyright clearfix">
221 <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>
222 <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>
223 </div>
224 </div>
225 </div>
226 <script>
227 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
228 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 7 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
229 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 8 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
230 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 9 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
231 10
232 ga('create', 'UA-48721682-1', 'bootflat.github.io'); 11 ga('create', 'UA-48721682-1', 'bootflat.github.io');
233 ga('require', 'displayfeatures'); 12 ga('require', 'displayfeatures');
234 ga('send', 'pageview'); 13 ga('send', 'pageview');</script></body></html>
235
236 </script>
237 </body>
238 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 <!DOCTYPE html> 1 <!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>
2 <html> 2 <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() {
3 <head>
4 <meta charset="utf-8">
5 <title>Color Picker - Gray - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <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">
11 <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">
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <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">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Color Picker</h3>
53 <h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container color-picker-nav">
63 <a href="color-picker.html">All</a>
64 <a href="color-picker-red.html">Red</a>
65 <a href="color-picker-pink.html">Pink</a>
66 <a href="color-picker-purple.html">Purple</a>
67 <a href="color-picker-blue.html">Blue</a>
68 <a href="color-picker-green.html">Green</a>
69 <a href="color-picker-yellow.html">Yellow</a>
70 <a class="current" href="color-picker-gray.html">Gray</a>
71 </div>
72 </div>
73 </div>
74 </div>
75 <!--documents-->
76 <div class="color-wrap clearfix">
77 <div class="color-picker">
78 <div class="color-item" style="background-color:#BFBFBF;">
79 <span class="color-name">SILVER</span><br>
80 <span class="hex-number">#BFBFBF</span><br>
81 </div>
82 </div>
83 <div class="color-picker">
84 <div class="color-item" style="background-color:#F2F1EF;">
85 <span class="color-name">CARARRA</span><br>
86 <span class="hex-number">#F2F1EF</span><br>
87 </div>
88 </div>
89 <div class="color-picker">
90 <div class="color-item" style="background-color:#BDC3C7;">
91 <span class="color-name">SILVER SAND</span><br>
92 <span class="hex-number">#BDC3C7</span><br>
93 </div>
94 </div>
95 <div class="color-picker">
96 <div class="color-item" style="background-color:#ECF0F1;">
97 <span class="color-name">PORCELAIN</span><br>
98 <span class="hex-number">#ECF0F1</span><br>
99 </div>
100 </div>
101 <div class="color-picker">
102 <div class="color-item" style="background-color:#D2D7D3;">
103 <span class="color-name">PUMICE</span><br>
104 <span class="hex-number">#D2D7D3</span><br>
105 </div>
106 </div>
107 <div class="color-picker">
108 <div class="color-item" style="background-color:#757D75;">
109 <span class="color-name">Harbor rat</span><br>
110 <span class="hex-number">#757D75</span><br>
111 </div>
112 </div>
113
114 <div class="color-picker">
115 <div class="color-item" style="background-color:#EEEEEE;">
116 <span class="color-name">GALLERY</span><br>
117 <span class="hex-number">#EEEEEE</span><br>
118 </div>
119 </div>
120 <div class="color-picker">
121 <div class="color-item" style="background-color:#ABB7B7;">
122 <span class="color-name">EDWARD</span><br>
123 <span class="hex-number">#ABB7B7</span><br>
124 </div>
125 </div>
126 <div class="color-picker">
127 <div class="color-item" style="background-color: #6C7A89;">
128 <span class="color-name">LYNCH</span><br>
129 <span class="hex-number">#6C7A89</span><br>
130 </div>
131 </div>
132 <div class="color-picker">
133 <div class="color-item" style="background-color:#95A5A6;">
134 <span class="color-name">CASCADE</span><br>
135 <span class="hex-number">#95A5A6</span><br>
136 </div>
137 </div>
138
139 </div>
140 <!--footer-->
141 <div class="site-footer">
142 <div class="container">
143 <div class="download">
144 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
145 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
146 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
147 <!-- SmartAddon BEGIN -->
148 <script type="text/javascript">
149 (function() {
150 var s=document.createElement('script');s.type='text/javascript';s.async = true; 3 var s=document.createElement('script');s.type='text/javascript';s.async = true;
151 s.src='http://s1'+'.smartaddon.com/share_addon.js'; 4 s.src='http://s1'+'.smartaddon.com/share_addon.js';
152 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j); 5 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
153 })(); 6 })();</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(){
154 </script>
155
156 <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>
157 <!-- SmartAddon END -->
158 </div>
159 <hr class="dashed" />
160 <div class="row">
161 <div class="col-md-4">
162 <h3>Get involved</h3>
163 <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>
164 </div>
165 <div class="col-md-4">
166 <h3>Contribute</h3>
167 <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>
168 </div>
169 <div class="col-md-4">
170 <h3>Found a bug?</h3>
171 <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>
172 </div>
173 </div>
174 <hr class="dashed" />
175 <div class="row">
176 <div class="col-md-6">
177 <h3>Talk to us</h3>
178 <ul>
179 <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>
180 <li>
181 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
182 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
183 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
184 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
185 </li>
186 </ul>
187 </div>
188 <div class="col-md-6">
189 <!-- Begin MailChimp Signup Form -->
190 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
191 <div id="mc_embed_signup">
192 <h3 style="margin-bottom: 15px;">Newsletter</h3>
193 <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>
194 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
195 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
196 </form>
197 </div>
198 <!--End mc_embed_signup-->
199 </div>
200 </div>
201 <hr class="dashed" />
202 <div class="copyright clearfix">
203 <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>
204 <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>
205 </div>
206 </div>
207 </div>
208 <script>
209 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
210 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 7 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
211 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 8 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
212 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 9 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
213 10
214 ga('create', 'UA-48721682-1', 'bootflat.github.io'); 11 ga('create', 'UA-48721682-1', 'bootflat.github.io');
215 ga('require', 'displayfeatures'); 12 ga('require', 'displayfeatures');
216 ga('send', 'pageview'); 13 ga('send', 'pageview');</script></body></html>
217
218 </script>
219 </body>
220 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 <!DOCTYPE html> 1 <!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>
2 <html> 2 <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() {
3 <head>
4 <meta charset="utf-8">
5 <title>Color Picker - Green - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <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">
11 <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">
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <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">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Color Picker</h3>
53 <h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container color-picker-nav">
63 <a href="color-picker.html">All</a>
64 <a href="color-picker-red.html">Red</a>
65 <a href="color-picker-pink.html">Pink</a>
66 <a href="color-picker-purple.html">Purple</a>
67 <a href="color-picker-blue.html">Blue</a>
68 <a class="current" href="color-picker-green.html">Green</a>
69 <a href="color-picker-yellow.html">Yellow</a>
70 <a href="color-picker-gray.html">Gray</a>
71 </div>
72 </div>
73 </div>
74 </div>
75 <!--documents-->
76 <div class="color-wrap clearfix">
77 <div class="color-picker">
78 <div class="color-item" style="background-color:#7A942E;">
79 <span class="color-name">Siskin sprout yellow</span><br>
80 <span class="hex-number">#7A942E</span><br>
81 </div>
82 </div>
83 <div class="color-picker">
84 <div class="color-item" style="background-color:#8DB255;">
85 <span class="color-name">young green onion</span><br>
86 <span class="hex-number">#8DB255</span><br>
87 </div>
88 </div>
89 <div class="color-picker">
90 <div class="color-item" style="background-color:#5B8930;">
91 <span class="color-name">Fresh onion</span><br>
92 <span class="hex-number">#5B8930</span><br>
93 </div>
94 </div>
95 <div class="color-picker">
96 <div class="color-item" style="background-color:#6B9362;">
97 <span class="color-name">Young bamboo color</span><br>
98 <span class="hex-number">#6B9362</span><br>
99 </div>
100 </div>
101 <div class="color-picker">
102 <div class="color-item" style="background-color:#407A52;">
103 <span class="color-name">Patina</span><br>
104 <span class="hex-number">#407A52</span><br>
105 </div>
106 </div>
107 <div class="color-picker">
108 <div class="color-item" style="background-color:#006442;">
109 <span class="color-name">Green bamboo</span><br>
110 <span class="hex-number">#006442</span><br>
111 </div>
112 </div>
113
114 <div class="color-picker">
115 <div class="color-item" style="background-color:#87D37C;">
116 <span class="color-name">GOSSIP</span><br>
117 <span class="hex-number">#87D37C</span><br>
118 </div>
119 </div>
120 <div class="color-picker">
121 <div class="color-item" style="background-color:#26A65B;">
122 <span class="color-name">EUCALYPTUS</span><br>
123 <span class="hex-number">#26A65B</span><br>
124 </div>
125 </div>
126 <div class="color-picker">
127 <div class="color-item" style="background-color: #26C281;">
128 <span class="color-name">JUNGLE GREEN</span><br>
129 <span class="hex-number">#26C281</span><br>
130 </div>
131 </div>
132 <div class="color-picker">
133 <div class="color-item" style="background-color:#049372;">
134 <span class="color-name">OBSERVATORY</span><br>
135 <span class="hex-number">#049372</span><br>
136 </div>
137 </div>
138
139 <div class="color-picker">
140 <div class="color-item" style="background-color:#2ABB9B;">
141 <span class="color-name">JUNGLE GREEN</span><br>
142 <span class="hex-number">#2ABB9B</span><br>
143 </div>
144 </div>
145 <div class="color-picker">
146 <div class="color-item" style="background-color:#16A085;">
147 <span class="color-name">MOUNTAIN MEADOW</span><br>
148 <span class="hex-number">#16A085</span><br>
149 </div>
150 </div>
151 <div class="color-picker">
152 <div class="color-item" style="background-color:#36D7B7;">
153 <span class="color-name">TURQUOISE</span><br>
154 <span class="hex-number">#36D7B7</span><br>
155 </div>
156 </div>
157 <div class="color-picker">
158 <div class="color-item" style="background-color: #03A678;">
159 <span class="color-name">FREE SPEECH AQUAMARINE</span><br>
160 <span class="hex-number">#03A678</span><br>
161 </div>
162 </div>
163 <div class="color-picker">
164 <div class="color-item" style="background-color:#4DAF7C;">
165 <span class="color-name">OCEAN GREEN</span><br>
166 <span class="hex-number">#4DAF7C</span><br>
167 </div>
168 </div>
169 </div>
170 <!--footer-->
171 <div class="site-footer">
172 <div class="container">
173 <div class="download">
174 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
175 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
176 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
177 <!-- SmartAddon BEGIN -->
178 <script type="text/javascript">
179 (function() {
180 var s=document.createElement('script');s.type='text/javascript';s.async = true; 3 var s=document.createElement('script');s.type='text/javascript';s.async = true;
181 s.src='http://s1'+'.smartaddon.com/share_addon.js'; 4 s.src='http://s1'+'.smartaddon.com/share_addon.js';
182 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j); 5 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
183 })(); 6 })();</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(){
184 </script>
185
186 <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>
187 <!-- SmartAddon END -->
188 </div>
189 <hr class="dashed" />
190 <div class="row">
191 <div class="col-md-4">
192 <h3>Get involved</h3>
193 <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>
194 </div>
195 <div class="col-md-4">
196 <h3>Contribute</h3>
197 <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>
198 </div>
199 <div class="col-md-4">
200 <h3>Found a bug?</h3>
201 <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>
202 </div>
203 </div>
204 <hr class="dashed" />
205 <div class="row">
206 <div class="col-md-6">
207 <h3>Talk to us</h3>
208 <ul>
209 <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>
210 <li>
211 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
212 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
213 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
214 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
215 </li>
216 </ul>
217 </div>
218 <div class="col-md-6">
219 <!-- Begin MailChimp Signup Form -->
220 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
221 <div id="mc_embed_signup">
222 <h3 style="margin-bottom: 15px;">Newsletter</h3>
223 <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>
224 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
225 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
226 </form>
227 </div>
228 <!--End mc_embed_signup-->
229 </div>
230 </div>
231 <hr class="dashed" />
232 <div class="copyright clearfix">
233 <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>
234 <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>
235 </div>
236 </div>
237 </div>
238 <script>
239 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
240 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 7 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
241 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 8 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
242 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 9 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
243 10
244 ga('create', 'UA-48721682-1', 'bootflat.github.io'); 11 ga('create', 'UA-48721682-1', 'bootflat.github.io');
245 ga('require', 'displayfeatures'); 12 ga('require', 'displayfeatures');
246 ga('send', 'pageview'); 13 ga('send', 'pageview');</script></body></html>
247
248 </script>
249 </body>
250 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 <!DOCTYPE html> 1 <!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>
2 <html> 2 <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() {
3 <head>
4 <meta charset="utf-8">
5 <title>Color Picker - Pink - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <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">
11 <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">
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <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">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Color Picker</h3>
53 <h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container color-picker-nav">
63 <a href="color-picker.html">All</a>
64 <a href="color-picker-red.html">Red</a>
65 <a class="current" href="color-picker-pink.html">Pink</a>
66 <a href="color-picker-purple.html">Purple</a>
67 <a href="color-picker-blue.html">Blue</a>
68 <a href="color-picker-green.html">Green</a>
69 <a href="color-picker-yellow.html">Yellow</a>
70 <a href="color-picker-gray.html">Gray</a>
71 </div>
72 </div>
73 </div>
74 </div>
75 <!--documents-->
76 <div class="color-wrap clearfix">
77 <div class="color-picker">
78 <div class="color-item" style="background-color:#F08F90;">
79 <span class="color-name">One kin dye</span><br>
80 <span class="hex-number">#F08F907</span><br>
81 </div>
82 </div>
83 <div class="color-picker">
84 <div class="color-item" style="background-color:#F47983;">
85 <span class="color-name">Peach-colored</span><br>
86 <span class="hex-number">#F47983</span><br>
87 </div>
88 </div>
89 <div class="color-picker">
90 <div class="color-item" style="background-color:#DB5A6B;">
91 <span class="color-name">Red plum colored</span><br>
92 <span class="hex-number">#DB5A6B</span><br>
93 </div>
94 </div>
95 <div class="color-picker">
96 <div class="color-item" style="background-color:#C93756;">
97 <span class="color-name">Medium crimson</span><br>
98 <span class="hex-number">#C93756</span><br>
99 </div>
100 </div>
101 <div class="color-picker">
102 <div class="color-item" style="background-color:#FCC9B9;">
103 <span class="color-name">Cherry blossom color</span><br>
104 <span class="hex-number">#FCC9B9</span><br>
105 </div>
106 </div>
107 <div class="color-picker">
108 <div class="color-item" style="background-color:#FFB3A7;">
109 <span class="color-name">Washed-out crimson</span><br>
110 <span class="hex-number">#FFB3A7</span><br>
111 </div>
112 </div>
113 <div class="color-picker">
114 <div class="color-item" style="background-color:#F62459;">
115 <span class="color-name">RADICAL RED</span><br>
116 <span class="hex-number">#F62459</span><br>
117 </div>
118 </div>
119 <div class="color-picker">
120 <div class="color-item" style="background-color:#F58F84;">
121 <span class="color-name">Ibis wing color</span><br>
122 <span class="hex-number">#F58F84</span><br>
123 </div>
124 </div>
125 </div>
126 <!--footer-->
127 <div class="site-footer">
128 <div class="container">
129 <div class="download">
130 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
131 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
132 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
133 <!-- SmartAddon BEGIN -->
134 <script type="text/javascript">
135 (function() {
136 var s=document.createElement('script');s.type='text/javascript';s.async = true; 3 var s=document.createElement('script');s.type='text/javascript';s.async = true;
137 s.src='http://s1'+'.smartaddon.com/share_addon.js'; 4 s.src='http://s1'+'.smartaddon.com/share_addon.js';
138 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j); 5 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
139 })(); 6 })();</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(){
140 </script>
141
142 <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>
143 <!-- SmartAddon END -->
144 </div>
145 <hr class="dashed" />
146 <div class="row">
147 <div class="col-md-4">
148 <h3>Get involved</h3>
149 <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>
150 </div>
151 <div class="col-md-4">
152 <h3>Contribute</h3>
153 <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>
154 </div>
155 <div class="col-md-4">
156 <h3>Found a bug?</h3>
157 <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>
158 </div>
159 </div>
160 <hr class="dashed" />
161 <div class="row">
162 <div class="col-md-6">
163 <h3>Talk to us</h3>
164 <ul>
165 <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>
166 <li>
167 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
168 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
169 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
170 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
171 </li>
172 </ul>
173 </div>
174 <div class="col-md-6">
175 <!-- Begin MailChimp Signup Form -->
176 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
177 <div id="mc_embed_signup">
178 <h3 style="margin-bottom: 15px;">Newsletter</h3>
179 <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>
180 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
181 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
182 </form>
183 </div>
184 <!--End mc_embed_signup-->
185 </div>
186 </div>
187 <hr class="dashed" />
188 <div class="copyright clearfix">
189 <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>
190 <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>
191 </div>
192 </div>
193 </div>
194 <script>
195 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
196 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 7 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
197 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 8 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
198 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 9 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
199 10
200 ga('create', 'UA-48721682-1', 'bootflat.github.io'); 11 ga('create', 'UA-48721682-1', 'bootflat.github.io');
201 ga('require', 'displayfeatures'); 12 ga('require', 'displayfeatures');
202 ga('send', 'pageview'); 13 ga('send', 'pageview');</script></body></html>
203
204 </script>
205 </body>
206 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 <!DOCTYPE html> 1 <!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>
2 <html> 2 <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() {
3 <head>
4 <meta charset="utf-8">
5 <title>Color Picker - Purple - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <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">
11 <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">
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <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">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Color Picker</h3>
53 <h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container color-picker-nav">
63 <a href="color-picker.html">All</a>
64 <a href="color-picker-red.html">Red</a>
65 <a href="color-picker-pink.html">Pink</a>
66 <a class="current" href="color-picker-purple.html">Purple</a>
67 <a href="color-picker-blue.html">Blue</a>
68 <a href="color-picker-green.html">Green</a>
69 <a href="color-picker-yellow.html">Yellow</a>
70 <a href="color-picker-gray.html">Gray</a>
71 </div>
72 </div>
73 </div>
74 </div>
75 <!--documents-->
76 <div class="color-wrap clearfix">
77 <div class="color-picker">
78 <div class="color-item" style="background-color:#875F9A;">
79 <span class="color-name">Wisteria purple</span><br>
80 <span class="hex-number">#875F9A</span><br>
81 </div>
82 </div>
83 <div class="color-picker">
84 <div class="color-item" style="background-color:#5D3F6A;">
85 <span class="color-name">Bellflower color</span><br>
86 <span class="hex-number">#5D3F6A</span><br>
87 </div>
88 </div>
89 <div class="color-picker">
90 <div class="color-item" style="background-color:#89729E;">
91 <span class="color-name">Wisteria color</span><br>
92 <span class="hex-number">#89729E</span><br>
93 </div>
94 </div>
95 <div class="color-picker">
96 <div class="color-item" style="background-color:#763568;">
97 <span class="color-name">Iris color</span><br>
98 <span class="hex-number">#763568</span><br>
99 </div>
100 </div>
101 <div class="color-picker">
102 <div class="color-item" style="background-color:#8D608C;">
103 <span class="color-name">Tatarian aster color</span><br>
104 <span class="hex-number">#8D608C</span><br>
105 </div>
106 </div>
107 <div class="color-picker">
108 <div class="color-item" style="background-color:#A87CA0;">
109 <span class="color-name">Thin color</span><br>
110 <span class="hex-number">#A87CA0</span><br>
111 </div>
112 </div>
113
114 <div class="color-picker">
115 <div class="color-item" style="background-color:#5B3256;">
116 <span class="color-name">Violet color</span><br>
117 <span class="hex-number">#5B3256</span><br>
118 </div>
119 </div>
120 <div class="color-picker">
121 <div class="color-item" style="background-color:#BF55EC;">
122 <span class="color-name">MEDIUM PURPLE</span><br>
123 <span class="hex-number">#BF55EC</span><br>
124 </div>
125 </div>
126 <div class="color-picker">
127 <div class="color-item" style="background-color: #8E44AD;">
128 <span class="color-name">STUDIO</span><br>
129 <span class="hex-number">#8E44AD</span><br>
130 </div>
131 </div>
132 <div class="color-picker">
133 <div class="color-item" style="background-color:#9B59B6;">
134 <span class="color-name">WISTERIA</span><br>
135 <span class="hex-number">#9B59B6</span><br>
136 </div>
137 </div>
138 <div class="color-picker">
139 <div class="color-item" style="background-color:#BE90D4;">
140 <span class="color-name">LIGHT WISTERIA</span><br>
141 <span class="hex-number">#BE90D4</span><br>
142 </div>
143 </div>
144 </div>
145 <!--footer-->
146 <div class="site-footer">
147 <div class="container">
148 <div class="download">
149 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
150 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
151 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
152 <!-- SmartAddon BEGIN -->
153 <script type="text/javascript">
154 (function() {
155 var s=document.createElement('script');s.type='text/javascript';s.async = true; 3 var s=document.createElement('script');s.type='text/javascript';s.async = true;
156 s.src='http://s1'+'.smartaddon.com/share_addon.js'; 4 s.src='http://s1'+'.smartaddon.com/share_addon.js';
157 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j); 5 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
158 })(); 6 })();</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(){
159 </script>
160
161 <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>
162 <!-- SmartAddon END -->
163 </div>
164 <hr class="dashed" />
165 <div class="row">
166 <div class="col-md-4">
167 <h3>Get involved</h3>
168 <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>
169 </div>
170 <div class="col-md-4">
171 <h3>Contribute</h3>
172 <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>
173 </div>
174 <div class="col-md-4">
175 <h3>Found a bug?</h3>
176 <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>
177 </div>
178 </div>
179 <hr class="dashed" />
180 <div class="row">
181 <div class="col-md-6">
182 <h3>Talk to us</h3>
183 <ul>
184 <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>
185 <li>
186 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
187 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
188 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
189 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
190 </li>
191 </ul>
192 </div>
193 <div class="col-md-6">
194 <!-- Begin MailChimp Signup Form -->
195 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
196 <div id="mc_embed_signup">
197 <h3 style="margin-bottom: 15px;">Newsletter</h3>
198 <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>
199 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
200 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
201 </form>
202 </div>
203 <!--End mc_embed_signup-->
204 </div>
205 </div>
206 <hr class="dashed" />
207 <div class="copyright clearfix">
208 <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>
209 <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>
210 </div>
211 </div>
212 </div>
213 <script>
214 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
215 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 7 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
216 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 8 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
217 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 9 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
218 10
219 ga('create', 'UA-48721682-1', 'bootflat.github.io'); 11 ga('create', 'UA-48721682-1', 'bootflat.github.io');
220 ga('require', 'displayfeatures'); 12 ga('require', 'displayfeatures');
221 ga('send', 'pageview'); 13 ga('send', 'pageview');</script></body></html>
222
223 </script>
224 </body>
225 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 <!DOCTYPE html> 1 <!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>
2 <html> 2 <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() {
3 <head>
4 <meta charset="utf-8">
5 <title>Color Picker - Red - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <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">
11 <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">
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <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">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Color Picker</h3>
53 <h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container color-picker-nav">
63 <a href="color-picker.html">All</a>
64 <a class="current" href="color-picker-red.html">Red</a>
65 <a href="color-picker-pink.html">Pink</a>
66 <a href="color-picker-purple.html">Purple</a>
67 <a href="color-picker-blue.html">Blue</a>
68 <a href="color-picker-green.html">Green</a>
69 <a href="color-picker-yellow.html">Yellow</a>
70 <a href="color-picker-gray.html">Gray</a>
71 </div>
72 </div>
73 </div>
74 </div>
75 <!--documents-->
76 <div class="color-wrap clearfix">
77 <div class="color-picker">
78 <div class="color-item" style="background-color:#C91F37;">
79 <span class="color-name">Foreign crimson</span><br>
80 <span class="hex-number">#C91F37</span><br>
81 </div>
82 </div>
83 <div class="color-picker">
84 <div class="color-item" style="background-color:#DC3023;">
85 <span class="color-name">Red orange</span><br>
86 <span class="hex-number">#DC3023</span><br>
87 </div>
88 </div>
89 <div class="color-picker">
90 <div class="color-item" style="background-color:#9D2933;">
91 <span class="color-name">Cochineal red</span><br>
92 <span class="hex-number">#9D2933</span><br>
93 </div>
94 </div>
95 <div class="color-picker">
96 <div class="color-item" style="background-color:#CF000F;">
97 <span class="color-name">Monza</span><br>
98 <span class="hex-number">#CF000F</span><br>
99 </div>
100 </div>
101 <div class="color-picker">
102 <div class="color-item" style="background-color:#E68364;">
103 <span class="color-name">Brewed mustard-brown</span><br>
104 <span class="hex-number">#E68364</span><br>
105 </div>
106 </div>
107 <div class="color-picker">
108 <div class="color-item" style="background-color:#F22613;">
109 <span class="color-name">Pomegranate</span><br>
110 <span class="hex-number">#F22613</span><br>
111 </div>
112 </div>
113
114 <div class="color-picker">
115 <div class="color-item" style="background-color:#CF3A24;">
116 <span class="color-name">Scarlet</span><br>
117 <span class="hex-number">#CF3A24</span><br>
118 </div>
119 </div>
120 <div class="color-picker">
121 <div class="color-item" style="background-color:#C3272B;">
122 <span class="color-name">Pure crimson</span><br>
123 <span class="hex-number">#C3272B</span><br>
124 </div>
125 </div>
126 <div class="color-picker">
127 <div class="color-item" style="background-color: #8F1D21;">
128 <span class="color-name">True red</span><br>
129 <span class="hex-number">#8F1D21</span><br>
130 </div>
131 </div>
132 <div class="color-picker">
133 <div class="color-item" style="background-color:#D24D57;">
134 <span class="color-name">Chestnut Rose</span><br>
135 <span class="hex-number">#D24D57</span><br>
136 </div>
137 </div>
138 </div>
139 <!--footer-->
140 <div class="site-footer">
141 <div class="container">
142 <div class="download">
143 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
144 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
145 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
146 <!-- SmartAddon BEGIN -->
147 <script type="text/javascript">
148 (function() {
149 var s=document.createElement('script');s.type='text/javascript';s.async = true; 3 var s=document.createElement('script');s.type='text/javascript';s.async = true;
150 s.src='http://s1'+'.smartaddon.com/share_addon.js'; 4 s.src='http://s1'+'.smartaddon.com/share_addon.js';
151 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j); 5 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
152 })(); 6 })();</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(){
153 </script>
154
155 <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>
156 <!-- SmartAddon END -->
157 </div>
158 <hr class="dashed" />
159 <div class="row">
160 <div class="col-md-4">
161 <h3>Get involved</h3>
162 <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>
163 </div>
164 <div class="col-md-4">
165 <h3>Contribute</h3>
166 <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>
167 </div>
168 <div class="col-md-4">
169 <h3>Found a bug?</h3>
170 <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>
171 </div>
172 </div>
173 <hr class="dashed" />
174 <div class="row">
175 <div class="col-md-6">
176 <h3>Talk to us</h3>
177 <ul>
178 <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>
179 <li>
180 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
181 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
182 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
183 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
184 </li>
185 </ul>
186 </div>
187 <div class="col-md-6">
188 <!-- Begin MailChimp Signup Form -->
189 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
190 <div id="mc_embed_signup">
191 <h3 style="margin-bottom: 15px;">Newsletter</h3>
192 <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>
193 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
194 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
195 </form>
196 </div>
197 <!--End mc_embed_signup-->
198 </div>
199 </div>
200 <hr class="dashed" />
201 <div class="copyright clearfix">
202 <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>
203 <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>
204 </div>
205 </div>
206 </div>
207 <script>
208 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
209 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 7 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
210 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 8 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
211 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 9 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
212 10
213 ga('create', 'UA-48721682-1', 'bootflat.github.io'); 11 ga('create', 'UA-48721682-1', 'bootflat.github.io');
214 ga('require', 'displayfeatures'); 12 ga('require', 'displayfeatures');
215 ga('send', 'pageview'); 13 ga('send', 'pageview');</script></body></html>
216
217 </script>
218 </body>
219 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 <!DOCTYPE html> 1 <!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>
2 <html> 2 <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() {
3 <head>
4 <meta charset="utf-8">
5 <title>Color Picker - Yellow - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <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">
11 <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">
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <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">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Color Picker</h3>
53 <h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container color-picker-nav">
63 <a href="color-picker.html">All</a>
64 <a href="color-picker-red.html">Red</a>
65 <a href="color-picker-pink.html">Pink</a>
66 <a href="color-picker-purple.html">Purple</a>
67 <a href="color-picker-blue.html">Blue</a>
68 <a href="color-picker-green.html">Green</a>
69 <a class="current" href="color-picker-yellow.html">Yellow</a>
70 <a href="color-picker-gray.html">Gray</a>
71 </div>
72 </div>
73 </div>
74 </div>
75 <!--documents-->
76 <div class="color-wrap clearfix">
77 <div class="color-picker">
78 <div class="color-item" style="background-color:#D9B611;">
79 <span class="color-name">Patrinia flowers</span><br>
80 <span class="hex-number">#D9B611</span><br>
81 </div>
82 </div>
83 <div class="color-picker">
84 <div class="color-item" style="background-color:#F3C13A;">
85 <span class="color-name">Amur cork tree</span><br>
86 <span class="hex-number">#F3C13A</span><br>
87 </div>
88 </div>
89 <div class="color-picker">
90 <div class="color-item" style="background-color:#F7CA18;">
91 <span class="color-name">RIPE LEMON</span><br>
92 <span class="hex-number">#F7CA18</span><br>
93 </div>
94 </div>
95 <div class="color-picker">
96 <div class="color-item" style="background-color:#E2B13C;">
97 <span class="color-name">Japanese triandra grass</span><br>
98 <span class="hex-number">#E2B13C</span><br>
99 </div>
100 </div>
101 <div class="color-picker">
102 <div class="color-item" style="background-color:#A17917;">
103 <span class="color-name">Rapeseed oil-colored</span><br>
104 <span class="hex-number">#A17917</span><br>
105 </div>
106 </div>
107 <div class="color-picker">
108 <div class="color-item" style="background-color:#F5D76E;">
109 <span class="color-name">CREAM CAN</span><br>
110 <span class="hex-number">#F5D76E</span><br>
111 </div>
112 </div>
113
114 <div class="color-picker">
115 <div class="color-item" style="background-color:#F4D03F;">
116 <span class="color-name">SAFFRON</span><br>
117 <span class="hex-number">#F4D03F</span><br>
118 </div>
119 </div>
120 <div class="color-picker">
121 <div class="color-item" style="background-color:#FFA400;">
122 <span class="color-name">Bright golden yellow</span><br>
123 <span class="hex-number">#FFA400</span><br>
124 </div>
125 </div>
126 <div class="color-picker">
127 <div class="color-item" style="background-color:#E08A1E;">
128 <span class="color-name">Sumac-dyed</span><br>
129 <span class="hex-number">#E08A1E</span><br>
130 </div>
131 </div>
132 <div class="color-picker">
133 <div class="color-item" style="background-color:#FFB61E;">
134 <span class="color-name">Gamboge</span><br>
135 <span class="hex-number">#FFB61E</span><br>
136 </div>
137 </div>
138 <div class="color-picker">
139 <div class="color-item" style="background-color:#FAA945;">
140 <span class="color-name">Corn-colored</span><br>
141 <span class="hex-number">#FAA945</span><br>
142 </div>
143 </div>
144 <div class="color-picker">
145 <div class="color-item" style="background-color:#FFA631;">
146 <span class="color-name">Egg-colored</span><br>
147 <span class="hex-number">#FFA631</span><br>
148 </div>
149 </div>
150 <div class="color-picker">
151 <div class="color-item" style="background-color:#FFB94E;">
152 <span class="color-name">Floral leaf-colored</span><br>
153 <span class="hex-number">#FFB94E</span><br>
154 </div>
155 </div>
156
157 <div class="color-picker">
158 <div class="color-item" style="background-color:#E29C45;">
159 <span class="color-name">Golden fallen leaves</span><br>
160 <span class="hex-number">#E29C45</span><br>
161 </div>
162 </div>
163 <div class="color-picker">
164 <div class="color-item" style="background-color:#F9690E;">
165 <span class="color-name">ECSTASY</span><br>
166 <span class="hex-number">#F9690E</span><br>
167 </div>
168 </div>
169 <div class="color-picker">
170 <div class="color-item" style="background-color: #CA6924;">
171 <span class="color-name">Amber</span><br>
172 <span class="hex-number">#CA6924</span><br>
173 </div>
174 </div>
175 <div class="color-picker">
176 <div class="color-item" style="background-color:#F5AB35;">
177 <span class="color-name">LIGHTNING YELLOW</span><br>
178 <span class="hex-number">#F5AB35</span><br>
179 </div>
180 </div>
181 </div>
182 <!--footer-->
183 <div class="site-footer">
184 <div class="container">
185 <div class="download">
186 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
187 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
188 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
189 <!-- SmartAddon BEGIN -->
190 <script type="text/javascript">
191 (function() {
192 var s=document.createElement('script');s.type='text/javascript';s.async = true; 3 var s=document.createElement('script');s.type='text/javascript';s.async = true;
193 s.src='http://s1'+'.smartaddon.com/share_addon.js'; 4 s.src='http://s1'+'.smartaddon.com/share_addon.js';
194 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j); 5 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
195 })(); 6 })();</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(){
196 </script>
197
198 <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>
199 <!-- SmartAddon END -->
200 </div>
201 <hr class="dashed" />
202 <div class="row">
203 <div class="col-md-4">
204 <h3>Get involved</h3>
205 <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>
206 </div>
207 <div class="col-md-4">
208 <h3>Contribute</h3>
209 <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>
210 </div>
211 <div class="col-md-4">
212 <h3>Found a bug?</h3>
213 <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>
214 </div>
215 </div>
216 <hr class="dashed" />
217 <div class="row">
218 <div class="col-md-6">
219 <h3>Talk to us</h3>
220 <ul>
221 <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>
222 <li>
223 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
224 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
225 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
226 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
227 </li>
228 </ul>
229 </div>
230 <div class="col-md-6">
231 <!-- Begin MailChimp Signup Form -->
232 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
233 <div id="mc_embed_signup">
234 <h3 style="margin-bottom: 15px;">Newsletter</h3>
235 <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>
236 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
237 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
238 </form>
239 </div>
240 <!--End mc_embed_signup-->
241 </div>
242 </div>
243 <hr class="dashed" />
244 <div class="copyright clearfix">
245 <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>
246 <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>
247 </div>
248 </div>
249 </div>
250 <script>
251 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
252 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 7 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
253 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 8 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
254 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 9 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
255 10
256 ga('create', 'UA-48721682-1', 'bootflat.github.io'); 11 ga('create', 'UA-48721682-1', 'bootflat.github.io');
257 ga('require', 'displayfeatures'); 12 ga('require', 'displayfeatures');
258 ga('send', 'pageview'); 13 ga('send', 'pageview');</script></body></html>
259
260 </script>
261 </body>
262 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 <!DOCTYPE html> 1 <!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>
2 <html> 2 <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() {
3 <head>
4 <meta charset="utf-8">
5 <title>Color Picker - All - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <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">
9 <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">
10 <!-- SmartAddon.com Verification -->
11 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <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">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Color Picker</h3>
53 <h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container color-picker-nav">
63 <a class="current" href="color-picker.html">All</a>
64 <a href="color-picker-red.html">Red</a>
65 <a href="color-picker-pink.html">Pink</a>
66 <a href="color-picker-purple.html">Purple</a>
67 <a href="color-picker-blue.html">Blue</a>
68 <a href="color-picker-green.html">Green</a>
69 <a href="color-picker-yellow.html">Yellow</a>
70 <a href="color-picker-gray.html">Gray</a>
71 </div>
72 </div>
73 </div>
74 </div>
75 <!--documents-->
76 <div class="color-wrap clearfix">
77 <div class="color-picker">
78 <div class="color-item" style="background-color:#C91F37;">
79 <span class="color-name">Foreign crimson</span><br>
80 <span class="hex-number">#C91F37</span><br>
81 </div>
82 </div>
83 <div class="color-picker">
84 <div class="color-item" style="background-color:#DC3023;">
85 <span class="color-name">Red orange</span><br>
86 <span class="hex-number">#DC3023</span><br>
87 </div>
88 </div>
89 <div class="color-picker">
90 <div class="color-item" style="background-color:#9D2933;">
91 <span class="color-name">Cochineal red</span><br>
92 <span class="hex-number">#9D2933</span><br>
93 </div>
94 </div>
95 <div class="color-picker">
96 <div class="color-item" style="background-color:#CF000F;">
97 <span class="color-name">Monza</span><br>
98 <span class="hex-number">#CF000F</span><br>
99 </div>
100 </div>
101 <div class="color-picker">
102 <div class="color-item" style="background-color:#E68364;">
103 <span class="color-name">Brewed mustard-brown</span><br>
104 <span class="hex-number">#E68364</span><br>
105 </div>
106 </div>
107 <div class="color-picker">
108 <div class="color-item" style="background-color:#F22613;">
109 <span class="color-name">Pomegranate</span><br>
110 <span class="hex-number">#F22613</span><br>
111 </div>
112 </div>
113
114 <div class="color-picker">
115 <div class="color-item" style="background-color:#CF3A24;">
116 <span class="color-name">Scarlet</span><br>
117 <span class="hex-number">#CF3A24</span><br>
118 </div>
119 </div>
120 <div class="color-picker">
121 <div class="color-item" style="background-color:#C3272B;">
122 <span class="color-name">Pure crimson</span><br>
123 <span class="hex-number">#C3272B</span><br>
124 </div>
125 </div>
126 <div class="color-picker">
127 <div class="color-item" style="background-color: #8F1D21;">
128 <span class="color-name">True red</span><br>
129 <span class="hex-number">#8F1D21</span><br>
130 </div>
131 </div>
132 <div class="color-picker">
133 <div class="color-item" style="background-color:#D24D57;">
134 <span class="color-name">Chestnut Rose</span><br>
135 <span class="hex-number">#D24D57</span><br>
136 </div>
137 </div>
138 <div class="color-picker">
139 <div class="color-item" style="background-color:#F08F90;">
140 <span class="color-name">One kin dye</span><br>
141 <span class="hex-number">#F08F907</span><br>
142 </div>
143 </div>
144 <div class="color-picker">
145 <div class="color-item" style="background-color:#F47983;">
146 <span class="color-name">Peach-colored</span><br>
147 <span class="hex-number">#F47983</span><br>
148 </div>
149 </div>
150 <div class="color-picker">
151 <div class="color-item" style="background-color:#DB5A6B;">
152 <span class="color-name">Red plum colored</span><br>
153 <span class="hex-number">#DB5A6B</span><br>
154 </div>
155 </div>
156 <div class="color-picker">
157 <div class="color-item" style="background-color:#C93756;">
158 <span class="color-name">Medium crimson</span><br>
159 <span class="hex-number">#C93756</span><br>
160 </div>
161 </div>
162 <div class="color-picker">
163 <div class="color-item" style="background-color:#FCC9B9;">
164 <span class="color-name">Cherry blossom color</span><br>
165 <span class="hex-number">#FCC9B9</span><br>
166 </div>
167 </div>
168 <div class="color-picker">
169 <div class="color-item" style="background-color:#FFB3A7;">
170 <span class="color-name">Washed-out crimson</span><br>
171 <span class="hex-number">#FFB3A7</span><br>
172 </div>
173 </div>
174 <div class="color-picker">
175 <div class="color-item" style="background-color:#F62459;">
176 <span class="color-name">RADICAL RED</span><br>
177 <span class="hex-number">#F62459</span><br>
178 </div>
179 </div>
180 <div class="color-picker">
181 <div class="color-item" style="background-color:#F58F84;">
182 <span class="color-name">Ibis wing color</span><br>
183 <span class="hex-number">#F58F84</span><br>
184 </div>
185 </div>
186 <div class="color-picker">
187 <div class="color-item" style="background-color:#875F9A;">
188 <span class="color-name">Wisteria purple</span><br>
189 <span class="hex-number">#875F9A</span><br>
190 </div>
191 </div>
192 <div class="color-picker">
193 <div class="color-item" style="background-color:#5D3F6A;">
194 <span class="color-name">Bellflower color</span><br>
195 <span class="hex-number">#5D3F6A</span><br>
196 </div>
197 </div>
198 <div class="color-picker">
199 <div class="color-item" style="background-color:#89729E;">
200 <span class="color-name">Wisteria color</span><br>
201 <span class="hex-number">#89729E</span><br>
202 </div>
203 </div>
204 <div class="color-picker">
205 <div class="color-item" style="background-color:#763568;">
206 <span class="color-name">Iris color</span><br>
207 <span class="hex-number">#763568</span><br>
208 </div>
209 </div>
210 <div class="color-picker">
211 <div class="color-item" style="background-color:#8D608C;">
212 <span class="color-name">Tatarian aster color</span><br>
213 <span class="hex-number">#8D608C</span><br>
214 </div>
215 </div>
216 <div class="color-picker">
217 <div class="color-item" style="background-color:#A87CA0;">
218 <span class="color-name">Thin color</span><br>
219 <span class="hex-number">#A87CA0</span><br>
220 </div>
221 </div>
222
223 <div class="color-picker">
224 <div class="color-item" style="background-color:#5B3256;">
225 <span class="color-name">Violet color</span><br>
226 <span class="hex-number">#5B3256</span><br>
227 </div>
228 </div>
229 <div class="color-picker">
230 <div class="color-item" style="background-color:#BF55EC;">
231 <span class="color-name">MEDIUM PURPLE</span><br>
232 <span class="hex-number">#BF55EC</span><br>
233 </div>
234 </div>
235 <div class="color-picker">
236 <div class="color-item" style="background-color: #8E44AD;">
237 <span class="color-name">STUDIO</span><br>
238 <span class="hex-number">#8E44AD</span><br>
239 </div>
240 </div>
241 <div class="color-picker">
242 <div class="color-item" style="background-color:#9B59B6;">
243 <span class="color-name">WISTERIA</span><br>
244 <span class="hex-number">#9B59B6</span><br>
245 </div>
246 </div>
247 <div class="color-picker">
248 <div class="color-item" style="background-color:#BE90D4;">
249 <span class="color-name">LIGHT WISTERIA</span><br>
250 <span class="hex-number">#BE90D4</span><br>
251 </div>
252 </div>
253 <div class="color-picker">
254 <div class="color-item" style="background-color:#4D8FAC;">
255 <span class="color-name">Sky color</span><br>
256 <span class="hex-number">#4D8FAC</span><br>
257 </div>
258 </div>
259 <div class="color-picker">
260 <div class="color-item" style="background-color:#5D8CAE;">
261 <span class="color-name">Ultramarine color</span><br>
262 <span class="hex-number">#5D8CAE</span><br>
263 </div>
264 </div>
265 <div class="color-picker">
266 <div class="color-item" style="background-color:#22A7F0;">
267 <span class="color-name">PICTON BLUE</span><br>
268 <span class="hex-number">#22A7F0</span><br>
269 </div>
270 </div>
271 <div class="color-picker">
272 <div class="color-item" style="background-color:#19B5FE;">
273 <span class="color-name">DODGER BLUE</span><br>
274 <span class="hex-number">#19B5FE</span><br>
275 </div>
276 </div>
277 <div class="color-picker">
278 <div class="color-item" style="background-color:#59ABE3;">
279 <span class="color-name">PICTON BLUE</span><br>
280 <span class="hex-number">#59ABE3</span><br>
281 </div>
282 </div>
283 <div class="color-picker">
284 <div class="color-item" style="background-color:#48929B;">
285 <span class="color-name">Light blue color</span><br>
286 <span class="hex-number">#48929B</span><br>
287 </div>
288 </div>
289
290 <div class="color-picker">
291 <div class="color-item" style="background-color:#317589;">
292 <span class="color-name">Thousand herb</span><br>
293 <span class="hex-number">#317589</span><br>
294 </div>
295 </div>
296 <div class="color-picker">
297 <div class="color-item" style="background-color:#89C4F4;">
298 <span class="color-name">JORDY BLUE</span><br>
299 <span class="hex-number">#89C4F4</span><br>
300 </div>
301 </div>
302 <div class="color-picker">
303 <div class="color-item" style="background-color: #4B77BE;">
304 <span class="color-name">STEEL BLUE</span><br>
305 <span class="hex-number">#4B77BE</span><br>
306 </div>
307 </div>
308 <div class="color-picker">
309 <div class="color-item" style="background-color:#1F4788;">
310 <span class="color-name">Lapis lazuli color</span><br>
311 <span class="hex-number">#1F4788</span><br>
312 </div>
313 </div>
314 <div class="color-picker">
315 <div class="color-item" style="background-color:#003171;">
316 <span class="color-name">Navy blue color</span><br>
317 <span class="hex-number">#003171</span><br>
318 </div>
319 </div>
320
321 <div class="color-picker">
322 <div class="color-item" style="background-color:#044F67;">
323 <span class="color-name">Hanada</span><br>
324 <span class="hex-number">#044F67</span><br>
325 </div>
326 </div>
327 <div class="color-picker">
328 <div class="color-item" style="background-color: #264348;">
329 <span class="color-name">Indigo color</span><br>
330 <span class="hex-number">#264348</span><br>
331 </div>
332 </div>
333 <div class="color-picker">
334 <div class="color-item" style="background-color:#7A942E;">
335 <span class="color-name">Siskin sprout yellow</span><br>
336 <span class="hex-number">#7A942E</span><br>
337 </div>
338 </div>
339 <div class="color-picker">
340 <div class="color-item" style="background-color:#8DB255;">
341 <span class="color-name">young green onion</span><br>
342 <span class="hex-number">#8DB255</span><br>
343 </div>
344 </div>
345 <div class="color-picker">
346 <div class="color-item" style="background-color:#5B8930;">
347 <span class="color-name">Fresh onion</span><br>
348 <span class="hex-number">#5B8930</span><br>
349 </div>
350 </div>
351 <div class="color-picker">
352 <div class="color-item" style="background-color:#6B9362;">
353 <span class="color-name">Young bamboo color</span><br>
354 <span class="hex-number">#6B9362</span><br>
355 </div>
356 </div>
357 <div class="color-picker">
358 <div class="color-item" style="background-color:#407A52;">
359 <span class="color-name">Patina</span><br>
360 <span class="hex-number">#407A52</span><br>
361 </div>
362 </div>
363 <div class="color-picker">
364 <div class="color-item" style="background-color:#006442;">
365 <span class="color-name">Green bamboo</span><br>
366 <span class="hex-number">#006442</span><br>
367 </div>
368 </div>
369
370 <div class="color-picker">
371 <div class="color-item" style="background-color:#87D37C;">
372 <span class="color-name">GOSSIP</span><br>
373 <span class="hex-number">#87D37C</span><br>
374 </div>
375 </div>
376 <div class="color-picker">
377 <div class="color-item" style="background-color:#26A65B;">
378 <span class="color-name">EUCALYPTUS</span><br>
379 <span class="hex-number">#26A65B</span><br>
380 </div>
381 </div>
382 <div class="color-picker">
383 <div class="color-item" style="background-color: #26C281;">
384 <span class="color-name">JUNGLE GREEN</span><br>
385 <span class="hex-number">#26C281</span><br>
386 </div>
387 </div>
388 <div class="color-picker">
389 <div class="color-item" style="background-color:#049372;">
390 <span class="color-name">OBSERVATORY</span><br>
391 <span class="hex-number">#049372</span><br>
392 </div>
393 </div>
394
395 <div class="color-picker">
396 <div class="color-item" style="background-color:#2ABB9B;">
397 <span class="color-name">JUNGLE GREEN</span><br>
398 <span class="hex-number">#2ABB9B</span><br>
399 </div>
400 </div>
401 <div class="color-picker">
402 <div class="color-item" style="background-color:#16A085;">
403 <span class="color-name">MOUNTAIN MEADOW</span><br>
404 <span class="hex-number">#16A085</span><br>
405 </div>
406 </div>
407 <div class="color-picker">
408 <div class="color-item" style="background-color:#36D7B7;">
409 <span class="color-name">TURQUOISE</span><br>
410 <span class="hex-number">#36D7B7</span><br>
411 </div>
412 </div>
413 <div class="color-picker">
414 <div class="color-item" style="background-color: #03A678;">
415 <span class="color-name">FREE SPEECH AQUAMARINE</span><br>
416 <span class="hex-number">#03A678</span><br>
417 </div>
418 </div>
419 <div class="color-picker">
420 <div class="color-item" style="background-color:#4DAF7C;">
421 <span class="color-name">OCEAN GREEN</span><br>
422 <span class="hex-number">#4DAF7C</span><br>
423 </div>
424 </div>
425 <div class="color-picker">
426 <div class="color-item" style="background-color:#D9B611;">
427 <span class="color-name">Patrinia flowers</span><br>
428 <span class="hex-number">#D9B611</span><br>
429 </div>
430 </div>
431 <div class="color-picker">
432 <div class="color-item" style="background-color:#F3C13A;">
433 <span class="color-name">Amur cork tree</span><br>
434 <span class="hex-number">#F3C13A</span><br>
435 </div>
436 </div>
437 <div class="color-picker">
438 <div class="color-item" style="background-color:#F7CA18;">
439 <span class="color-name">RIPE LEMON</span><br>
440 <span class="hex-number">#F7CA18</span><br>
441 </div>
442 </div>
443 <div class="color-picker">
444 <div class="color-item" style="background-color:#E2B13C;">
445 <span class="color-name">Japanese triandra grass</span><br>
446 <span class="hex-number">#E2B13C</span><br>
447 </div>
448 </div>
449 <div class="color-picker">
450 <div class="color-item" style="background-color:#A17917;">
451 <span class="color-name">Rapeseed oil-colored</span><br>
452 <span class="hex-number">#A17917</span><br>
453 </div>
454 </div>
455 <div class="color-picker">
456 <div class="color-item" style="background-color:#F5D76E;">
457 <span class="color-name">CREAM CAN</span><br>
458 <span class="hex-number">#F5D76E</span><br>
459 </div>
460 </div>
461
462 <div class="color-picker">
463 <div class="color-item" style="background-color:#F4D03F;">
464 <span class="color-name">SAFFRON</span><br>
465 <span class="hex-number">#F4D03F</span><br>
466 </div>
467 </div>
468 <div class="color-picker">
469 <div class="color-item" style="background-color:#FFA400;">
470 <span class="color-name">Bright golden yellow</span><br>
471 <span class="hex-number">#FFA400</span><br>
472 </div>
473 </div>
474 <div class="color-picker">
475 <div class="color-item" style="background-color:#E08A1E;">
476 <span class="color-name">Sumac-dyed</span><br>
477 <span class="hex-number">#E08A1E</span><br>
478 </div>
479 </div>
480 <div class="color-picker">
481 <div class="color-item" style="background-color:#FFB61E;">
482 <span class="color-name">Gamboge</span><br>
483 <span class="hex-number">#FFB61E</span><br>
484 </div>
485 </div>
486 <div class="color-picker">
487 <div class="color-item" style="background-color:#FAA945;">
488 <span class="color-name">Corn-colored</span><br>
489 <span class="hex-number">#FAA945</span><br>
490 </div>
491 </div>
492 <div class="color-picker">
493 <div class="color-item" style="background-color:#FFA631;">
494 <span class="color-name">Egg-colored</span><br>
495 <span class="hex-number">#FFA631</span><br>
496 </div>
497 </div>
498 <div class="color-picker">
499 <div class="color-item" style="background-color:#FFB94E;">
500 <span class="color-name">Floral leaf-colored</span><br>
501 <span class="hex-number">#FFB94E</span><br>
502 </div>
503 </div>
504
505 <div class="color-picker">
506 <div class="color-item" style="background-color:#E29C45;">
507 <span class="color-name">Golden fallen leaves</span><br>
508 <span class="hex-number">#E29C45</span><br>
509 </div>
510 </div>
511 <div class="color-picker">
512 <div class="color-item" style="background-color:#F9690E;">
513 <span class="color-name">ECSTASY</span><br>
514 <span class="hex-number">#F9690E</span><br>
515 </div>
516 </div>
517 <div class="color-picker">
518 <div class="color-item" style="background-color: #CA6924;">
519 <span class="color-name">Amber</span><br>
520 <span class="hex-number">#CA6924</span><br>
521 </div>
522 </div>
523 <div class="color-picker">
524 <div class="color-item" style="background-color:#F5AB35;">
525 <span class="color-name">LIGHTNING YELLOW</span><br>
526 <span class="hex-number">#F5AB35</span><br>
527 </div>
528 </div>
529 <div class="color-picker">
530 <div class="color-item" style="background-color:#BFBFBF;">
531 <span class="color-name">SILVER</span><br>
532 <span class="hex-number">#BFBFBF</span><br>
533 </div>
534 </div>
535 <div class="color-picker">
536 <div class="color-item" style="background-color:#F2F1EF;">
537 <span class="color-name">CARARRA</span><br>
538 <span class="hex-number">#F2F1EF</span><br>
539 </div>
540 </div>
541 <div class="color-picker">
542 <div class="color-item" style="background-color:#BDC3C7;">
543 <span class="color-name">SILVER SAND</span><br>
544 <span class="hex-number">#BDC3C7</span><br>
545 </div>
546 </div>
547 <div class="color-picker">
548 <div class="color-item" style="background-color:#ECF0F1;">
549 <span class="color-name">PORCELAIN</span><br>
550 <span class="hex-number">#ECF0F1</span><br>
551 </div>
552 </div>
553 <div class="color-picker">
554 <div class="color-item" style="background-color:#D2D7D3;">
555 <span class="color-name">PUMICE</span><br>
556 <span class="hex-number">#D2D7D3</span><br>
557 </div>
558 </div>
559 <div class="color-picker">
560 <div class="color-item" style="background-color:#757D75;">
561 <span class="color-name">Harbor rat</span><br>
562 <span class="hex-number">#757D75</span><br>
563 </div>
564 </div>
565
566 <div class="color-picker">
567 <div class="color-item" style="background-color:#EEEEEE;">
568 <span class="color-name">GALLERY</span><br>
569 <span class="hex-number">#EEEEEE</span><br>
570 </div>
571 </div>
572 <div class="color-picker">
573 <div class="color-item" style="background-color:#ABB7B7;">
574 <span class="color-name">EDWARD</span><br>
575 <span class="hex-number">#ABB7B7</span><br>
576 </div>
577 </div>
578 <div class="color-picker">
579 <div class="color-item" style="background-color: #6C7A89;">
580 <span class="color-name">LYNCH</span><br>
581 <span class="hex-number">#6C7A89</span><br>
582 </div>
583 </div>
584 <div class="color-picker">
585 <div class="color-item" style="background-color:#95A5A6;">
586 <span class="color-name">CASCADE</span><br>
587 <span class="hex-number">#95A5A6</span><br>
588 </div>
589 </div>
590 </div>
591 <!--footer-->
592 <div class="site-footer">
593 <div class="container">
594 <div class="download">
595 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
596 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
597 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
598 <!-- SmartAddon BEGIN -->
599 <script type="text/javascript">
600 (function() {
601 var s=document.createElement('script');s.type='text/javascript';s.async = true; 3 var s=document.createElement('script');s.type='text/javascript';s.async = true;
602 s.src='http://s1'+'.smartaddon.com/share_addon.js'; 4 s.src='http://s1'+'.smartaddon.com/share_addon.js';
603 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j); 5 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
604 })(); 6 })();</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(){
605 </script>
606
607 <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>
608 <!-- SmartAddon END -->
609 </div>
610 <hr class="dashed" />
611 <div class="row">
612 <div class="col-md-4">
613 <h3>Get involved</h3>
614 <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>
615 </div>
616 <div class="col-md-4">
617 <h3>Contribute</h3>
618 <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>
619 </div>
620 <div class="col-md-4">
621 <h3>Found a bug?</h3>
622 <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>
623 </div>
624 </div>
625 <hr class="dashed" />
626 <div class="row">
627 <div class="col-md-6">
628 <h3>Talk to us</h3>
629 <ul>
630 <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>
631 <li>
632 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
633 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
634 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
635 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
636 </li>
637 </ul>
638 </div>
639 <div class="col-md-6">
640 <!-- Begin MailChimp Signup Form -->
641 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
642 <div id="mc_embed_signup">
643 <h3 style="margin-bottom: 15px;">Newsletter</h3>
644 <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>
645 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
646 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
647 </form>
648 </div>
649 <!--End mc_embed_signup-->
650 </div>
651 </div>
652 <hr class="dashed" />
653 <div class="copyright clearfix">
654 <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>
655 <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>
656 </div>
657 </div>
658 </div>
659 <script>
660 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
661 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 7 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
662 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 8 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
663 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 9 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
664 10
665 ga('create', 'UA-48721682-1', 'bootflat.github.io'); 11 ga('create', 'UA-48721682-1', 'bootflat.github.io');
666 ga('require', 'displayfeatures'); 12 ga('require', 'displayfeatures');
667 ga('send', 'pageview'); 13 ga('send', 'pageview');</script></body></html>
668
669 </script>
670 </body>
671 </html>
...\ No newline at end of file ...\ No newline at end of file
......
This diff could not be displayed because it is too large.
1 <!DOCTYPE html> 1 <!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>
2 <html> 2 <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() {
3 <head>
4 <meta charset="utf-8">
5 <title>Bootflat UI Kit Free PSD Download - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <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">
11 <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.">
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <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">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link current" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Bootflat UI Kit (Version 2.0.4)</h3>
53 <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>
54 <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;
55 <span class="github github-watch">
56 <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>
57 </span>
58 <span class="github github-fork">
59 <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>
60 </span>
61 </div>
62 <div class="col-md-4">
63 <div class="advertisement">
64
65 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
66 </div>
67 </div>
68 </div>
69 <div class="topic__infos">
70 <div class="container">
71 Bootflat UI is a set of beautiful components featuring the flat design trend.
72 </div>
73 </div>
74 </div>
75 </div>
76 <div class="psd-download">
77 <div class="container">
78 <div class="row">
79 <div class="col-md-10">
80 <h2>Overview</h2>
81 <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>
82 <div class="row">
83 <div class="col-md-6">
84 <div class="row">
85 <div class="col-md-4"><img src="img/fast.png" /></div>
86 <div class="col-md-8">
87 <h4>Save your time</h4>
88 <p>Don't waste your time on the composition of the same. Use your time to develop new ideas and projects.</p>
89 </div>
90 </div>
91 </div>
92 <div class="col-md-6">
93 <div class="row">
94 <div class="col-md-4"><img src="img/design.png" /></div>
95 <div class="col-md-8">
96 <h4>Elaborate design</h4>
97 <p>All the components are independent, easy to be integrated into the design and layout of any project.</p>
98 </div>
99 </div>
100 </div>
101 </div>
102 <div class="row">
103 <div class="col-md-6">
104 <div class="row">
105 <div class="col-md-4"><img src="img/together.png" /></div>
106 <div class="col-md-8">
107 <h4>Components fit together</h4>
108 <p>All components to use the same style. You can easily apply them in the design projects of various.</p>
109 </div>
110 </div>
111 </div>
112 <div class="col-md-6 clearfix">
113 <div class="row">
114 <div class="col-md-4"><img src="img/prototyping.png" /></div>
115 <div class="col-md-8">
116 <h4>Fast prototyping</h4>
117 <p>You will be able to quickly develop high-quality prototypes in full-color. Your clients will appreciate prototypes with beautiful components.</p>
118 </div>
119 </div>
120 </div>
121 </div>
122 </div>
123 </div>
124 </div>
125 </div>
126 <div class="previews">
127 <div class="container">
128 <h2>Preview</h2>
129 <p>You will find Buttons, Text edits, Menus, Sliders and more, Beautiful Complex Blocks and many other useful web elements. </p>
130 </div>
131 <img src="img/bootflat-ui-kit.jpg" alt="Bootflat UI Kit" />
132 <div class="container">
133 <h2>Thanks for watching!</h2>
134 <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>
135 </div>
136 </div>
137 <!--footer-->
138 <div class="site-footer">
139 <div class="container">
140 <div class="download">
141 <span class="download__infos">You can <b>free</b> download it.</span>&nbsp;&nbsp;&nbsp;&nbsp;
142 <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;
143 <!-- SmartAddon BEGIN -->
144 <script type="text/javascript">
145 (function() {
146 var s=document.createElement('script');s.type='text/javascript';s.async = true; 3 var s=document.createElement('script');s.type='text/javascript';s.async = true;
147 s.src='http://s1'+'.smartaddon.com/share_addon.js'; 4 s.src='http://s1'+'.smartaddon.com/share_addon.js';
148 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j); 5 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
149 })(); 6 })();</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(){
150 </script>
151
152 <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>
153 <!-- SmartAddon END -->
154 </div>
155 <hr class="dashed" />
156 <div class="row">
157 <div class="col-md-4">
158 <h3>Get involved</h3>
159 <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>
160 </div>
161 <div class="col-md-4">
162 <h3>Contribute</h3>
163 <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>
164 </div>
165 <div class="col-md-4">
166 <h3>Found a bug?</h3>
167 <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>
168 </div>
169 </div>
170 <hr class="dashed" />
171 <div class="row">
172 <div class="col-md-6">
173 <h3>Talk to us</h3>
174 <ul>
175 <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>
176 <li>
177 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
178 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
179 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
180 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
181 </li>
182 </ul>
183 </div>
184 <div class="col-md-6">
185 <!-- Begin MailChimp Signup Form -->
186 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
187 <div id="mc_embed_signup">
188 <h3 style="margin-bottom: 15px;">Newsletter</h3>
189 <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>
190 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
191 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
192 </form>
193 </div>
194 <!--End mc_embed_signup-->
195 </div>
196 </div>
197 <hr class="dashed" />
198 <div class="copyright clearfix">
199 <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>
200 <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>
201 </div>
202 </div>
203 </div>
204 <script>
205 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
206 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 7 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
207 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 8 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
208 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 9 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
209 10
210 ga('create', 'UA-48721682-1', 'bootflat.github.io'); 11 ga('create', 'UA-48721682-1', 'bootflat.github.io');
211 ga('require', 'displayfeatures'); 12 ga('require', 'displayfeatures');
212 ga('send', 'pageview'); 13 ga('send', 'pageview');</script></body></html>
213
214 </script>
215 </body>
216 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 <!DOCTYPE html> 1 <!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>
2 <html> 2 <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/
3 <head>
4 <meta charset="utf-8">
5 <title>Getting Started - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <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">
11 <meta name="description" content="An overview of Bootflat, why we built it, how to use it, and what you should know along the way.">
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <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">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link current" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Getting Started with Bootflat Framework</h3>
53 <h4>An overview of Bootflat, why we built it, how to use it, and what you should know along the way.</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container">
63 Getting started With Bootflat is easy. Whether you are a master of Sass, building a new app, we've got you covered.
64 </div>
65 </div>
66 </div>
67 </div>
68 <!--documents-->
69 <div class="container documents">
70 <div class="row">
71 <div class="col-md-12">
72 <!-- Overview
73 ================================================== -->
74 <div class="docs-article docs--start" id="overview">
75 <h3>Overview</h3>
76 <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>
77 <dl>
78 <dt>OOCSS Approach</dt>
79 <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>
80 <dt>Bootstrap 3.3.0 Support</dt>
81 <dd>Now Bootflat is supporting Bootstrap 3.3.0 as well.</dd>
82 <dt>Configurable Color Scheme</dt>
83 <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>
84 <dt>Easy Installation</dt>
85 <dd>Upload all Bootflat files and paste one line of code at the bottom of your <code>head</code> tag. That’s it!</dd>
86 <dt>Bootflat UI Kit Free Download</dt>
87 <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>
88 <dt>Bootflat Flat UI Color Picker</dt>
89 <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>
90 </dl>
91 </div>
92 <!--
93 ================================================== -->
94 <div class="docs-article docs--start" id="download">
95 <h3>Download</h3>
96 <p>Download the latest official release of Bootflat and get started!</p>
97 <ul class="item__infos">
98 <li>Version 2.0.4</li>
99 <li>Released July 09 2014</li>
100 </ul>
101 <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>
102 </div>
103 <!--
104 ================================================== -->
105 <div class="docs-article docs--start" id="Install">
106 <h3>Install</h3>
107 <ul class="item__infos">
108 <li>Clone the repo: <code>git clone https://github.com/bootflat/bootflat.github.io.git</code></li>
109 <li>Install with <a href="https://www.npmjs.org/" target="_blank" rel="nofollow">npm</a> <code>npm install bootflat</code></li>
110 <li>Install with <a href="http://bower.io/" target="_blank" rel="nofollow">bower</a> <code>bower install Bootflat</code></li>
111 </ul>
112 </div>
113 <!-- What's included
114 ================================================== -->
115 <div class="docs-article docs--start" id="included">
116 <h3>What's included</h3>
117 <p>Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.</p>
118 <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootflat. You'll see something like this:</p>
119 <pre><code class="bash">bootflat/
120 ├── css/ 3 ├── css/
121 │ ├── bootflat.css 4 │ ├── bootflat.css
122 │ ├── bootflat.css.map 5 │ ├── bootflat.css.map
...@@ -170,120 +53,15 @@ ...@@ -170,120 +53,15 @@
170 └── check_flat/ 53 └── check_flat/
171 ├── default.png 54 ├── default.png
172 └── default.psd 55 └── default.psd
173 </code></pre> 56 </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() {
174 </div>
175 <!-- CSS/SASS
176 ================================================== -->
177 <div class="docs-article docs--start" id="css-sass">
178 <h3>CSS/SASS</h3>
179 <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>
180 </div>
181 <!-- Browser Support
182 ================================================== -->
183 <div class="docs-article docs--start" id="browser-support">
184 <h3>Browser Support</h3>
185 <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>
186 </div>
187 <!-- Free PSD
188 ================================================== -->
189 <div class="docs-article docs--start" id="download">
190 <h3>Bootflat UI Kit</h3>
191 <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>
192 <p><a class="btn btn-primary" href="free-psd.html">Download Bootflat UI Kit (v2.0.0)</a></p>
193 </div>
194 <!-- Color Picker
195 ================================================== -->
196 <div class="docs-article docs--start" id="color-picker">
197 <h3>Bootflat Flat UI Color Picker</h3>
198 <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>
199 </div>
200 <!-- Licensing
201 ================================================== -->
202 <div class="docs-article docs--start" id="licensing">
203 <h3>Licensing</h3>
204 <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>
205 </div>
206 </div>
207 </div>
208 </div>
209 <!--footer-->
210 <div class="site-footer">
211 <div class="container">
212 <div class="download">
213 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
214 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
215 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
216 <!-- SmartAddon BEGIN -->
217 <script type="text/javascript">
218 (function() {
219 var s=document.createElement('script');s.type='text/javascript';s.async = true; 57 var s=document.createElement('script');s.type='text/javascript';s.async = true;
220 s.src='http://s1'+'.smartaddon.com/share_addon.js'; 58 s.src='http://s1'+'.smartaddon.com/share_addon.js';
221 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j); 59 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
222 })(); 60 })();</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(){
223 </script>
224
225 <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>
226 <!-- SmartAddon END -->
227 </div>
228 <hr class="dashed" />
229 <div class="row">
230 <div class="col-md-4">
231 <h3>Get involved</h3>
232 <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>
233 </div>
234 <div class="col-md-4">
235 <h3>Contribute</h3>
236 <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>
237 </div>
238 <div class="col-md-4">
239 <h3>Found a bug?</h3>
240 <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>
241 </div>
242 </div>
243 <hr class="dashed" />
244 <div class="row">
245 <div class="col-md-6">
246 <h3>Talk to us</h3>
247 <ul>
248 <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>
249 <li>
250 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
251 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
252 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
253 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
254 </li>
255 </ul>
256 </div>
257 <div class="col-md-6">
258 <!-- Begin MailChimp Signup Form -->
259 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
260 <div id="mc_embed_signup">
261 <h3 style="margin-bottom: 15px;">Newsletter</h3>
262 <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>
263 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
264 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
265 </form>
266 </div>
267 <!--End mc_embed_signup-->
268 </div>
269 </div>
270 <hr class="dashed" />
271 <div class="copyright clearfix">
272 <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>
273 <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>
274 </div>
275 </div>
276 </div>
277 <script>
278 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
279 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 61 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
280 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 62 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
281 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 63 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
282 64
283 ga('create', 'UA-48721682-1', 'bootflat.github.io'); 65 ga('create', 'UA-48721682-1', 'bootflat.github.io');
284 ga('require', 'displayfeatures'); 66 ga('require', 'displayfeatures');
285 ga('send', 'pageview'); 67 ga('send', 'pageview');</script></body></html>
286
287 </script>
288 </body>
289 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 <!DOCTYPE html> 1 <!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.
2 <html> 2 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>
3 <head> 3 <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() {
4 <meta charset="utf-8">
5 <title>Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <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">
11 <meta name="description" content="BOOTFLAT is an open source Flat UI KIT based on Bootstrap CSS framework.
12 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.">
13 <link rel="shortcut icon" href="favicon_16.ico"/>
14 <link rel="bookmark" href="favicon_16.ico"/>
15 <!-- site css -->
16 <link rel="stylesheet" href="css/site.min.css">
17 <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">
18 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
19 <!--[if lt IE 9]>
20 <script src="js/html5shiv.js"></script>
21 <script src="js/respond.min.js"></script>
22 <![endif]-->
23 <script type="text/javascript" src="js/site.min.js"></script>
24 </head>
25 <body class="home">
26 <div class="docs-header header--noBackground">
27 <!--nav-->
28 <nav class="navbar navbar-default navbar-custom" role="navigation">
29 <div class="container">
30 <div class="navbar-header">
31 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
32 <span class="sr-only">Toggle navigation</span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 <span class="icon-bar"></span>
36 </button>
37 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
38 </div>
39 <div class="collapse navbar-collapse">
40 <ul class="nav navbar-nav navbar-right">
41 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
42 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
43 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
44 <li><a class="nav-link" href="color-picker.html">Color Picker</a></li>
45 </ul>
46 </div>
47 </div>
48 </nav>
49 <!--index-->
50 <div class="index">
51 <h1>
52 <img src="img/logo-index.png" alt="Bootflat: Advanced HTML5 Hybrid Mobile App Framework">
53 </h1>
54 <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>
55 <h3>Compatible Browsers: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.</h3>
56 <p class="download-link">
57 <a class="btn btn-primary" href="https://github.com/Bootflat/Bootflat.github.io/archive/master.zip">Download (Version 2.0.4)</a>
58 </p>
59 <p class="version-text">MIT Licensed - Version 2.0.4</p>
60 <p class="adpacks">
61 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
62 </p>
63 <p class="learn-more Bootflat">
64 <a href="#learn-more">Learn more <i class="icon" data-icon="&#xe035"></i></a>
65 </p>
66 </div>
67 <!--social-->
68 <ul class="social">
69 <li class="github-watch">
70 <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>
71 </li>
72 <li class="github-fork">
73 <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>
74 </li>
75 <li class="twitter-follow">
76 <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>
77 </li>
78 <li class="twitter-share">
79 <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>
80 </li>
81 </ul>
82 <!--desc-->
83 <div id="learn-more" class="desc container">
84 <div class="desc__introduces">
85 <h3>Designed for everyone, everywhere.</h3>
86 <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>
87 </div>
88 <div class="desc__features">
89 <div class="row">
90 <div class="col-md-6">
91 <div class="features__photo"><img src="img/feature-bootstrap.png" /></div>
92 <h4>Bootstrap 3.3.0</h4>
93 <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>
94 </div>
95 <div class="col-md-6">
96 <div class="features__photo"><img src="img/feature-css.png" /></div>
97 <h4>HTML5 &amp; CSS3</h4>
98 <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>
99 </div>
100 </div>
101 <div class="row">
102 <div class="col-md-6">
103 <div class="features__photo"><img src="img/feature-lightweight.png" /></div>
104 <h4>Lightweight</h4>
105 <p>Bootflat uses lightweight high-function plugins for maximum performance, keeping CSS and JS file sizes down.</p>
106 </div>
107 <div class="col-md-6">
108 <div class="features__photo"><img src="img/feature-mobile.png" /></div>
109 <h4>Mobile first</h4>
110 <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>
111 </div>
112 </div>
113 </div>
114 <div class="desc__introduces">
115 <h3>Bootflat UI Kit</h3>
116 <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>
117 <div class="photo--responsive"><img src="img/bootflat-ui-kit.jpg" /></div>
118 </div>
119 </div>
120 <!--footer-->
121 <div class="site-footer">
122 <div class="container">
123 <div class="download">
124 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
125 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
126 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
127 <!-- SmartAddon BEGIN -->
128 <script type="text/javascript">
129 (function() {
130 var s=document.createElement('script');s.type='text/javascript';s.async = true; 4 var s=document.createElement('script');s.type='text/javascript';s.async = true;
131 s.src='http://s1'+'.smartaddon.com/share_addon.js'; 5 s.src='http://s1'+'.smartaddon.com/share_addon.js';
132 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j); 6 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
133 })(); 7 })();</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(){
134 </script>
135
136 <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>
137 <!-- SmartAddon END -->
138 </div>
139 <hr class="dashed" />
140 <div class="row">
141 <div class="col-md-4">
142 <h3>Get involved</h3>
143 <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>
144 </div>
145 <div class="col-md-4">
146 <h3>Contribute</h3>
147 <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>
148 </div>
149 <div class="col-md-4">
150 <h3>Found a bug?</h3>
151 <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>
152 </div>
153 </div>
154 <hr class="dashed" />
155 <div class="row">
156 <div class="col-md-6">
157 <h3>Talk to us</h3>
158 <ul>
159 <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>
160 <li>
161 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
162 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
163 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
164 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
165 </li>
166 </ul>
167 </div>
168 <div class="col-md-6">
169 <!-- Begin MailChimp Signup Form -->
170 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
171 <div id="mc_embed_signup">
172 <h3 style="margin-bottom: 15px;">Newsletter</h3>
173 <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>
174 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
175 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
176 </form>
177 </div>
178 <!--End mc_embed_signup-->
179 </div>
180 </div>
181 <hr class="dashed" />
182 <div class="copyright clearfix">
183 <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>
184 <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>
185 </div>
186 </div>
187 </div>
188
189 </div>
190 <script>
191 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
192 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 8 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
193 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 9 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
194 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 10 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
195 11
196 ga('create', 'UA-48721682-1', 'bootflat.github.io'); 12 ga('create', 'UA-48721682-1', 'bootflat.github.io');
197 ga('require', 'displayfeatures'); 13 ga('require', 'displayfeatures');
198 ga('send', 'pageview'); 14 ga('send', 'pageview');</script></body></html>
199
200 </script>
201 </body>
202 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,38 +3,41 @@ ...@@ -3,38 +3,41 @@
3 "private": false, 3 "private": false,
4 "version": "2.0.4", 4 "version": "2.0.4",
5 "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.", 5 "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.",
6 "author":"Flathemes <info@flathemes.com>", 6 "author": "Flathemes <info@flathemes.com>",
7 "homepage": "http://bootflat.github.com/", 7 "homepage": "http://bootflat.github.com/",
8 "keywords": [ 8 "keywords": [
9 "mobile", 9 "mobile",
10 "html5", 10 "html5",
11 "css3", 11 "css3",
12 "scss", 12 "scss",
13 "bootflat", 13 "bootflat",
14 "bootstrap", 14 "bootstrap",
15 "flat", 15 "flat",
16 "flat ui", 16 "flat ui",
17 "ui" 17 "ui"
18 ], 18 ],
19 "bugs": { 19 "bugs": {
20 "url": "https://github.com/bootflat/bootflat.github.io/issues" 20 "url": "https://github.com/bootflat/bootflat.github.io/issues"
21 }, 21 },
22 "license": "MIT", 22 "license": "MIT",
23 "repository" : { 23 "repository": {
24 "type" : "git", 24 "type": "git",
25 "url" : "https://github.com/bootflat/bootflat.github.io.git" 25 "url": "https://github.com/bootflat/bootflat.github.io.git"
26 }, 26 },
27 "devDependencies": { 27 "devDependencies": {
28 "grunt": "~0.4.4", 28 "grunt": "^0.4.5",
29 "grunt-contrib-clean": "~0.5.0", 29 "grunt-contrib-clean": "^0.6.0",
30 "grunt-contrib-csslint": "~0.2.0", 30 "grunt-contrib-csslint": "^0.3.1",
31 "grunt-contrib-cssmin": "~0.9.0", 31 "grunt-contrib-cssmin": "~0.9.0",
32 "grunt-contrib-uglify": "~0.4.0", 32 "grunt-contrib-htmlmin": "^0.3.0",
33 "grunt-contrib-imagemin": "^0.9.2",
34 "grunt-contrib-jshint": "^0.10.0",
33 "grunt-contrib-sass": "~0.7.3", 35 "grunt-contrib-sass": "~0.7.3",
34 "grunt-csscomb": "~2.0.1", 36 "grunt-contrib-uglify": "~0.4.0",
35 "grunt-html-validation": "~0.1.15", 37 "grunt-csscomb": "^3.0.0",
36 "grunt-sed": "~0.1.1", 38 "grunt-html-validation": "^0.1.18",
37 "load-grunt-tasks": "~0.4.0", 39 "grunt-sed": "^0.1.1",
38 "time-grunt": "~0.3.1" 40 "load-grunt-tasks": "^1.0.0",
41 "time-grunt": "^1.0.0"
39 } 42 }
40 } 43 }
......