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 665 additions and 33 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
......
1 /* 1 /*
2 * bootflat 2.0.2 2 * bootflat 2.0.2
3 * 3 *
4 * 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. 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.
5 * 5 *
6 * Homepage: http://bootflat.github.com/ 6 * Homepage: http://bootflat.github.com/
7 * 7 *
8 * By @Flathemes <info@flathemes.com> 8 * By @Flathemes <info@flathemes.com>
9 * 9 *
10 * Last modify time: 2014-06-05 10 * Last modify time: 2014-07-09
11 * 11 *
12 * Licensed under the MIT license. Please see LICENSE for more information. 12 * Licensed under the MIT license. Please see LICENSE for more information.
13 * 13 *
...@@ -1065,6 +1065,7 @@ blockquote { ...@@ -1065,6 +1065,7 @@ blockquote {
1065 .checkbox label, .radio label { 1065 .checkbox label, .radio label {
1066 position: relative; 1066 position: relative;
1067 top: 2px; 1067 top: 2px;
1068 padding-left: 5px;
1068 } 1069 }
1069 1070
1070 .icheckbox_flat, 1071 .icheckbox_flat,
...@@ -1179,6 +1180,231 @@ blockquote { ...@@ -1179,6 +1180,231 @@ blockquote {
1179 } 1180 }
1180 1181
1181 /** 1182 /**
1183 * calendar
1184 * --------------------------------------------------
1185 */
1186 .calendar {
1187 padding: 20px;
1188 color: white;
1189 background-color: #fd9883;
1190 border-radius: 4px;
1191 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
1192 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
1193 box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
1194
1195 -webkit-border-radius: 4px;
1196 -moz-border-radius: 4px;
1197 }
1198 .calendar .unit {
1199 float: left;
1200 width: 14.28%;
1201 text-align: center;
1202 }
1203 .calendar .years .prev {
1204 text-align: left;
1205 }
1206 .calendar .years .next {
1207 text-align: right;
1208 }
1209 .calendar .years .prev em, .calendar .years .next em {
1210 position: relative;
1211 display: inline-block;
1212 width: 34px;
1213 height: 34px;
1214 cursor: pointer;
1215 border: 1px solid white;
1216 border-radius: 50%;
1217
1218 -webkit-border-radius: 50%;
1219 -moz-border-radius: 50%;
1220 }
1221 .calendar .years .prev em:before, .calendar .years .next em:before {
1222 position: absolute;
1223 display: block;
1224 width: 0;
1225 height: 0;
1226 margin-top: 6px;
1227 font-size: 0;
1228 content: "";
1229 border-style: solid;
1230 border-width: 7px;
1231 }
1232 .calendar .years .prev em:before {
1233 top: 3px;
1234 left: 4px;
1235 border-color: transparent white transparent transparent;
1236 }
1237 .calendar .years .next em:before {
1238 top: 3px;
1239 left: 13px;
1240 border-color: transparent transparent transparent white;
1241 }
1242 .calendar .years .prev em:hover, .calendar .years .next em:hover, .calendar .years .prev em:active, .calendar .years .next em:active {
1243 border-color: #e9573f;
1244 }
1245 .calendar .years .prev em:hover:before, .calendar .years .prev em:active:before {
1246 border-color: transparent #e9573f transparent transparent;
1247 }
1248 .calendar .years .next em:hover:before, .calendar .years .next em:active:before {
1249 border-color: transparent transparent transparent #e9573f;
1250 }
1251 .calendar .years .monyear {
1252 float: left;
1253 width: 71.42%;
1254 height: 34px;
1255 line-height: 34px;
1256 text-align: center;
1257 }
1258 .calendar .days {
1259 padding-top: 15px;
1260 margin-top: 15px;
1261 border-top: 1px solid #ee7f6d;
1262 }
1263 .calendar .days .unit {
1264 height: 34px;
1265 margin-bottom: 3px;
1266 line-height: 34px;
1267 text-align: center;
1268 }
1269 .calendar .days .unit b {
1270 width: 34px;
1271 height: 34px;
1272 font-weight: normal;
1273 border-radius: 50%;
1274
1275 -webkit-border-radius: 50%;
1276 -moz-border-radius: 50%;
1277 }
1278 .calendar .days .unit:hover b, .calendar .days .unit:active b, .calendar .days .unit.active b {
1279 display: inline-block;
1280 color: #e9573f;
1281 cursor: pointer;
1282 background-color: white;
1283 -webkit-transition: all .2s ease-in-out;
1284 -moz-transition: all .2s ease-in-out;
1285 transition: all .2s ease-in-out;
1286 }
1287 .calendar .days .unit.older b {
1288 width: auto;
1289 height: auto;
1290 color: #e9573f;
1291 cursor: default;
1292 background-color: transparent;
1293 }
1294
1295 /**
1296 * pricing
1297 * --------------------------------------------------
1298 */
1299 .pricing ul {
1300 padding: 0;
1301 list-style: none;
1302 }
1303 .pricing .unit {
1304 position: relative;
1305 display: inline-block;
1306 min-width: 250px;
1307 text-align: center;
1308 border-radius: 4px;
1309 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
1310 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
1311 box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
1312
1313 -webkit-border-radius: 4px;
1314 -moz-border-radius: 4px;
1315 }
1316 .pricing .unit.active {
1317 top: 5px;
1318 z-index: 1;
1319 margin-right: -36px;
1320 margin-left: -36px;
1321 -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .6);
1322 -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .6);
1323 box-shadow: 0 0 8px rgba(0, 0, 0, .6);
1324 }
1325 .pricing .unit.active .price-title h3 {
1326 font-size: 40px;
1327 }
1328 @media screen and (max-width: 767px) {
1329 .pricing .unit {
1330 display: block;
1331 margin-bottom: 20px;
1332 }
1333 .pricing .unit.active {
1334 top: 0;
1335 margin-right: 0;
1336 margin-left: 0;
1337 }
1338 .pricing .unit.active .price-title h3 {
1339 font-size: 30px;
1340 }
1341 }
1342 .pricing .price-title {
1343 padding: 20px 20px 10px;
1344 color: #fff;
1345 border-top-left-radius: 4px;
1346 border-top-right-radius: 4px;
1347
1348 -webkit-border-top-left-radius: 4px;
1349 -moz-border-radius-topleft: 4px;
1350 -webkit-border-top-right-radius: 4px;
1351 -moz-border-radius-topright: 4px;
1352 }
1353 .pricing .price-title h3, .pricing .price-title h3 > p {
1354 margin: 0;
1355 }
1356 .pricing .price-body {
1357 padding: 20px 20px 10px;
1358 }
1359 .pricing .price-body ul {
1360 padding-top: 10px;
1361 }
1362 .pricing .price-body li {
1363 margin-bottom: 10px;
1364 }
1365 .pricing .price-body h4 {
1366 margin: 0;
1367 }
1368 .pricing .price-foot {
1369 padding: 20px;
1370 background-color: #e6e9ed;
1371 border-bottom-right-radius: 4px;
1372 border-bottom-left-radius: 4px;
1373
1374 -webkit-border-bottom-left-radius: 4px;
1375 -moz-border-radius-bottomleft: 4px;
1376 -webkit-border-bottom-right-radius: 4px;
1377 -moz-border-radius-bottomright: 4px;
1378 }
1379 .pricing .price-primary .price-title {
1380 background-color: #4fc1e9;
1381 }
1382 .pricing .price-primary .price-body {
1383 background-color: #d7f1fa;
1384 }
1385 .pricing .price-primary .price-body ul {
1386 border-top: 1px solid #aae1f4;
1387 }
1388 .pricing .price-success .price-title {
1389 background-color: #a0d468;
1390 }
1391 .pricing .price-success .price-body {
1392 background-color: #ebf6df;
1393 }
1394 .pricing .price-success .price-body ul {
1395 border-top: 1px solid #d2ebb7;
1396 }
1397 .pricing .price-warning .price-title {
1398 background-color: #ffce54;
1399 }
1400 .pricing .price-warning .price-body {
1401 background-color: #fffaed;
1402 }
1403 .pricing .price-warning .price-body ul {
1404 border-top: 1px solid #ffebba;
1405 }
1406
1407 /**
1182 * alert 1408 * alert
1183 * -------------------------------------------------- 1409 * --------------------------------------------------
1184 */ 1410 */
......
...@@ -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.
...@@ -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;
......
This diff could not be displayed because it is too large.
...@@ -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": [
......