Skip to content

brainfood / bootflat

Go to a project
Toggle navigation
Toggle navigation pinning
3fa37732 by bootflat
Options

update version 2.0.4

1 parent f4d48a76
Expand all
Inline Side-by-side
Showing 15 changed files with 431 additions and 15 deletions
......@@ -83,6 +83,8 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/
## Changelog:
2014/8/26 version 2.0.4 `add widgets: TimeLine`
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`
......
......@@ -15,5 +15,5 @@ url: http://bootflat.github.io
encoding: UTF-8
# Custom vars
current_version: 2.0.3
current_version: 2.0.4
repo: https://github.com/bootflat/bootflat.github.io
......
/*
* bootflat 2.0.3
* bootflat 2.0.4
*
* Description: BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.2.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.
*
......@@ -7,7 +7,7 @@
*
* By @Flathemes <info@flathemes.com>
*
* Last modify time: 2014-08-19
* Last modify time: 2014-09-03
*
* Licensed under the MIT license. Please see LICENSE for more information.
*
......@@ -2363,6 +2363,161 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it
}
/**
* timeline
* --------------------------------------------------
*/
.timeline dl {
position: relative;
top: 0;
padding: 20px 0;
margin: 0;
}
.timeline dl:before {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
z-index: 100;
width: 2px;
margin-left: -1px;
content: '';
background-color: #ccd1d9;
}
.timeline dl dt {
position: relative;
top: 30px;
z-index: 200;
width: 120px;
padding: 3px 5px;
margin: 0 auto 30px;
font-weight: normal;
color: white;
text-align: center;
background-color: #aab2bd;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.timeline dl dd {
position: relative;
z-index: 200;
}
.timeline dl dd .circ {
position: absolute;
top: 40px;
left: 50%;
z-index: 200;
width: 22px;
height: 22px;
margin-left: -11px;
background-color: #4fc1e9;
border: 4px solid #f5f7fa;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
.timeline dl dd .time {
position: absolute;
top: 31px;
left: 50%;
display: inline-block;
width: 100px;
padding: 10px 20px;
color: #4fc1e9;
}
.timeline dl dd .events {
position: relative;
width: 47%;
padding: 10px 10px 0;
margin-top: 31px;
background-color: white;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.timeline dl dd .events:before {
position: absolute;
top: 12px;
width: 0;
height: 0;
content: '';
border-style: solid;
border-width: 6px;
}
.timeline dl dd .events .events-object {
margin-right: 10px;
}
.timeline dl dd .events .events-body {
overflow: hidden;
zoom: 1;
}
.timeline dl dd .events .events-body .events-heading {
margin: 0 0 10px;
font-size: 14px;
}
.timeline dl dd.pos-right .time {
margin-left: -100px;
text-align: right;
}
.timeline dl dd.pos-right .events {
float: right;
}
.timeline dl dd.pos-right .events:before {
left: -12px;
border-color: transparent white transparent transparent;
}
.timeline dl dd.pos-left .time {
margin-left: 0;
text-align: left;
}
.timeline dl dd.pos-left .events {
float: left;
}
.timeline dl dd.pos-left .events:before {
right: -12px;
border-color: transparent transparent transparent white;
}
@media screen and (max-width: 767px) {
.timeline dl:before {
left: 60px;
}
.timeline dl dt {
margin: 0 0 30px;
}
.timeline dl dd .circ {
left: 60px;
}
.timeline dl dd .time {
left: 0;
}
.timeline dl dd.pos-left .time {
padding: 10px 0;
margin-left: 0;
text-align: left;
}
.timeline dl dd.pos-left .events {
float: right;
width: 84%;
}
.timeline dl dd.pos-left .events:before {
left: -12px;
border-color: transparent white transparent transparent;
}
.timeline dl dd.pos-right .time {
padding: 10px 0;
margin-left: 0;
text-align: left;
}
.timeline dl dd.pos-right .events {
float: right;
width: 84%;
}
}
/**
* dropdown-menu
* --------------------------------------------------
*/
......
This diff could not be displayed because it is too large.
......@@ -36,4 +36,5 @@
"bootflat/panel",
"bootflat/accordion",
"bootflat/footer",
"bootflat/timeline",
"bootflat/dropdown";
......
// Variables
//------------------------------------------------------
$timeline-division-background-color: $mediumgray-light !default;
$timeline-years-background-color: $mediumgray-dark !default;
$timeline-years-color: $white !default;
$timeline-dotted-color: $aqua-light !default;
$timeline-dotted-border-color: $lightgray-light !default;
$timeline-radius: 4px !default;
// Exports
//------------------------------------------------------
@include exports("timeline") {
/**
* timeline
* --------------------------------------------------
*/
.timeline {
& dl {
position: relative;
top: 0;
margin: 0;
padding: 20px 0;
&:before {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-left: -1px;
width: 2px;
content: '';
background-color: $timeline-division-background-color;
z-index: 100;
}
& dt {
position: relative;
top: 30px;
padding: 3px 5px;
margin: 0 auto 30px;
text-align: center;
@include radius($type: border-radius, $value: $timeline-radius);
background-color: $timeline-years-background-color;
font-weight: normal;
color: $timeline-years-color;
width: 120px;
z-index: 200;
}
& dd {
position: relative;
z-index: 200;
& .circ {
position: absolute;
top: 40px;
left: 50%;
margin-left: -11px;
border: 4px solid $timeline-dotted-border-color;
width: 22px;
height: 22px;
@include radius($type: border-radius, $value: 50%);
background-color: $timeline-dotted-color;
z-index: 200;
}
& .time {
position: absolute;
top: 31px;
left: 50%;
padding: 10px 20px;
width: 100px;
display: inline-block;
color: $timeline-dotted-color;
}
& .events {
position: relative;
margin-top: 31px;
padding: 10px 10px 0;
@include radius($type: border-radius, $value: $timeline-radius);
background-color: $white;
width: 47%;
&:before {
position: absolute;
top: 12px;
width: 0;
height: 0;
content: '';
border-width: 6px;
border-style: solid;
}
& .events-object {
margin-right: 10px;
}
& .events-body {
overflow: hidden;
zoom: 1;
& .events-heading {
margin: 0 0 10px;
font-size: 14px;
}
}
}
&.pos-right {
& .time {
margin-left: -100px;
text-align: right;
}
& .events {
float: right;
&:before {
left: -12px;
border-color: transparent $white transparent transparent;
}
}
}
&.pos-left {
& .time {
margin-left: 0;
text-align: left;
}
& .events {
float: left;
&:before {
right: -12px;
border-color: transparent transparent transparent $white;
}
}
}
}
}
}
@media screen and (max-width: 767px) {
.timeline dl {
&:before {
left: 60px;
}
& dt {
margin: 0 0 30px;
}
& dd {
& .circ {
left: 60px;
}
& .time {
left: 0;
}
&.pos-left {
& .time {
margin-left: 0;
padding: 10px 0;
text-align: left;
}
& .events {
float: right;
width: 84%;
&:before {
left: -12px;
border-color: transparent $white transparent transparent;
}
}
}
&.pos-right {
& .time {
margin-left: 0;
padding: 10px 0;
text-align: left;
}
& .events {
float: right;
width: 84%;
}
}
}
}
}
}
{
"name": "Bootflat",
"version": "2.0.3",
"version": "2.0.4",
"homepage": "http://bootflat.github.io",
"authors": [
"flathemes <info@flathemes.com>"
......
{
"name": "bootflat/bootflat",
"description": "An open source Flat UI KIT based on Bootstrap (3.2.0). A faster, easier and less repetitive way for web developers to create elegant web apps.",
"version": "2.0.3",
"version": "2.0.4",
"keywords": [
"mobile",
"html5",
......
This diff could not be displayed because it is too large.
......@@ -982,7 +982,7 @@
<!--Toggle
================================================== -->
<div class="example">
<h2 class="example-title">Toggle <span>(Used for <code>checkbox</code> or <code>radio</code>)<span></h2>
<h2 class="example-title">Toggle <span>(Used for <code>checkbox</code> or <code>radio</code>)</span></h2>
<div class="row">
<div class="col-md-4">
<label class="toggle">
......@@ -1003,11 +1003,80 @@
</label>
</div>
</div>
</div>
<!--TimeLine
================================================== -->
<div class="example">
<h2 class="example-title">TimeLine</h2>
<div class="row">
<div class="col-md-12">
<div class="timeline">
<dl>
<dt>Apr 2014</dt>
<dd class="pos-right clearfix">
<div class="circ"></div>
<div class="time">Apr 14</div>
<div class="events">
<div class="pull-left">
<img class="events-object img-rounded" src="img/photo-1.jpg">
</div>
<div class="events-body">
<h4 class="events-heading">Bootstrap</h4>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
</div>
</div>
</dd>
<dd class="pos-left clearfix">
<div class="circ"></div>
<div class="time">Apr 10</div>
<div class="events">
<div class="pull-left">
<img class="events-object img-rounded" src="img/photo-2.jpg">
</div>
<div class="events-body">
<h4 class="events-heading">Bootflat</h4>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
</div>
</div>
</dd>
<dt>Mar 2014</dt>
<dd class="pos-right clearfix">
<div class="circ"></div>
<div class="time">Mar 15</div>
<div class="events">
<div class="pull-left">
<img class="events-object img-rounded" src="img/photo-3.jpg">
</div>
<div class="events-body">
<h4 class="events-heading">Flat UI</h4>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
</div>
</div>
</dd>
<dd class="pos-left clearfix">
<div class="circ"></div>
<div class="time">Mar 8</div>
<div class="events">
<div class="pull-left">
<img class="events-object img-rounded" src="img/photo-4.jpg">
</div>
<div class="events-body">
<h4 class="events-heading">UI design</h4>
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
</div>
</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
<!-- Calendar
================================================== -->
<div class="example">
<h2 class="example-title">Calendar and Pricing</h2>
<div class="row">
<h2 class="example-title">Calendar and Pricing</span></h2>
<div class="col-md-4">
<div class="calendar">
<div class="years clearfix">
......
......@@ -95,10 +95,10 @@
<h3>Download</h3>
<p>Download the latest official release of Bootflat and get started!</p>
<ul class="item__infos">
<li>Version 2.0.3</li>
<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.3)</a></p>
<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>
<!--
================================================== -->
......@@ -174,7 +174,7 @@
================================================== -->
<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.3, that means UIWebView for E8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.</p>
<p>As such, our browser support tends to be whatever Web View API is available to native on a given platform. For Bootflat v2.0.4, that means UIWebView for E8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.</p>
</div>
<!-- Free PSD
================================================== -->
......
......@@ -54,9 +54,9 @@ And, for the designers, we offer a free PSD Download. It provides a faster, easi
<h2>BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.2.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.3)</a>
<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.3</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>
......
/*
* bootflat 2.0.2
* bootflat 2.0.4
*
* Description: BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.2.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.
*
......@@ -7,7 +7,7 @@
*
* By @Flathemes <info@flathemes.com>
*
* Last modify time: 2014-07-09
* Last modify time: 2014-09-03
*
* Licensed under the MIT license. Please see LICENSE for more information.
*
......
{
"name": "bootflat",
"private": false,
"version": "2.0.3",
"version": "2.0.4",
"description": "BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.2.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.",
"author":"Flathemes <info@flathemes.com>",
"homepage": "http://bootflat.github.com/",
......