From dc2deb9a1b1995bbabee91bfd579d9b466fe78f2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 26 Jan 2012 21:48:46 -0800 Subject: moving structure around + more work on builder... --- less/grid.less | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 less/grid.less (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less new file mode 100644 index 000000000..d5b5f487d --- /dev/null +++ b/less/grid.less @@ -0,0 +1,41 @@ +// GRID SYSTEM +// ----------- +// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there +.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) +// Credit to @dhg for the idea +[class*="span"] { + .gridColumn(); +} + +// Default columns +.span1 { .columns(1); } +.span2 { .columns(2); } +.span3 { .columns(3); } +.span4 { .columns(4); } +.span5 { .columns(5); } +.span6 { .columns(6); } +.span7 { .columns(7); } +.span8 { .columns(8); } +.span9 { .columns(9); } +.span10 { .columns(10); } +.span11 { .columns(11); } +.span12 { .columns(12); } + +// Offset column options +.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); } -- cgit v1.2.3 From 48529ad01fa2a60bfc9179743dcb5379e8ff944f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 13:06:57 -0800 Subject: last minute addition of a simple fluid grid for our fluid examples; it needs work, so we're not documenting it now --- less/grid.less | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 69 insertions(+), 4 deletions(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index d5b5f487d..4493d0b95 100644 --- a/less/grid.less +++ b/less/grid.less @@ -1,14 +1,40 @@ // GRID SYSTEM // ----------- -// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there + + +// Default grid sizing +// ------------------- +@gridColumns: 12; +@gridColumnWidth: 60px; +@gridGutterWidth: 20px; + +@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); +@gridTotalWidth: @gridRowWidth; + + +// Columns and offseting mixins +// ---------------------------- +.columns(@columns: 1) { + //width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); + width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/@gridRowWidth); +} +.offset(@columns: 1) { + margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); +} +// Necessary grid styles for every column to make them appear next to each other horizontally +.gridColumn() { + float: left; + margin-left: @gridGutterWidth; +} + +// Grid rows and 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) -// Credit to @dhg for the idea +// 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"] { .gridColumn(); } @@ -39,3 +65,42 @@ .offset9 { .offset(9); } .offset10 { .offset(10); } .offset11 { .offset(11); } + + + +// FLUID GRID SYSTEM +// ----------------- +// This is a very early and limited fluid grid system for now and will not be documented until it's refined in v2.1. + +.row-fluid { + @gridColumnWidth: 6.382978723%; + @gridGutterWidth: 2.127659574%; + + width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth); + margin-left: 0 - @gridGutterWidth; + + // Redeclare the mixins + .gridColumn() { + float: left; + margin-left: @gridGutterWidth; + } + [class*="span"] { + .gridColumn(); + } + .fluidColumns(@columns: 1) { + width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth)); + } + // Redeclare the columns + .span1 { .fluidColumns(1); } + .span2 { .fluidColumns(2); } + .span3 { .fluidColumns(3); } + .span4 { .fluidColumns(4); } + .span5 { .fluidColumns(5); } + .span6 { .fluidColumns(6); } + .span7 { .fluidColumns(7); } + .span8 { .fluidColumns(8); } + .span9 { .fluidColumns(9); } + .span10 { .fluidColumns(10); } + .span11 { .fluidColumns(11); } + .span12 { .fluidColumns(12); } +} -- cgit v1.2.3 From fda77e69eb825f6b098a303fedcc96d257b4b050 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 16:58:51 -0800 Subject: move vars and mixins for default grid back to appropriate files --- less/grid.less | 25 ------------------------- 1 file changed, 25 deletions(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index 4493d0b95..2ef767a4a 100644 --- a/less/grid.less +++ b/less/grid.less @@ -2,31 +2,6 @@ // ----------- -// Default grid sizing -// ------------------- -@gridColumns: 12; -@gridColumnWidth: 60px; -@gridGutterWidth: 20px; - -@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); -@gridTotalWidth: @gridRowWidth; - - -// Columns and offseting mixins -// ---------------------------- -.columns(@columns: 1) { - //width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); - width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/@gridRowWidth); -} -.offset(@columns: 1) { - margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); -} -// Necessary grid styles for every column to make them appear next to each other horizontally -.gridColumn() { - float: left; - margin-left: @gridGutterWidth; -} - // Grid rows and columns // --------------------- .row { -- cgit v1.2.3 From ae7f94eeff733584cbdc80a2d13a85f136a7744e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 00:39:44 -0800 Subject: overhaul grid mixins and variables, standardize fluid grid system and enable it across responsive layouts --- less/grid.less | 81 +++------------------------------------------------------- 1 file changed, 4 insertions(+), 77 deletions(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index 2ef767a4a..4acb0a44c 100644 --- a/less/grid.less +++ b/less/grid.less @@ -1,81 +1,8 @@ // GRID SYSTEM // ----------- +// Fixed (940px) +#gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth); -// Grid rows and 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"] { - .gridColumn(); -} - -// Default columns -.span1 { .columns(1); } -.span2 { .columns(2); } -.span3 { .columns(3); } -.span4 { .columns(4); } -.span5 { .columns(5); } -.span6 { .columns(6); } -.span7 { .columns(7); } -.span8 { .columns(8); } -.span9 { .columns(9); } -.span10 { .columns(10); } -.span11 { .columns(11); } -.span12 { .columns(12); } - -// Offset column options -.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); } - - - -// FLUID GRID SYSTEM -// ----------------- -// This is a very early and limited fluid grid system for now and will not be documented until it's refined in v2.1. - -.row-fluid { - @gridColumnWidth: 6.382978723%; - @gridGutterWidth: 2.127659574%; - - width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth); - margin-left: 0 - @gridGutterWidth; - - // Redeclare the mixins - .gridColumn() { - float: left; - margin-left: @gridGutterWidth; - } - [class*="span"] { - .gridColumn(); - } - .fluidColumns(@columns: 1) { - width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth)); - } - // Redeclare the columns - .span1 { .fluidColumns(1); } - .span2 { .fluidColumns(2); } - .span3 { .fluidColumns(3); } - .span4 { .fluidColumns(4); } - .span5 { .fluidColumns(5); } - .span6 { .fluidColumns(6); } - .span7 { .fluidColumns(7); } - .span8 { .fluidColumns(8); } - .span9 { .fluidColumns(9); } - .span10 { .fluidColumns(10); } - .span11 { .fluidColumns(11); } - .span12 { .fluidColumns(12); } -} +// Fluid (940px) +#fluidGridSystem > .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth); -- cgit v1.2.3