Skip to content

brainfood / bootflat

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

add color picker pages

1 parent b4bb7d96
Expand all
Inline Side-by-side
Showing 15 changed files with 138 additions and 6 deletions
...@@ -79,9 +79,12 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/ ...@@ -79,9 +79,12 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/
79 + [Getting Started](http://bootflat.github.io/getting-started.html) 79 + [Getting Started](http://bootflat.github.io/getting-started.html)
80 + [Documentation](http://bootflat.github.io/documentation.html) 80 + [Documentation](http://bootflat.github.io/documentation.html)
81 + [Free PSD](http://bootflat.github.io/free-psd.html) 81 + [Free PSD](http://bootflat.github.io/free-psd.html)
82 + [Flat UI Color Picker](http://bootflat.github.io/color-picker.html)
82 83
83 ## Changelog: 84 ## Changelog:
84 85
86 2014/8/26 add `color picker`, you can make a flat design with it
87
85 2014/7/9 version 2.0.3 `support bootstrap 3.2.0 and Sass 3.3.9, add wigets: Calendar, Pricing` 88 2014/7/9 version 2.0.3 `support bootstrap 3.2.0 and Sass 3.3.9, add wigets: Calendar, Pricing`
86 89
87 2014/6/5 version 2.0.2 `add wigets: Toggle, Selecter, Stepper` 90 2014/6/5 version 2.0.2 `add wigets: Toggle, Selecter, Stepper`
......
...@@ -662,6 +662,114 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -662,6 +662,114 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
662 max-width: 100%; 662 max-width: 100%;
663 } 663 }
664 /* ---------------------------------- 664 /* ----------------------------------
665 * color picker
666 * ---------------------------------- */
667 .color-picker-nav a {
668 text-decoration: none !important;
669 color: #0b859c !important;
670 margin: 0 10px;
671 }
672 .color-picker-nav a:hover {
673 text-decoration: underline !important;
674 }
675 .color-picker-nav a.current {
676 font-weight: bold;
677 }
678 .color-wrap {
679 position: relative;
680 clear: both;
681 left: 0;
682 width: 100%;
683 z-index: 500;
684 }
685 .color-picker {
686 width: 20%;
687 padding-bottom: 18%;
688 color: #FFF;
689 position: relative;
690 float: left;
691 top: 0;
692 bottom: 0;
693 }
694 .color-item {
695 position: absolute;
696 margin: 0;
697 left: 0;
698 right: 0;
699 top: 0;
700 bottom: 0;
701 text-align: center;
702 text-transform: uppercase;
703 padding: 35%;
704 }
705 .color-item:hover {
706 display: inline;
707 z-index: 999;
708 overflow: hidden;
709 cursor: pointer;
710 -webkit-transform: scale(1);
711 -moz-transform: scale(1);
712 -o-transform: scale(1);
713 transform: scale(1);
714 -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
715 -moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
716 box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
717 }
718 /* Tablet Portrait size to standard 960 (devices and browsers) */
719 @media only screen and (min-width: 768px) and (max-width: 959px)
720 {
721 .color-picker{
722 width: 50%;
723 color: #FFF;
724 }
725 .color-item{
726 padding: 8%;
727 font-size: 0.875em;
728 }
729 .color-name,.hex-number {
730 position: relative;
731 line-height: 22px;
732 text-align: center;
733 }
734 }
735
736 /* All Mobile Sizes (devices and browser) */
737 @media only screen and (max-width: 767px)
738 {
739 .color-picker {
740 width: 50%;
741 color: #FFF;
742 }
743 .color-item{
744 padding: 8%;
745 font-size: 0.750em;
746 }
747 .color-name,.hex-number {
748 position: relative;
749 line-height: 22px;
750 text-align: center;
751 }
752 }
753
754 /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
755 @media only screen and (min-width: 480px) and (max-width: 767px)
756 {
757 .color-item{
758 padding: 5%;
759 font-size: 0.750em;
760 }
761 .color-picker{
762 width: 100%;
763 color: #FFF;
764 }
765 .color-name,.hex-number {
766 position: relative;
767 line-height: 12px;
768 text-align: center;
769 }
770 }
771
772 /* ----------------------------------
665 * btn-group & labels 773 * btn-group & labels
666 * ---------------------------------- */ 774 * ---------------------------------- */
667 .blank { 775 .blank {
...@@ -675,7 +783,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -675,7 +783,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
675 } 783 }
676 .site-footer { 784 .site-footer {
677 position: relative; 785 position: relative;
678 z-index: 2000; 786 z-index: 400;
679 border-top: 1px dashed #AAB2BD; 787 border-top: 1px dashed #AAB2BD;
680 padding: 40px 0 20px; 788 padding: 40px 0 20px;
681 background-color: #f5f5f5; 789 background-color: #f5f5f5;
......
This diff could not be displayed because it is too large.
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification --> 8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" /> 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="The complete style of the Bootflat Framework.">
10 <link rel="shortcut icon" href="favicon_16.ico"/> 12 <link rel="shortcut icon" href="favicon_16.ico"/>
11 <link rel="bookmark" href="favicon_16.ico"/> 13 <link rel="bookmark" href="favicon_16.ico"/>
12 <!-- site css --> 14 <!-- site css -->
...@@ -39,6 +41,7 @@ ...@@ -39,6 +41,7 @@
39 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li> 41 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
40 <li><a class="nav-link current" href="documentation.html">Documentation</a></li> 42 <li><a class="nav-link current" href="documentation.html">Documentation</a></li>
41 <li><a class="nav-link" href="free-psd.html">Free PSD</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>
42 </ul> 45 </ul>
43 </div> 46 </div>
44 </div> 47 </div>
...@@ -68,7 +71,7 @@ ...@@ -68,7 +71,7 @@
68 <!-- Color Swatches 71 <!-- Color Swatches
69 ================================================== --> 72 ================================================== -->
70 <div class="example"> 73 <div class="example">
71 <h2 class="example-title">Color Swatches</h2> 74 <h2 class="example-title">Color Swatches <span>(<b>More Colors See</b>: <a href="color-picker.html">Flat UI Color Picker</a>)</span></h2>
72 <div class="row"> 75 <div class="row">
73 <div class="col-md-2"> 76 <div class="col-md-2">
74 <div class="color-swatches"> 77 <div class="color-swatches">
...@@ -2279,7 +2282,7 @@ ...@@ -2279,7 +2282,7 @@
2279 </div> 2282 </div>
2280 <hr class="dashed" /> 2283 <hr class="dashed" />
2281 <div class="copyright clearfix"> 2284 <div class="copyright clearfix">
2282 <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></p> 2285 <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>
2283 <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> 2286 <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>
2284 </div> 2287 </div>
2285 </div> 2288 </div>
......
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification --> 8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" /> 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.">
10 <link rel="shortcut icon" href="favicon_16.ico"/> 12 <link rel="shortcut icon" href="favicon_16.ico"/>
11 <link rel="bookmark" href="favicon_16.ico"/> 13 <link rel="bookmark" href="favicon_16.ico"/>
12 <!-- site css --> 14 <!-- site css -->
...@@ -38,6 +40,7 @@ ...@@ -38,6 +40,7 @@
38 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li> 40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
39 <li><a class="nav-link" href="documentation.html">Documentation</a></li> 41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
40 <li><a class="nav-link current" href="free-psd.html">Free PSD</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>
41 </ul> 44 </ul>
42 </div> 45 </div>
43 </div> 46 </div>
...@@ -193,7 +196,7 @@ ...@@ -193,7 +196,7 @@
193 </div> 196 </div>
194 <hr class="dashed" /> 197 <hr class="dashed" />
195 <div class="copyright clearfix"> 198 <div class="copyright clearfix">
196 <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></p> 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>
197 <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> 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>
198 </div> 201 </div>
199 </div> 202 </div>
......
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification --> 8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" /> 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.">
10 <link rel="shortcut icon" href="favicon_16.ico"/> 12 <link rel="shortcut icon" href="favicon_16.ico"/>
11 <link rel="bookmark" href="favicon_16.ico"/> 13 <link rel="bookmark" href="favicon_16.ico"/>
12 <!-- site css --> 14 <!-- site css -->
...@@ -38,6 +40,7 @@ ...@@ -38,6 +40,7 @@
38 <li><a class="nav-link current" href="getting-started.html">Getting Started</a></li> 40 <li><a class="nav-link current" href="getting-started.html">Getting Started</a></li>
39 <li><a class="nav-link" href="documentation.html">Documentation</a></li> 41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
40 <li><a class="nav-link" href="free-psd.html">Free PSD</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>
41 </ul> 44 </ul>
42 </div> 45 </div>
43 </div> 46 </div>
...@@ -82,6 +85,8 @@ ...@@ -82,6 +85,8 @@
82 <dd>Upload all Bootflat files and paste one line of code at the bottom of your <code>head</code> tag. That’s it!</dd> 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>
83 <dt>Bootflat UI Kit Free Download</dt> 86 <dt>Bootflat UI Kit Free Download</dt>
84 <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> 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>
85 </dl> 90 </dl>
86 </div> 91 </div>
87 <!-- 92 <!--
...@@ -176,6 +181,12 @@ ...@@ -176,6 +181,12 @@
176 <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> 181 <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>
177 <p><a class="btn btn-primary" href="free-psd.html">Download Bootflat UI Kit (v2.0.0)</a></p> 182 <p><a class="btn btn-primary" href="free-psd.html">Download Bootflat UI Kit (v2.0.0)</a></p>
178 </div> 183 </div>
184 <!-- Color Picker
185 ================================================== -->
186 <div class="docs-article docs--start" id="color-picker">
187 <h3>Bootflat Flat UI Color Picker</h3>
188 <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>
189 </div>
179 <!-- Licensing 190 <!-- Licensing
180 ================================================== --> 191 ================================================== -->
181 <div class="docs-article docs--start" id="licensing"> 192 <div class="docs-article docs--start" id="licensing">
...@@ -248,7 +259,7 @@ ...@@ -248,7 +259,7 @@
248 </div> 259 </div>
249 <hr class="dashed" /> 260 <hr class="dashed" />
250 <div class="copyright clearfix"> 261 <div class="copyright clearfix">
251 <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></p> 262 <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>
252 <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> 263 <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>
253 </div> 264 </div>
254 </div> 265 </div>
......
...@@ -7,6 +7,9 @@ ...@@ -7,6 +7,9 @@
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification --> 8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" /> 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.">
10 <link rel="shortcut icon" href="favicon_16.ico"/> 13 <link rel="shortcut icon" href="favicon_16.ico"/>
11 <link rel="bookmark" href="favicon_16.ico"/> 14 <link rel="bookmark" href="favicon_16.ico"/>
12 <!-- site css --> 15 <!-- site css -->
...@@ -38,6 +41,7 @@ ...@@ -38,6 +41,7 @@
38 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li> 41 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
39 <li><a class="nav-link" href="documentation.html">Documentation</a></li> 42 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
40 <li><a class="nav-link" href="free-psd.html">Free PSD</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>
41 </ul> 45 </ul>
42 </div> 46 </div>
43 </div> 47 </div>
...@@ -176,7 +180,7 @@ ...@@ -176,7 +180,7 @@
176 </div> 180 </div>
177 <hr class="dashed" /> 181 <hr class="dashed" />
178 <div class="copyright clearfix"> 182 <div class="copyright clearfix">
179 <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></p> 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>
180 <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> 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>
181 </div> 185 </div>
182 </div> 186 </div>
......