Skip to content
GitLab
Commit 5ad5dde1 authored by Jacob Thornton's avatar Jacob Thornton
Browse files

rewrite the grid system. Clean shit up tons - only generate 12 columns by... 

rewrite the grid system. Clean shit up tons - only generate 12 columns by default - custom builder will do differently if you request it.
parent e3ae5175
Hide whitespace changes
Inline Side-by-side
Showing
with 137 additions and 647 deletions
+137 -647
docs/assets/bootstrap.zip
+ 0
- 0
View file @ 5ad5dde1
No preview for this file type
docs/assets/css/bootstrap-responsive.css
+ 0
- 282
View file @ 5ad5dde1
......@@ -213,42 +213,6 @@
.span12 {
width: 724px;
}
.span13 {
width: 786px;
}
.span14 {
width: 848px;
}
.span15 {
width: 910px;
}
.span16 {
width: 972px;
}
.span17 {
width: 1034px;
}
.span18 {
width: 1096px;
}
.span19 {
width: 1158px;
}
.span20 {
width: 1220px;
}
.span21 {
width: 1282px;
}
.span22 {
width: 1344px;
}
.span23 {
width: 1406px;
}
.span24 {
width: 1468px;
}
.offset1 {
margin-left: 82px;
}
......@@ -285,39 +249,6 @@
.offset12 {
margin-left: 764px;
}
.offset13 {
margin-left: 826px;
}
.offset14 {
margin-left: 888px;
}
.offset15 {
margin-left: 950px;
}
.offset16 {
margin-left: 1012px;
}
.offset17 {
margin-left: 1074px;
}
.offset18 {
margin-left: 1136px;
}
.offset19 {
margin-left: 1198px;
}
.offset20 {
margin-left: 1260px;
}
.offset21 {
margin-left: 1322px;
}
.offset22 {
margin-left: 1384px;
}
.offset23 {
margin-left: 1446px;
}
.row-fluid {
width: 100%;
*zoom: 1;
......@@ -372,42 +303,6 @@
.row-fluid > .span12 {
width: 99.999999993%;
}
.row-fluid > .span13 {
width: 108.563535904%;
}
.row-fluid > .span14 {
width: 117.12707181500001%;
}
.row-fluid > .span15 {
width: 125.690607726%;
}
.row-fluid > .span16 {
width: 134.254143637%;
}
.row-fluid > .span17 {
width: 142.817679548%;
}
.row-fluid > .span18 {
width: 151.381215459%;
}
.row-fluid > .span19 {
width: 159.94475137%;
}
.row-fluid > .span20 {
width: 168.508287281%;
}
.row-fluid > .span21 {
width: 177.071823192%;
}
.row-fluid > .span22 {
width: 185.635359103%;
}
.row-fluid > .span23 {
width: 194.19889501400002%;
}
.row-fluid > .span24 {
width: 202.762430925%;
}
input.span1, textarea.span1, .uneditable-input.span1 {
width: 32px;
}
......@@ -444,42 +339,6 @@
input.span12, textarea.span12, .uneditable-input.span12 {
width: 714px;
}
input.span13, textarea.span13, .uneditable-input.span13 {
width: 776px;
}
input.span14, textarea.span14, .uneditable-input.span14 {
width: 838px;
}
input.span15, textarea.span15, .uneditable-input.span15 {
width: 900px;
}
input.span16, textarea.span16, .uneditable-input.span16 {
width: 962px;
}
input.span17, textarea.span17, .uneditable-input.span17 {
width: 1024px;
}
input.span18, textarea.span18, .uneditable-input.span18 {
width: 1086px;
}
input.span19, textarea.span19, .uneditable-input.span19 {
width: 1148px;
}
input.span20, textarea.span20, .uneditable-input.span20 {
width: 1210px;
}
input.span21, textarea.span21, .uneditable-input.span21 {
width: 1272px;
}
input.span22, textarea.span22, .uneditable-input.span22 {
width: 1334px;
}
input.span23, textarea.span23, .uneditable-input.span23 {
width: 1396px;
}
input.span24, textarea.span24, .uneditable-input.span24 {
width: 1458px;
}
}
@media (max-width: 979px) {
body {
......@@ -646,42 +505,6 @@
.span12 {
width: 1170px;
}
.span13 {
width: 1270px;
}
.span14 {
width: 1370px;
}
.span15 {
width: 1470px;
}
.span16 {
width: 1570px;
}
.span17 {
width: 1670px;
}
.span18 {
width: 1770px;
}
.span19 {
width: 1870px;
}
.span20 {
width: 1970px;
}
.span21 {
width: 2070px;
}
.span22 {
width: 2170px;
}
.span23 {
width: 2270px;
}
.span24 {
width: 2370px;
}
.offset1 {
margin-left: 130px;
}
......@@ -718,39 +541,6 @@
.offset12 {
margin-left: 1230px;
}
.offset13 {
margin-left: 1330px;
}
.offset14 {
margin-left: 1430px;
}
.offset15 {
margin-left: 1530px;
}
.offset16 {
margin-left: 1630px;
}
.offset17 {
margin-left: 1730px;
}
.offset18 {
margin-left: 1830px;
}
.offset19 {
margin-left: 1930px;
}
.offset20 {
margin-left: 2030px;
}
.offset21 {
margin-left: 2130px;
}
.offset22 {
margin-left: 2230px;
}
.offset23 {
margin-left: 2330px;
}
.row-fluid {
width: 100%;
*zoom: 1;
......@@ -805,42 +595,6 @@
.row-fluid > .span12 {
width: 100%;
}
.row-fluid > .span13 {
width: 108.547008547%;
}
.row-fluid > .span14 {
width: 117.09401709400001%;
}
.row-fluid > .span15 {
width: 125.64102564100001%;
}
.row-fluid > .span16 {
width: 134.18803418800002%;
}
.row-fluid > .span17 {
width: 142.735042735%;
}
.row-fluid > .span18 {
width: 151.282051282%;
}
.row-fluid > .span19 {
width: 159.82905982900002%;
}
.row-fluid > .span20 {
width: 168.376068376%;
}
.row-fluid > .span21 {
width: 176.923076923%;
}
.row-fluid > .span22 {
width: 185.47008547000001%;
}
.row-fluid > .span23 {
width: 194.017094017%;
}
.row-fluid > .span24 {
width: 202.564102564%;
}
input.span1, textarea.span1, .uneditable-input.span1 {
width: 60px;
}
......@@ -877,42 +631,6 @@
input.span12, textarea.span12, .uneditable-input.span12 {
width: 1160px;
}
input.span13, textarea.span13, .uneditable-input.span13 {
width: 1260px;
}
input.span14, textarea.span14, .uneditable-input.span14 {
width: 1360px;
}
input.span15, textarea.span15, .uneditable-input.span15 {
width: 1460px;
}
input.span16, textarea.span16, .uneditable-input.span16 {
width: 1560px;
}
input.span17, textarea.span17, .uneditable-input.span17 {
width: 1660px;
}
input.span18, textarea.span18, .uneditable-input.span18 {
width: 1760px;
}
input.span19, textarea.span19, .uneditable-input.span19 {
width: 1860px;
}
input.span20, textarea.span20, .uneditable-input.span20 {
width: 1960px;
}
input.span21, textarea.span21, .uneditable-input.span21 {
width: 2060px;
}
input.span22, textarea.span22, .uneditable-input.span22 {
width: 2160px;
}
input.span23, textarea.span23, .uneditable-input.span23 {
width: 2260px;
}
input.span24, textarea.span24, .uneditable-input.span24 {
width: 2360px;
}
.thumbnails {
margin-left: -30px;
}
......
docs/assets/css/bootstrap.css
+ 0
- 141
View file @ 5ad5dde1
......@@ -173,42 +173,6 @@ a:hover {
.span12 {
width: 940px;
}
.span13 {
width: 1020px;
}
.span14 {
width: 1100px;
}
.span15 {
width: 1180px;
}
.span16 {
width: 1260px;
}
.span17 {
width: 1340px;
}
.span18 {
width: 1420px;
}
.span19 {
width: 1500px;
}
.span20 {
width: 1580px;
}
.span21 {
width: 1660px;
}
.span22 {
width: 1740px;
}
.span23 {
width: 1820px;
}
.span24 {
width: 1900px;
}
.offset1 {
margin-left: 100px;
}
......@@ -245,39 +209,6 @@ a:hover {
.offset12 {
margin-left: 980px;
}
.offset13 {
margin-left: 1060px;
}
.offset14 {
margin-left: 1140px;
}
.offset15 {
margin-left: 1220px;
}
.offset16 {
margin-left: 1300px;
}
.offset17 {
margin-left: 1380px;
}
.offset18 {
margin-left: 1460px;
}
.offset19 {
margin-left: 1540px;
}
.offset20 {
margin-left: 1620px;
}
.offset21 {
margin-left: 1700px;
}
.offset22 {
margin-left: 1780px;
}
.offset23 {
margin-left: 1860px;
}
.row-fluid {
width: 100%;
*zoom: 1;
......@@ -332,42 +263,6 @@ a:hover {
.row-fluid > .span12 {
width: 99.99999998999999%;
}
.row-fluid > .span13 {
width: 108.510638287%;
}
.row-fluid > .span14 {
width: 117.02127658399999%;
}
.row-fluid > .span15 {
width: 125.531914881%;
}
.row-fluid > .span16 {
width: 134.042553178%;
}
.row-fluid > .span17 {
width: 142.553191475%;
}
.row-fluid > .span18 {
width: 151.063829772%;
}
.row-fluid > .span19 {
width: 159.57446806899998%;
}
.row-fluid > .span20 {
width: 168.085106366%;
}
.row-fluid > .span21 {
width: 176.595744663%;
}
.row-fluid > .span22 {
width: 185.10638296000002%;
}
.row-fluid > .span23 {
width: 193.617021257%;
}
.row-fluid > .span24 {
width: 202.127659554%;
}
.container {
margin-left: auto;
margin-right: auto;
......@@ -867,42 +762,6 @@ input.span11, textarea.span11, .uneditable-input.span11 {
input.span12, textarea.span12, .uneditable-input.span12 {
width: 930px;
}
input.span13, textarea.span13, .uneditable-input.span13 {
width: 1010px;
}
input.span14, textarea.span14, .uneditable-input.span14 {
width: 1090px;
}
input.span15, textarea.span15, .uneditable-input.span15 {
width: 1170px;
}
input.span16, textarea.span16, .uneditable-input.span16 {
width: 1250px;
}
input.span17, textarea.span17, .uneditable-input.span17 {
width: 1330px;
}
input.span18, textarea.span18, .uneditable-input.span18 {
width: 1410px;
}
input.span19, textarea.span19, .uneditable-input.span19 {
width: 1490px;
}
input.span20, textarea.span20, .uneditable-input.span20 {
width: 1570px;
}
input.span21, textarea.span21, .uneditable-input.span21 {
width: 1650px;
}
input.span22, textarea.span22, .uneditable-input.span22 {
width: 1730px;
}
input.span23, textarea.span23, .uneditable-input.span23 {
width: 1810px;
}
input.span24, textarea.span24, .uneditable-input.span24 {
width: 1890px;
}
input[disabled],
select[disabled],
textarea[disabled],
......
less/forms.less
+ 3
- 3
View file @ 5ad5dde1
......@@ -253,7 +253,7 @@ textarea[class*="span"],
// GRID SIZING FOR INPUTS
// ----------------------
#inputGridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
#grid > .input (@gridColumnWidth, @gridGutterWidth);
......@@ -301,7 +301,7 @@ select:focus:required:invalid {
border-color: #ee5f5b;
&:focus {
border-color: darken(#ee5f5b, 10%);
.box-shadow(0 0 6px lighten(#ee5f5b, 20%));
.box-shadow(0 0 6px lighten(#ee5f5b, 20%));
}
}
......@@ -410,7 +410,7 @@ select:focus:required:invalid {
}
.uneditable-input {
border-left-color: #eee;
border-right-color: #ccc;
border-right-color: #ccc;
}
.add-on {
margin-right: 0;
......
less/grid.less
+ 2
- 5
View file @ 5ad5dde1
// GRID SYSTEM
// -----------
// Fixed (940px)
#gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
#grid > .core(@gridColumnWidth, @gridGutterWidth);
// Fluid (940px)
#fluidGridSystem > .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth);
#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
\ No newline at end of file
less/mixins.less
+ 126
- 210
View file @ 5ad5dde1
......@@ -135,216 +135,6 @@
}
// GRID SYSTEM
// --------------------------------------------------
// Site container
// -------------------------
.container-fixed() {
margin-left: auto;
margin-right: auto;
.clearfix();
}
// Le grid system
// -------------------------
#gridSystem {
// Setup the mixins to be used
.columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
.offset(@gridColumnWidth, @gridGutterWidth, @columns) {
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
}
.gridColumn(@gridGutterWidth) {
float: left;
margin-left: @gridGutterWidth;
}
// Take these values and mixins, and make 'em do their thang
.generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
// Row surrounds the columns
.row {
margin-left: @gridGutterWidth * -1;
.clearfix();
}
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
[class*="span"] {
#gridSystem > .gridColumn(@gridGutterWidth);
}
// Fixed container
.container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @gridColumns); }
// Default columns
.span1 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
.span2 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
.span3 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
.span4 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
.span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
.span6 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
.span7 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
.span8 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
.span9 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
.span10 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
.span11 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
.span12 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
.span13 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 13); }
.span14 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 14); }
.span15 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 15); }
.span16 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 16); }
.span17 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 17); }
.span18 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 18); }
.span19 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 19); }
.span20 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 20); }
.span21 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 21); }
.span22 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 22); }
.span23 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 23); }
.span24 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 24); }
// Offset column options
.offset1 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
.offset2 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
.offset3 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
.offset4 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
.offset5 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
.offset6 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
.offset7 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
.offset8 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
.offset9 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
.offset10 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
.offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
.offset12 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 12); }
.offset13 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 13); }
.offset14 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 14); }
.offset15 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 15); }
.offset16 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 16); }
.offset17 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 17); }
.offset18 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 18); }
.offset19 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 19); }
.offset20 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 20); }
.offset21 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 21); }
.offset22 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 22); }
.offset23 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 23); }
}
}
// Fluid grid system
// -------------------------
#fluidGridSystem {
// Setup the mixins to be used
.columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
}
.gridColumn(@fluidGridGutterWidth) {
float: left;
margin-left: @fluidGridGutterWidth;
}
// Take these values and mixins, and make 'em do their thang
.generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
// Row surrounds the columns
.row-fluid {
width: 100%;
.clearfix();
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
> [class*="span"] {
#fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
}
> [class*="span"]:first-child {
margin-left: 0;
}
// Default columns
> .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
> .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
> .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
> .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
> .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
> .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
> .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
> .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
> .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
> .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
> .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
> .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
> .span13 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 13); }
> .span14 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 14); }
> .span15 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 15); }
> .span16 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 16); }
> .span17 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 17); }
> .span18 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 18); }
> .span19 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 19); }
> .span20 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 20); }
> .span21 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 21); }
> .span22 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 22); }
> .span23 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 23); }
> .span24 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 24); }
}
}
}
// Input grid system
// -------------------------
#inputGridSystem {
.inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
}
.generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
input,
textarea,
.uneditable-input {
&.span1 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
&.span2 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
&.span3 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
&.span4 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
&.span5 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
&.span6 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
&.span7 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
&.span8 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
&.span9 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
&.span10 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
&.span11 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
&.span12 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
&.span13 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 13); }
&.span14 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 14); }
&.span15 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 15); }
&.span16 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 16); }
&.span17 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 17); }
&.span18 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 18); }
&.span19 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 19); }
&.span20 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 20); }
&.span21 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 21); }
&.span22 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 22); }
&.span23 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 23); }
&.span24 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 24); }
}
}
}
// Table grid system
// -------------------------
.tableColumns(@columnSpan: 1) {
float: none; // undo default grid column styles
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
margin-left: 0; // undo default grid column styles
}
// Make a Grid
// -------------------------
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
.makeRow() {
margin-left: @gridGutterWidth * -1;
.clearfix();
}
.makeColumn(@columns: 1) {
float: left;
margin-left: @gridGutterWidth;
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
// Form field states (used in forms.less)
// --------------------------------------------------
......@@ -674,3 +464,129 @@
border-right: @arrowWidth solid @black;
}
}
// Grid System
// -----------
.container-fixed() {
margin-left: auto;
margin-right: auto;
.clearfix();
}
.tableColumns(@columnSpan: 1) {
float: none; // undo default grid column styles
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
margin-left: 0; // undo default grid column styles
}
#grid {
.core (@gridColumnWidth, @gridGutterWidth) {
.span (@columns) {
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
.offset (@columns) {
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
}
.row {
margin-left: @gridGutterWidth * -1;
.clearfix();
}
[class*="span"] {
float: left;
margin-left: @gridGutterWidth;
}
.container { .span(12); }
.span1 { .span(1) }
.span2 { .span(2) }
.span3 { .span(3) }
.span4 { .span(4) }
.span5 { .span(5) }
.span6 { .span(6) }
.span7 { .span(7) }
.span8 { .span(8) }
.span9 { .span(9) }
.span10 { .span(10) }
.span11 { .span(11) }
.span12 { .span(12) }
.offset1 { .offset(1) }
.offset2 { .offset(2) }
.offset3 { .offset(3) }
.offset4 { .offset(4) }
.offset5 { .offset(5) }
.offset6 { .offset(6) }
.offset7 { .offset(7) }
.offset8 { .offset(8) }
.offset9 { .offset(9) }
.offset10 { .offset(10) }
.offset11 { .offset(11) }
.offset12 { .offset(12) }
}
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
.span (@columns) {
width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
}
.row-fluid {
width: 100%;
.clearfix();
> [class*="span"] {
float: left;
margin-left: @fluidGridGutterWidth;
}
> [class*="span"]:first-child {
margin-left: 0;
}
> .span1 { .span(1) }
> .span2 { .span(2) }
> .span3 { .span(3) }
> .span4 { .span(4) }
> .span5 { .span(5) }
> .span6 { .span(6) }
> .span7 { .span(7) }
> .span8 { .span(8) }
> .span9 { .span(9) }
> .span10 { .span(10) }
> .span11 { .span(11) }
> .span12 { .span(12) }
}
}
.input(@gridColumnWidth, @gridGutterWidth) {
.span(@columns) {
width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
}
input,
textarea,
.uneditable-input {
&.span1 { .span(1) }
&.span2 { .span(2) }
&.span3 { .span(3) }
&.span4 { .span(4) }
&.span5 { .span(5) }
&.span6 { .span(6) }
&.span7 { .span(7) }
&.span8 { .span(8) }
&.span9 { .span(9) }
&.span10 { .span(10) }
&.span11 { .span(11) }
&.span12 { .span(12) }
}
}
}
\ No newline at end of file
less/responsive.less
+ 6
- 6
View file @ 5ad5dde1
......@@ -188,13 +188,13 @@
@media (min-width: 768px) and (max-width: 979px) {
// Fixed grid
#gridSystem > .generate(@gridColumns, 42px, 20px);
#grid > .core(42px, 20px);
// Fluid grid
#fluidGridSystem > .generate(@gridColumns, 5.801104972%, 2.762430939%);
#grid > .fluid(5.801104972%, 2.762430939%);
// Input grid
#inputGridSystem > .generate(@gridColumns, 42px, 20px);
#grid > .input(42px, 20px);
}
......@@ -340,13 +340,13 @@
@media (min-width: 1200px) {
// Fixed grid
#gridSystem > .generate(@gridColumns, 70px, 30px);
#grid > .core(70px, 30px);
// Fluid grid
#fluidGridSystem > .generate(@gridColumns, 5.982905983%, 2.564102564%);
#grid > .fluid(5.982905983%, 2.564102564%);
// Input grid
#inputGridSystem > .generate(@gridColumns, 70px, 30px);
#grid > .input(70px, 30px);
// Thumbnails
.thumbnails {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment