Skip to content

Instantly share code, notes, and snippets.

@JasonStoltz
Last active December 14, 2015 07:09
Show Gist options
  • Save JasonStoltz/5048787 to your computer and use it in GitHub Desktop.
Save JasonStoltz/5048787 to your computer and use it in GitHub Desktop.
Fixed width, 12 column, bootstrap-esque grid. Just set a few configurations... 'area-width' -- total width to fill, 'max-col' -- number of columns in grid, and 'spacing' -- spacing in between columns..., then just use class="grid", class="row", class="col1", "col2", etc. http://grab.by/kgds
.inline
{
display:inline-block;
zoom:1;
*display:inline;
}
@area-width: 758px;
@max-col: 12;
@spacing: 26px;
@col-width: ((@area-width - (@spacing * (@max-col - 1))) / @max-col);
@padding: @spacing / 2;
@width-multiplier: @col-width + @spacing;
.col (@num_of_cols){
padding:0 @padding 0 @padding;
.inline;
position:relative;
zoom: 1;
vertical-align:top;
font-size:12px;
width:@width-multiplier * @num_of_cols - @spacing;
*width:@width-multiplier * @num_of_cols - @spacing;
min-width:@width-multiplier * @num_of_cols - @spacing;
*min-width:@width-multiplier * @num_of_cols - @spacing;
}
.grid
{
position:relative;
zoom:1;
vertical-align:top;
font-size:0;
.col_1
{
.col(1);
}
.col_2
{
.col(2);
}
.col_3
{
.col(3);
}
.col_4
{
.col(4);
}
.col_5
{
.col(5);
}
.col_6
{
.col(6);
}
.col_7
{
.col(7);
}
.col_8
{
.col(8);
}
.col_9
{
.col(9);
}
.col_10
{
.col(10);
}
.col_11
{
.col(11);
}
.col_12
{
.col(12);
}
}
/*common*/
.aftercol {
content: '.';
visibility: hidden;
}
.row > div:first-child {
padding-left: 0px;
}
.row > div:last-child {
padding-right: 0px;
}
.col_1:after
{
.aftercol;
}
.col_2:after
{
.aftercol;
}
.col_3:after
{
.aftercol;
}
.col_4:after
{
.aftercol;
}
.col_5:after
{
.aftercol;
}
.col_6:after
{
.aftercol;
}
.col_7:after
{
.aftercol;
}
.col_8:after
{
.aftercol;
}
.col_9:after
{
.aftercol;
}
.col_10:after
{
.aftercol;
}
.col_11:after
{
.aftercol;
}
.col_12:after
{
.aftercol;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment