Skip to content

brainfood / bootflat

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

upload bootflat 2.0.3

1 parent 48001679
Expand all
Inline Side-by-side
Showing 22 changed files with 463 additions and 57 deletions
...@@ -11,9 +11,9 @@ ...@@ -11,9 +11,9 @@
11 11
12 [![Bower version](https://badge.fury.io/bo/Bootflat.png)](http://badge.fury.io/bo/Bootflat) [![NPM version](https://badge.fury.io/js/bootflat.png)](http://badge.fury.io/js/bootflat) [![Build Status](https://travis-ci.org/bootflat/bootflat.github.io.svg?branch=master)](https://travis-ci.org/bootflat/bootflat.github.io) 12 [![Bower version](https://badge.fury.io/bo/Bootflat.png)](http://badge.fury.io/bo/Bootflat) [![NPM version](https://badge.fury.io/js/bootflat.png)](http://badge.fury.io/js/bootflat) [![Build Status](https://travis-ci.org/bootflat/bootflat.github.io.svg?branch=master)](https://travis-ci.org/bootflat/bootflat.github.io)
13 13
14 BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.1.1 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.2.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.5`. 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`.
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
...@@ -27,8 +27,8 @@ For the designers, we offer a [free PSD](https://github.com/bootflat/Bootflat.UI ...@@ -27,8 +27,8 @@ For the designers, we offer a [free PSD](https://github.com/bootflat/Bootflat.UI
27 27
28 ## Features: 28 ## Features:
29 29
30 ### 1. Bootstrap 3.1.1 30 ### 1. Bootstrap 3.2.0
31 Bootflat is built on Bootstrap 3.1.1: the sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development. 31 Bootflat is built on Bootstrap 3.2.0: the sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.
32 32
33 ### 2. HTML5 & CSS3 33 ### 2. HTML5 & CSS3
34 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. 34 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.
...@@ -52,7 +52,7 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/ ...@@ -52,7 +52,7 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/
52 <html> 52 <html>
53 <head> 53 <head>
54 <title>Minimal Bootflat example</title> 54 <title>Minimal Bootflat example</title>
55 <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 55 <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
56 <link rel="stylesheet" href="https://bootflat.github.io/bootflat/css/bootflat.css"> 56 <link rel="stylesheet" href="https://bootflat.github.io/bootflat/css/bootflat.css">
57 </head> 57 </head>
58 58
...@@ -62,7 +62,7 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/ ...@@ -62,7 +62,7 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/
62 62
63 <!-- Bootstrap --> 63 <!-- Bootstrap -->
64 <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 64 <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
65 <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 65 <script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
66 66
67 <!-- Bootflat's JS files.--> 67 <!-- Bootflat's JS files.-->
68 <script src="https://bootflat.github.io/bootflat/js/icheck.min.js"></script> 68 <script src="https://bootflat.github.io/bootflat/js/icheck.min.js"></script>
...@@ -82,6 +82,8 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/ ...@@ -82,6 +82,8 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/
82 82
83 ## Changelog: 83 ## Changelog:
84 84
85 2014/7/9 version 2.0.3 `support bootstrap 3.2.0 and Sass 3.3.9, add wigets: Calendar, Pricing`
86
85 2014/6/5 version 2.0.2 `add wigets: Toggle, Selecter, Stepper` 87 2014/6/5 version 2.0.2 `add wigets: Toggle, Selecter, Stepper`
86 88
87 2014/4/3 version 2.0.1 `support bootstrap 3.1.1` 89 2014/4/3 version 2.0.1 `support bootstrap 3.1.1`
......
1 # Meta data 1 # Meta data
2 name: Bootflat 2 name: Bootflat
3 authors: flathemes 3 authors: flathemes
4 description: BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.1.1 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. 4 description: BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.2.0 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.
5 5
6 # Dependencies 6 # Dependencies
7 pygments: true 7 pygments: true
...@@ -15,5 +15,5 @@ url: http://bootflat.github.io ...@@ -15,5 +15,5 @@ url: http://bootflat.github.io
15 encoding: UTF-8 15 encoding: UTF-8
16 16
17 # Custom vars 17 # Custom vars
18 current_version: 2.0.2 18 current_version: 2.0.3
19 repo: https://github.com/bootflat/bootflat.github.io 19 repo: https://github.com/bootflat/bootflat.github.io
......
...@@ -21,6 +21,8 @@ ...@@ -21,6 +21,8 @@
21 "bootflat/selecter", 21 "bootflat/selecter",
22 "bootflat/checkbox_radio", 22 "bootflat/checkbox_radio",
23 "bootflat/toggle", 23 "bootflat/toggle",
24 "bootflat/calendar",
25 "bootflat/pricing",
24 "bootflat/alert", 26 "bootflat/alert",
25 "bootflat/tab", 27 "bootflat/tab",
26 "bootflat/pill", 28 "bootflat/pill",
......
1 // Variables
2 //------------------------------------------------------
3 $calendar-background-color: $bittersweet-light !default;
4 $calendar-font-color: $white !default;
5 $calendar-current-color: $bittersweet-dark !default;
6
7 $calendar-shadow: 0 1px 2px rgba(0, 0, 0, .2) !default;
8 $calendar-radius: 4px !default;
9
10
11
12 // Exports
13 //------------------------------------------------------
14
15 @include exports("calendar") {
16
17 /**
18 * calendar
19 * --------------------------------------------------
20 */
21 .calendar {
22 padding: 20px;
23 @include radius($type: border-radius, $value: $calendar-radius);
24 color: $white;
25 background-color: lighten($calendar-background-color, 10%);
26 @include box-shadow($value: $calendar-shadow);
27
28 & .unit {
29 float: left;
30 width: 14.28%;
31 text-align: center;
32 }
33
34 & .years {
35
36 & .prev {
37 text-align: left;
38 }
39 & .next {
40 text-align: right;
41 }
42 & .prev em,
43 & .next em {
44 position: relative;
45 display: inline-block;
46 @include radius($type: border-radius, $value: 50%);
47 border: 1px solid $calendar-font-color;
48 width: 34px;
49 height: 34px;
50 cursor: pointer;
51 }
52 & .prev em:before,
53 & .next em:before {
54 position: absolute;
55 display: block;
56 content: "";
57 margin-top: 6px;
58 border-style: solid;
59 border-width: 7px;
60 width: 0;
61 height: 0;
62 font-size: 0;
63 }
64 & .prev em:before {
65 top: 3px;
66 left: 4px;
67 border-color: transparent $calendar-font-color transparent transparent;
68 }
69 & .next em:before {
70 top: 3px;
71 left: 13px;
72 border-color: transparent transparent transparent $calendar-font-color;
73 }
74 & .prev em:hover,
75 & .next em:hover,
76 & .prev em:active,
77 & .next em:active {
78 border-color: $calendar-current-color;
79 }
80 & .prev em:hover:before,
81 & .prev em:active:before {
82 border-color: transparent $calendar-current-color transparent transparent;
83 }
84
85 & .next em:hover:before,
86 & .next em:active:before {
87 border-color: transparent transparent transparent $calendar-current-color;
88 }
89
90 & .monyear {
91 float: left;
92 width: 71.42%;
93 text-align: center;
94 height: 34px;
95 line-height: 34px;
96 }
97 }
98
99 & .days {
100 margin-top: 15px;
101 padding-top: 15px;
102 border-top: 1px solid lighten($calendar-current-color, 10%);
103 & .unit {
104 margin-bottom: 3px;
105 text-align: center;
106 height: 34px;
107 line-height: 34px;
108
109 & b {
110 @include radius($type: border-radius, $value: 50%);
111 font-weight: normal;
112 width: 34px;
113 height: 34px;
114 }
115 &:hover b,
116 &:active b,
117 &.active b {
118 display: inline-block;
119 background-color: $calendar-font-color;
120 color: $calendar-current-color;
121 cursor: pointer;
122 @include transition (all 0.2s ease-in-out);
123 }
124 &.older b {
125 color: $calendar-current-color;
126 background-color: transparent;
127 cursor: default;
128 width: auto;
129 height: auto;
130 }
131 }
132 }
133 }
134 }
...@@ -18,6 +18,7 @@ $img-src: "../bootflat/img/check_flat/default.png" !default; ...@@ -18,6 +18,7 @@ $img-src: "../bootflat/img/check_flat/default.png" !default;
18 .checkbox label, .radio label { 18 .checkbox label, .radio label {
19 position: relative; 19 position: relative;
20 top: 2px; 20 top: 2px;
21 padding-left: 5px;
21 } 22 }
22 .icheckbox_flat, 23 .icheckbox_flat,
23 .iradio_flat { 24 .iradio_flat {
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 //------------------------------------------------------ 2 //------------------------------------------------------
3 $modal-font-color: $darkgray-dark !default; 3 $modal-font-color: $darkgray-dark !default;
4 4
5 $modal-radius: 4px !default; 5 $modal-radius: 4px;
6 $modal-shadow: 0 1px 2px rgba(0, 0, 0, .2) !default; 6 $modal-shadow: 0 1px 2px rgba(0, 0, 0, .2) !default;
7 7
8 8
......
1 // Variables
2 //------------------------------------------------------
3 $pricing-primary: $aqua-light !default;
4 $pricing-success: $grass-light !default;
5 $pricing-warning: $sunflower-light !default;
6
7 $pricing-foot-background-color: $lightgray-dark !default;
8 $pricing-shadow: 0 1px 2px rgba(0, 0, 0, .2) !default;
9 $pricing-shadow-active: 0 0 8px rgba(0, 0, 0, .6) !default;
10 $pricing-radius: 4px !default;
11
12
13
14
15 // Exports
16 //------------------------------------------------------
17
18 @include exports("pricing") {
19
20 /**
21 * pricing
22 * --------------------------------------------------
23 */
24 .pricing {
25
26 & ul {
27 list-style: none;
28 padding: 0;
29 }
30
31 & .unit {
32 position: relative;
33 display: inline-block;
34 text-align: center;
35 min-width: 250px;
36 @include radius($type: border-radius, $value: $pricing-radius);
37 @include box-shadow($value: $pricing-shadow);
38
39 &.active {
40 top: 5px;
41 margin-left: -36px;
42 margin-right: -36px;
43 z-index: 1;
44 @include box-shadow($value: $pricing-shadow-active);
45
46 & .price-title h3 {
47 font-size: 40px;
48 }
49 }
50 }
51
52 @media screen and (max-width: 767px) {
53 & .unit {
54 display: block;
55 margin-bottom: 20px;
56
57 &.active {
58 top: 0;
59 margin-left: 0;
60 margin-right: 0;
61
62 & .price-title h3 {
63 font-size: 30px;
64 }
65 }
66 }
67 }
68
69 & .price-title {
70 padding: 20px 20px 10px;
71 @include radius($type: border-top-left-radius, $value: $pricing-radius);
72 @include radius($type: border-top-right-radius, $value: $pricing-radius);
73 color: #FFF;
74
75 & h3,
76 & h3 > p {
77 margin: 0;
78 }
79 }
80
81 & .price-body {
82 padding: 20px 20px 10px;
83
84 & ul {
85 padding-top: 10px;
86 }
87
88 & li {
89 margin-bottom: 10px;
90 }
91
92 & h4 {
93 margin: 0;
94 }
95 }
96
97 & .price-foot {
98 padding: 20px;
99 @include radius($type: border-bottom-left-radius, $value: $pricing-radius);
100 @include radius($type: border-bottom-right-radius, $value: $pricing-radius);
101
102 background-color: $pricing-foot-background-color;
103 }
104
105 & .price-primary {
106 & .price-title {
107 background-color: $pricing-primary;
108 }
109 & .price-body {
110 background-color: lighten($pricing-primary, 30%);
111 & ul {
112 border-top: 1px solid lighten($pricing-primary, 20%);
113 }
114 }
115 }
116 & .price-success {
117 & .price-title {
118 background-color: $pricing-success;
119 }
120 & .price-body {
121 background-color: lighten($pricing-success, 30%);
122 & ul {
123 border-top: 1px solid lighten($pricing-success, 20%);
124 }
125 }
126 }
127 & .price-warning {
128 & .price-title {
129 background-color: $pricing-warning;
130 }
131 & .price-body {
132 background-color: lighten($pricing-warning, 30%);
133 & ul {
134 border-top: 1px solid lighten($pricing-warning, 20%);
135 }
136 }
137 }
138 }
139 }
1 { 1 {
2 "name": "Bootflat", 2 "name": "Bootflat",
3 "version": "2.0.2", 3 "version": "2.0.3",
4 "homepage": "http://bootflat.github.io", 4 "homepage": "http://bootflat.github.io",
5 "authors": [ 5 "authors": [
6 "flathemes <info@flathemes.com>" 6 "flathemes <info@flathemes.com>"
7 ], 7 ],
8 "description": "BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.1.1 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.", 8 "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.",
9 "repository": { 9 "repository": {
10 "type": "git", 10 "type": "git",
11 "url": "https://github.com/bootflat/bootflat.github.io.git" 11 "url": "https://github.com/bootflat/bootflat.github.io.git"
......
1 { 1 {
2 "name": "bootflat/bootflat", 2 "name": "bootflat/bootflat",
3 "description": "An open source Flat UI KIT based on Bootstrap (3.1.1). A faster, easier and less repetitive way for web developers to create elegant web apps.", 3 "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.",
4 "version": "2.0.2", 4 "version": "2.0.3",
5 "keywords": [ 5 "keywords": [
6 "mobile", 6 "mobile",
7 "html5", 7 "html5",
......
This diff could not be displayed because it is too large.
...@@ -6,18 +6,18 @@ body { ...@@ -6,18 +6,18 @@ body {
6 } 6 }
7 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { 7 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
8 /*font-family: 'Lato', sans-serif !important;*/ 8 /*font-family: 'Lato', sans-serif !important;*/
9 font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; 9 font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
10 } 10 }
11 /* ---------------------------------- 11 /* ----------------------------------
12 * home 12 * home
13 * ---------------------------------- */ 13 * ---------------------------------- */
14 .home { 14 .home {
15 background: url(../img/index.png) no-repeat 50% 100px; 15 background: url(../img/index.png) no-repeat 50% 100px;
16 } 16 }
17 @media (max-width: 767px) { 17 @media (max-width: 767px) {
18 .home { 18 .home {
19 background: none; 19 background: none;
20 } 20 }
21 } 21 }
22 /* ---------------------------------- 22 /* ----------------------------------
23 * icons 23 * icons
...@@ -94,10 +94,10 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -94,10 +94,10 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
94 .index { 94 .index {
95 padding-top: 0; 95 padding-top: 0;
96 min-height: 600px; 96 min-height: 600px;
97 } 97 }
98 .index .download-link .btn { 98 .index .download-link .btn {
99 padding: 15px; 99 padding: 15px;
100 } 100 }
101 } 101 }
102 /* ---------------------------------- 102 /* ----------------------------------
103 * social 103 * social
...@@ -117,7 +117,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -117,7 +117,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
117 vertical-align: top; 117 vertical-align: top;
118 } 118 }
119 .social a { 119 .social a {
120 color: #50c1e9 !important; 120 color: #50c1e9 !important;
121 } 121 }
122 .social .github-watch { 122 .social .github-watch {
123 width: 105px; 123 width: 105px;
...@@ -145,7 +145,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -145,7 +145,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
145 .desc a:hover, 145 .desc a:hover,
146 .desc a:active { 146 .desc a:active {
147 color: #50c1e9; 147 color: #50c1e9;
148 text-decoration: none; 148 text-decoration: none;
149 } 149 }
150 .desc .desc__introduces { 150 .desc .desc__introduces {
151 border-top: 1px dashed #AAB2BD ; 151 border-top: 1px dashed #AAB2BD ;
...@@ -194,8 +194,8 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -194,8 +194,8 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
194 } 194 }
195 .desc .desc__features p { 195 .desc .desc__features p {
196 font-size: 16px; 196 font-size: 16px;
197 color: #888; 197 color: #888;
198 line-height: 26px; 198 line-height: 26px;
199 } 199 }
200 @media (max-width: 767px) { 200 @media (max-width: 767px) {
201 .desc .desc__introduces h3 { 201 .desc .desc__introduces h3 {
...@@ -221,7 +221,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -221,7 +221,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
221 .desc .desc__features .col-md-6 { 221 .desc .desc__features .col-md-6 {
222 padding: 0 15px; 222 padding: 0 15px;
223 text-align: center; 223 text-align: center;
224 } 224 }
225 } 225 }
226 /* ---------------------------------- 226 /* ----------------------------------
227 * docs 227 * docs
...@@ -237,7 +237,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -237,7 +237,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
237 @media (max-width: 768px) { 237 @media (max-width: 768px) {
238 .docs-header { 238 .docs-header {
239 padding-top: 0; 239 padding-top: 0;
240 } 240 }
241 } 241 }
242 /* ---------------------------------- 242 /* ----------------------------------
243 * advertisement 243 * advertisement
...@@ -287,7 +287,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -287,7 +287,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
287 * ---------------------------------- */ 287 * ---------------------------------- */
288 .navbar-custom { 288 .navbar-custom {
289 position: fixed; 289 position: fixed;
290 top: 0; 290 top: 0;
291 left: 0; 291 left: 0;
292 border: none; 292 border: none;
293 border-radius: 0; 293 border-radius: 0;
...@@ -299,13 +299,13 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -299,13 +299,13 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
299 display: block; 299 display: block;
300 color: #50c1e9; 300 color: #50c1e9;
301 } 301 }
302 .navbar-custom .nav li a:focus, 302 .navbar-custom .nav li a:focus,
303 .navbar-custom .nav li a:hover { 303 .navbar-custom .nav li a:hover {
304 color: #50c1e9; 304 color: #50c1e9;
305 } 305 }
306 .navbar-custom .nav li a:active, 306 .navbar-custom .nav li a:active,
307 .navbar-custom .nav li a.current { 307 .navbar-custom .nav li a.current {
308 border-bottom: 3px solid #50c1e9; 308 border-bottom: 3px solid #50c1e9;
309 } 309 }
310 .navbar-custom .navbar-toggle { 310 .navbar-custom .navbar-toggle {
311 position: relative; 311 position: relative;
...@@ -314,7 +314,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -314,7 +314,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
314 } 314 }
315 .navbar-custom .navbar-toggle:hover, 315 .navbar-custom .navbar-toggle:hover,
316 .navbar-custom .navbar-toggle:focus { 316 .navbar-custom .navbar-toggle:focus {
317 background-color: #50c1e9; 317 background-color: #50c1e9;
318 } 318 }
319 .navbar-custom .navbar-toggle .icon-bar { 319 .navbar-custom .navbar-toggle .icon-bar {
320 background-color: rgba(255, 255, 255, .9); 320 background-color: rgba(255, 255, 255, .9);
...@@ -328,22 +328,22 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -328,22 +328,22 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
328 .navbar-custom .navbar-brand:hover, 328 .navbar-custom .navbar-brand:hover,
329 .navbar-custom .navbar-brand:active { 329 .navbar-custom .navbar-brand:active {
330 opacity: 1; 330 opacity: 1;
331 filter:alpha(opacity=100); 331 filter:alpha(opacity=100);
332 } 332 }
333 .navbar-default .navbar-collapse { 333 .navbar-default .navbar-collapse {
334 border-color: #e7e7e7; 334 border-color: #e7e7e7;
335 } 335 }
336 @media (max-width: 992px) { 336 @media (max-width: 992px) {
337 .navbar-custom .navbar-brand { 337 .navbar-custom .navbar-brand {
338 width: 63px; 338 width: 63px;
339 overflow: hidden; 339 overflow: hidden;
340 } 340 }
341 } 341 }
342 @media (max-width: 767px) { 342 @media (max-width: 767px) {
343 .navbar-custom { 343 .navbar-custom {
344 position: relative; 344 position: relative;
345 top: 0; 345 top: 0;
346 } 346 }
347 .navbar-custom .navbar-nav > li > a:hover, 347 .navbar-custom .navbar-nav > li > a:hover,
348 .navbar-custom .navbar-nav > li > a:focus { 348 .navbar-custom .navbar-nav > li > a:focus {
349 color: #fff; 349 color: #fff;
...@@ -410,7 +410,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -410,7 +410,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
410 padding-right: 400px; 410 padding-right: 400px;
411 } 411 }
412 @media (max-width: 991px) { 412 @media (max-width: 991px) {
413 .details { width: 100%; } 413 .details { width: 100%; }
414 } 414 }
415 @media (max-width: 767px) { 415 @media (max-width: 767px) {
416 .details { padding: 0 15px; } 416 .details { padding: 0 15px; }
...@@ -497,7 +497,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -497,7 +497,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
497 width: 200px; 497 width: 200px;
498 } 498 }
499 .example-popover .popover { 499 .example-popover .popover {
500 position: relative; 500 position: relative;
501 } 501 }
502 @media (max-width: 960px) { 502 @media (max-width: 960px) {
503 .tooltip-demo [class*="col-"] { 503 .tooltip-demo [class*="col-"] {
...@@ -509,7 +509,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -509,7 +509,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
509 width: 160px; 509 width: 160px;
510 } 510 }
511 } 511 }
512 .example-popover [class*="col-"]:nth-of-type(1) .popover { 512 .example-popover [class*="col-"]:nth-of-type(1) .popover {
513 margin-top: 0; 513 margin-top: 0;
514 } 514 }
515 .example-popover [class*="col-"]:nth-of-type(3) .popover, 515 .example-popover [class*="col-"]:nth-of-type(3) .popover,
...@@ -650,9 +650,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -650,9 +650,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
650 height: 15px; 650 height: 15px;
651 } 651 }
652 } 652 }
653 /* ----------------------------------
654 * site-footer
655 * ---------------------------------- */
656 .site-footer { 653 .site-footer {
657 position: relative; 654 position: relative;
658 z-index: 2000; 655 z-index: 2000;
...@@ -667,7 +664,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -667,7 +664,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
667 .site-footer a:hover, 664 .site-footer a:hover,
668 .site-footer a:active { 665 .site-footer a:active {
669 color: #50c1e9; 666 color: #50c1e9;
670 text-decoration: none; 667 text-decoration: none;
671 } 668 }
672 .site-footer .row .col-md-4 { 669 .site-footer .row .col-md-4 {
673 margin-bottom: 20px; 670 margin-bottom: 20px;
...@@ -685,13 +682,13 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -685,13 +682,13 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
685 font-size: 14px; 682 font-size: 14px;
686 } 683 }
687 .site-footer hr { 684 .site-footer hr {
688 margin: 20px 0; 685 margin: 20px 0;
689 border: none; 686 border: none;
690 height: 1px; 687 height: 1px;
691 width: 100%; 688 width: 100%;
692 } 689 }
693 .site-footer hr.dashed { 690 .site-footer hr.dashed {
694 border-top: 1px dashed #ccc; 691 border-top: 1px dashed #ccc;
695 } 692 }
696 .site-footer .icon { 693 .site-footer .icon {
697 margin-right: 10px; 694 margin-right: 10px;
......
This diff could not be displayed because it is too large.
...@@ -972,7 +972,7 @@ ...@@ -972,7 +972,7 @@
972 <!--Toggle 972 <!--Toggle
973 ================================================== --> 973 ================================================== -->
974 <div class="example"> 974 <div class="example">
975 <h2 class="example-title">Toggle <span>(Used for <code>checkbox</code> or <code>radio</code>)<span></h2> 975 <h2 class="example-title">Toggle <span>(Used for <code>checkbox</code> or <code>radio</code>)<span></h2>
976 <div class="row"> 976 <div class="row">
977 <div class="col-md-4"> 977 <div class="col-md-4">
978 <label class="toggle"> 978 <label class="toggle">
...@@ -993,6 +993,137 @@ ...@@ -993,6 +993,137 @@
993 </label> 993 </label>
994 </div> 994 </div>
995 </div> 995 </div>
996 <!-- Calendar
997 ================================================== -->
998 <div class="example">
999 <div class="row">
1000 <h2 class="example-title">Calendar and Pricing</span></h2>
1001 <div class="col-md-4">
1002 <div class="calendar">
1003 <div class="years clearfix">
1004 <div class="unit prev"><em></em></div>
1005 <div class="monyear">MAY 2014</div>
1006 <div class="unit next"><em></em></div>
1007 </div>
1008 <div class="days">
1009 <div class="clearfix">
1010 <div class="unit">SU</div>
1011 <div class="unit">MO</div>
1012 <div class="unit">TU</div>
1013 <div class="unit">WE</div>
1014 <div class="unit">TH</div>
1015 <div class="unit">FR</div>
1016 <div class="unit">SA</div>
1017 </div>
1018 <div class="clearfix">
1019 <div class="unit older"><b>27</b></div>
1020 <div class="unit older"><b>28</b></div>
1021 <div class="unit older"><b>29</b></div>
1022 <div class="unit older"><b>30</b></div>
1023 <div class="unit"><b>1</b></div>
1024 <div class="unit"><b>2</b></div>
1025 <div class="unit"><b>3</b></div>
1026 <div class="unit"><b>4</b></div>
1027 <div class="unit"><b>5</b></div>
1028 <div class="unit"><b>6</b></div>
1029 <div class="unit"><b>7</b></div>
1030 <div class="unit"><b>8</b></div>
1031 <div class="unit"><b>9</b></div>
1032 <div class="unit"><b>10</b></div>
1033 <div class="unit"><b>11</b></div>
1034 <div class="unit"><b>12</b></div>
1035 <div class="unit"><b>13</b></div>
1036 <div class="unit active"><b>14</b></div>
1037 <div class="unit"><b>15</b></div>
1038 <div class="unit"><b>16</b></div>
1039 <div class="unit"><b>17</b></div>
1040 <div class="unit"><b>18</b></div>
1041 <div class="unit"><b>19</b></div>
1042 <div class="unit"><b>20</b></div>
1043 <div class="unit"><b>21</b></div>
1044 <div class="unit"><b>22</b></div>
1045 <div class="unit"><b>23</b></div>
1046 <div class="unit"><b>24</b></div>
1047 <div class="unit"><b>25</b></div>
1048 <div class="unit"><b>26</b></div>
1049 <div class="unit"><b>27</b></div>
1050 <div class="unit"><b>28</b></div>
1051 <div class="unit"><b>29</b></div>
1052 <div class="unit"><b>30</b></div>
1053 <div class="unit"><b>31</b></div>
1054 <div class="unit older"><b>1</b></div>
1055 <div class="unit older"><b>2</b></div>
1056 <div class="unit older"><b>3</b></div>
1057 <div class="unit older"><b>4</b></div>
1058 <div class="unit older"><b>5</b></div>
1059 <div class="unit older"><b>6</b></div>
1060 <div class="unit older"><b>7</b></div>
1061 </div>
1062 </div>
1063 </div>
1064 </div>
1065 <div class="col-md-8">
1066 <div class="pricing">
1067 <ul>
1068 <li class="unit price-primary">
1069 <div class="price-title">
1070 <h3>$599</h3>
1071 <p>per month</p>
1072 </div>
1073 <div class="price-body">
1074 <h4>Basic</h4>
1075 <p>Lots of clients &amp; users</p>
1076 <ul>
1077 <li>250 SKU's</li>
1078 <li>1 GB Storage</li>
1079 <li>3,5% transaction fee</li>
1080 </ul>
1081 </div>
1082 <div class="price-foot">
1083 <button type="button" class="btn btn-primary">Try a Week</button>
1084 </div>
1085 </li>
1086 <li class="unit price-success active">
1087 <div class="price-title">
1088 <h3>$299</h3>
1089 <p>per month</p>
1090 </div>
1091 <div class="price-body">
1092 <h4>Premium</h4>
1093 <p>Lots of clients &amp; users</p>
1094 <ul>
1095 <li>2500 SKU's</li>
1096 <li>5 GB Storage</li>
1097 <li>1,5% transaction fee</li>
1098 </ul>
1099 </div>
1100 <div class="price-foot">
1101 <button type="button" class="btn btn-success">Buy Now</button>
1102 </div>
1103 </li>
1104 <li class="unit price-warning">
1105 <div class="price-title">
1106 <h3>$499</h3>
1107 <p>per month</p>
1108 </div>
1109 <div class="price-body">
1110 <h4>Unlimited</h4>
1111 <p>Lots of clients &amp; users</p>
1112 <ul>
1113 <li>Unlimited SKU's</li>
1114 <li>20 GB Storage</li>
1115 <li>1% transaction fee</li>
1116 </ul>
1117 </div>
1118 <div class="price-foot">
1119 <button type="button" class="btn btn-warning">Subscribe</button>
1120 </div>
1121 </li>
1122 </ul>
1123 </div>
1124 </div>
1125 </div>
1126 </div>
996 <!-- Alerts 1127 <!-- Alerts
997 ================================================== --> 1128 ================================================== -->
998 <div class="example"> 1129 <div class="example">
......
...@@ -73,8 +73,8 @@ ...@@ -73,8 +73,8 @@
73 <dl> 73 <dl>
74 <dt>OOCSS Approach</dt> 74 <dt>OOCSS Approach</dt>
75 <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> 75 <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>
76 <dt>Bootstrap 3.1.1 Support</dt> 76 <dt>Bootstrap 3.2.0 Support</dt>
77 <dd>Now Bootflat is supporting Bootstrap 3.1.1 as well.</dd> 77 <dd>Now Bootflat is supporting Bootstrap 3.2.0 as well.</dd>
78 <dt>Configurable Color Scheme</dt> 78 <dt>Configurable Color Scheme</dt>
79 <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> 79 <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>
80 <dt>Easy Installation</dt> 80 <dt>Easy Installation</dt>
...@@ -89,10 +89,10 @@ ...@@ -89,10 +89,10 @@
89 <h3>Download</h3> 89 <h3>Download</h3>
90 <p>Download the latest official release of Bootflat and get started!</p> 90 <p>Download the latest official release of Bootflat and get started!</p>
91 <ul class="item__infos"> 91 <ul class="item__infos">
92 <li>Version 2.0.2</li> 92 <li>Version 2.0.3</li>
93 <li>Released April 03 2014</li> 93 <li>Released July 09 2014</li>
94 </ul> 94 </ul>
95 <p><a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat Framework (v2.0.2)</a></p> 95 <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>
96 </div> 96 </div>
97 <!-- 97 <!--
98 ================================================== --> 98 ================================================== -->
...@@ -160,13 +160,13 @@ ...@@ -160,13 +160,13 @@
160 ================================================== --> 160 ================================================== -->
161 <div class="docs-article docs--start" id="css-sass"> 161 <div class="docs-article docs--start" id="css-sass">
162 <h3>CSS/SASS</h3> 162 <h3>CSS/SASS</h3>
163 <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.5</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> 163 <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>
164 </div> 164 </div>
165 <!-- Browser Support 165 <!-- Browser Support
166 ================================================== --> 166 ================================================== -->
167 <div class="docs-article docs--start" id="browser-support"> 167 <div class="docs-article docs--start" id="browser-support">
168 <h3>Browser Support</h3> 168 <h3>Browser Support</h3>
169 <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.2, that means UIWebView for E8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.</p> 169 <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>
170 </div> 170 </div>
171 <!-- Free PSD 171 <!-- Free PSD
172 ================================================== --> 172 ================================================== -->
......
...@@ -47,12 +47,12 @@ ...@@ -47,12 +47,12 @@
47 <h1> 47 <h1>
48 <img src="img/logo-index.png" alt="Bootflat: Advanced HTML5 Hybrid Mobile App Framework"> 48 <img src="img/logo-index.png" alt="Bootflat: Advanced HTML5 Hybrid Mobile App Framework">
49 </h1> 49 </h1>
50 <h2>BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.1.1 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> 50 <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>
51 <h3>Compatible Browsers: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.</h3> 51 <h3>Compatible Browsers: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.</h3>
52 <p class="download-link"> 52 <p class="download-link">
53 <a class="btn btn-primary" href="https://github.com/Bootflat/Bootflat.github.io/archive/master.zip">Download (Version 2.0.2)</a> 53 <a class="btn btn-primary" href="https://github.com/Bootflat/Bootflat.github.io/archive/master.zip">Download (Version 2.0.3)</a>
54 </p> 54 </p>
55 <p class="version-text">MIT Licensed - Version 2.0.2</p> 55 <p class="version-text">MIT Licensed - Version 2.0.3</p>
56 <p class="learn-more Bootflat"> 56 <p class="learn-more Bootflat">
57 <a href="#learn-more">Learn more <i class="icon" data-icon="&#xe035"></i></a> 57 <a href="#learn-more">Learn more <i class="icon" data-icon="&#xe035"></i></a>
58 </p> 58 </p>
...@@ -76,14 +76,14 @@ ...@@ -76,14 +76,14 @@
76 <div id="learn-more" class="desc container"> 76 <div id="learn-more" class="desc container">
77 <div class="desc__introduces"> 77 <div class="desc__introduces">
78 <h3>Designed for everyone, everywhere.</h3> 78 <h3>Designed for everyone, everywhere.</h3>
79 <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.5</a>.</p> 79 <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>
80 </div> 80 </div>
81 <div class="desc__features"> 81 <div class="desc__features">
82 <div class="row"> 82 <div class="row">
83 <div class="col-md-6"> 83 <div class="col-md-6">
84 <div class="features__photo"><img src="img/feature-bootstrap.png" /></div> 84 <div class="features__photo"><img src="img/feature-bootstrap.png" /></div>
85 <h4>Bootstrap 3.1.1</h4> 85 <h4>Bootstrap 3.2.0</h4>
86 <p>Bootflat is built on Bootstrap 3.1.1: the sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p> 86 <p>Bootflat is built on Bootstrap 3.2.0: the sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>
87 </div> 87 </div>
88 <div class="col-md-6"> 88 <div class="col-md-6">
89 <div class="features__photo"><img src="img/feature-css.png" /></div> 89 <div class="features__photo"><img src="img/feature-css.png" /></div>
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
1 { 1 {
2 "name": "bootflat", 2 "name": "bootflat",
3 "private": false, 3 "private": false,
4 "version": "2.0.2", 4 "version": "2.0.3",
5 "description": "BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.1.1 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.2.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": [
......