public
Created

The grid component from my personal front-end framework. Brief demo here: http://jeffcroft.com/static/misc/grid_frameworks.mov

  • Download Gist
grid.sass
Sass
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
// REQUIRED VARS. Defaults to a 950px wide, 24-column grid that has 30px wide units and 10px wide
// gutters. If you do the fluid grid, then this 950/24/30/10px size will become the maximum size.
$grid_type: fixed !default
$grid_columns: 24 !default
$grid_column_width: 30 !default
$grid_gutter_width: 10 !default
 
// GENERATED VARS. You can ignore these.
$grid_full_width: $grid_columns * $grid_column_width + $grid_columns * $grid_gutter_width - $grid_gutter_width
$grid_column_width_percent: ($grid_column_width / $grid_full_width * 100) * 1%
$grid_gutter_width_percent: ($grid_gutter_width / $grid_full_width * 100) * 1%
 
// CONTAINER MIXIN. A container is an element that holds grid based elements. All grid layouts should
// be wrapped with a container. In fixed grids, the width of containers is the total of your columns and
// gutters. In fluid grids, that's the max-width. You can stack containers vertically down the page all
// you like. For example, you may have a container for your header, one for content, and one for your
// footer. To specify a container, either use this mixin in your SASS (+container) or apply the CSS
// class "container" via HTML (class=container).
=container($type: none, $box_padding_multiplier: 1)
+clearfix
@if $grid_type == "fixed"
width: #{($grid_column_width + $grid_gutter_width) * $grid_columns - $grid_gutter_width}px
@if $type == "box"
padding-left: #{$grid_gutter_width * $box_padding_multiplier}px
padding-right: #{$grid_gutter_width * $box_padding_multiplier}px
@if $grid_type == "fluid"
max-width: #{$grid_full_width / $base_font_size_unitless}em
padding: 0 #{$box_padding_multiplier}em
margin: 0 auto
 
=span($n)
@if $grid_type == "fluid"
$span_width_percent: ($grid_column_width_percent * $n + ($grid_gutter_width_percent * ($n - 1)))
width: #{$span_width_percent}
@else
width: #{$grid_column_width * $n + $grid_gutter_width * ($n - 1)}px
@if $n == $grid_columns
margin: 0
 
// COLUMN MIXIN. Column CSS classes are also generated. You can make an element span a specific
// number of columns either by using this mixin in your SASS for that element (such as +column(4)),
// or by speficing the CSS class in your HTML (such as class=column-4).
=column($n)
+span($n)
float: left
@if $grid_type == "fluid"
margin-right: #{$grid_gutter_width_percent}
@else
margin-right: #{$grid_gutter_width}px
@if $n == $grid_columns
margin: 0
 
// BOX MIXIN. A "box" is a column that has inner padding the width of the gutters. It's useful when
// you intend to have a background color or other screen on the element, such that content butting up
// aganist the interior edges of the element would be undesirable. Use it just like the column mixin
// (+box(4) or class=box-4).
 
=box($n)
float: left
@if $grid_type == "fluid"
$box_width_percent: ($grid_column_width_percent * $n + ($grid_gutter_width_percent * ($n - 1)) - ($grid_gutter_width_percent * 2))
width: #{$box_width_percent}
padding: #{$grid_gutter_width_percent}
margin-right: #{$grid_gutter_width_percent}
@else
width: #{$grid_column_width * $n + $grid_gutter_width * ($n - 1) - $grid_gutter_width * 2}px
padding: #{$grid_gutter_width}px
margin-right: #{$grid_gutter_width}px
@if $n == $grid_columns
margin: 0
 
// APPEND AND PREPEND MIXINS
// These mixins append or prepend the specificed number of blank columns to an element, using padding.
// Note that because they use padding, they are not compatible with boxes. I need to make a margin-based
// version for boxes, but haven't gotten there, yet. Use them as with the other mixins (+append(2) or
// class=prepend-2).
=append($n)
@if $grid_type == "fluid"
padding-right: #{$grid_column_width_percent * $n + $grid_gutter_width_percent * $n} !important
@else
padding-right: #{$grid_column_width * $n + $grid_gutter_width * $n}px !important
 
=prepend($n)
@if $grid_type == "fluid"
padding-left: #{$grid_column_width_percent * $n + $grid_gutter_width_percent * $n} !important
@else
padding-left: #{$grid_column_width * $n + $grid_gutter_width * $n}px !important
 
// PUSH AND PULL MIXINS
// These mixins push or pull an element out of the flow by the specified number of columns. Use as with
// the other mixins (+push(4) or class=pull-4).
=pull($n)
float: left
margin-bottom: $base_line_height
@if $grid_type == "fluid"
margin-left: -#{$grid_column_width_percent * $n + $grid_gutter_width_percent * $n}% !important
@else
margin-left: -#{$grid_column_width * $n + $grid_gutter_width * $n}px !important
 
=push($n)
float: right
margin-bottom: $base_line_height
@if $grid_type == "fluid"
margin-right: -#{$grid_column_width_percent * $n + $grid_gutter_width_percent * $n}% !important
@else
margin-right: -#{$grid_column_width * $n + $grid_gutter_width * $n}px !important
 
// OTHER MIXINS
=last
margin-right: 0 !important
 
// Generate the CSS classes.
@for $n from 1 to $grid_columns + 1
.span-#{$n}
+span($n)
 
@for $n from 1 to $grid_columns + 1
.column-#{$n}
+column($n)
 
@for $n from 1 to $grid_columns + 1
.box-#{$n}
+box($n)
 
@for $n from 1 to $grid_columns
.append-#{$n}
+append($n)
 
@for $n from 1 to $grid_columns
.prepend-#{$n}
+prepend($n)
 
@for $n from 1 to $grid_columns / 2 + 1
.pull-#{$n}
+pull($n)
 
@for $n from 1 to $grid_columns / 2 + 1
.push-#{$n}
+push($n)
 
.container
+container
 
.container-box
+container(true)
 
.last
+last

Great looking grid generator. I'm curious, what are the cons that you mentioned in your screen cast about this grid system?

I've never seen the box mixins, very interesting. How would you handle adding a border on the box elements? Adding a border would break the grid, right?

Does the grid break when you have grids inside of box elements?

Thanks for sharing

You've hit on most of the downsides to this. Which, really, aren't downsides so much as things I've yet to add. But yeah, as of now, borders on the elements break the grid, and the grid does break down if you place grid units instead of box elements. Both things I hope to work out at some point. :)

Thanks for the reply. One more thing, can you tell me what browsers this supports?

Very cool, I especially like fluid vs fixed option. I'm curious, though - wouldn't setting an explicit width to the parent row imply fixed width even if fluid calculations are used?

Have you seen Olav Bjorkoy's 'contextual fluid grids' (http://bjorkoy.com/2010/05/contextual-fluid-grids/)? It's remarkably powerful for a very small number of lines. I made a few edits to it (https://gist.github.com/890901) but have not yet used it beyond a few experiments - very interested to see what other's are learning and what I can incorporate. Thanks for sharing!

Hi Harlan:

I set an explicit maximum width on the fluid option, so that line length and such don't get to long, but it's still fluid as it gets smaller.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.