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/
+ [Getting Started](http://bootflat.github.io/getting-started.html)
+ [Documentation](http://bootflat.github.io/documentation.html)
+ [Free PSD](http://bootflat.github.io/free-psd.html)
+ [Flat UI Color Picker](http://bootflat.github.io/color-picker.html)
## Changelog:
2014/8/26 add `color picker`, you can make a flat design with it
2014/7/9 version 2.0.3 `support bootstrap 3.2.0 and Sass 3.3.9, add wigets: Calendar, Pricing`
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 {
max-width: 100%;
}
/* ----------------------------------
* color picker
* ---------------------------------- */
.color-picker-nav a {
text-decoration: none !important;
color: #0b859c !important;
margin: 0 10px;
}
.color-picker-nav a:hover {
text-decoration: underline !important;
}
.color-picker-nav a.current {
font-weight: bold;
}
.color-wrap {
position: relative;
clear: both;
left: 0;
width: 100%;
z-index: 500;
}
.color-picker {
width: 20%;
padding-bottom: 18%;
color: #FFF;
position: relative;
float: left;
top: 0;
bottom: 0;
}
.color-item {
position: absolute;
margin: 0;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
text-transform: uppercase;
padding: 35%;
}
.color-item:hover {
display: inline;
z-index: 999;
overflow: hidden;
cursor: pointer;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px)
{
.color-picker{
width: 50%;
color: #FFF;
}
.color-item{
padding: 8%;
font-size: 0.875em;
}
.color-name,.hex-number {
position: relative;
line-height: 22px;
text-align: center;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px)
{
.color-picker {
width: 50%;
color: #FFF;
}
.color-item{
padding: 8%;
font-size: 0.750em;
}
.color-name,.hex-number {
position: relative;
line-height: 22px;
text-align: center;
}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px)
{
.color-item{
padding: 5%;
font-size: 0.750em;
}
.color-picker{
width: 100%;
color: #FFF;
}
.color-name,.hex-number {
position: relative;
line-height: 12px;
text-align: center;
}
}
/* ----------------------------------
* btn-group & labels
* ---------------------------------- */
.blank {
......@@ -675,7 +783,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
}
.site-footer {
position: relative;
z-index: 2000;
z-index: 400;
border-top: 1px dashed #AAB2BD;
padding: 40px 0 20px;
background-color: #f5f5f5;
......
This diff could not be displayed because it is too large.
......@@ -7,6 +7,8 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Bootstrap, Bootflat, Flat UI colors, colors">
<meta name="description" content="The complete style of the Bootflat Framework.">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
......@@ -39,6 +41,7 @@
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link current" 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>
......@@ -68,7 +71,7 @@
<!-- Color Swatches
================================================== -->
<div class="example">
<h2 class="example-title">Color Swatches</h2>
<h2 class="example-title">Color Swatches <span>(<b>More Colors See</b>: <a href="color-picker.html">Flat UI Color Picker</a>)</span></h2>
<div class="row">
<div class="col-md-2">
<div class="color-swatches">
......@@ -2279,7 +2282,7 @@
</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></p>
<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>
......
......@@ -7,6 +7,8 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Bootstrap, Bootflat, Flat UI colors, colors">
<meta name="description" content="Bootflat UI Kit is PSD User Interface Pack including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
......@@ -38,6 +40,7 @@
<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>
......@@ -193,7 +196,7 @@
</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></p>
<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>
......
......@@ -7,6 +7,8 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Bootstrap, Bootflat, Flat UI colors, colors">
<meta name="description" content="An overview of Bootflat, why we built it, how to use it, and what you should know along the way.">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
......@@ -38,6 +40,7 @@
<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>
......@@ -82,6 +85,8 @@
<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>
<!--
......@@ -176,6 +181,12 @@
<p>For the designers, we offer a free PSD file for you, it including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.</p>
<p><a class="btn btn-primary" href="free-psd.html">Download Bootflat UI Kit (v2.0.0)</a></p>
</div>
<!-- Color Picker
================================================== -->
<div class="docs-article docs--start" id="color-picker">
<h3>Bootflat Flat UI Color Picker</h3>
<p><a href="color-picker.html">Bootflat Flat UI Color Picker</a> is a project digging the Flat Color Picker which gives you the perfect colors for flat designs.</p>
</div>
<!-- Licensing
================================================== -->
<div class="docs-article docs--start" id="licensing">
......@@ -248,7 +259,7 @@
</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></p>
<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>
......
......@@ -7,6 +7,9 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Bootstrap, Bootflat, Flat UI colors, colors">
<meta name="description" content="BOOTFLAT is an open source Flat UI KIT based on Bootstrap CSS framework.
And, for the designers, we offer a free PSD Download. It provides a faster, easier and less repetitive way for web developers or designers to create elegant web apps.">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
......@@ -38,6 +41,7 @@
<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>
......@@ -176,7 +180,7 @@
</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></p>
<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>
......