public
Created — forked from jcroft/grid.sass

  • 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

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.