/
_grid.sass
168 lines (144 loc) · 5.03 KB
/
_grid.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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
// --------------------------------------------------------------
// SASS Gridification
// * Author: Chris Eppstein
// A SASS adaptation of Blueprint CSS
// * Version: 0.7.1 (2008-02-25)
// * Website: http://code.google.com/p/blueprintcss/
// Based on work by:
// * Lorin Tackett [lorintackett.com]
// * Olav Bjorkoy [bjorkoy.com]
// * Nathan Borror [playgroundblues.com]
// * Jeff Croft [jeffcroft.com]
// * Christian Metts [mintchaos.com]
// * Khoi Vinh [subtraction.com]
// Read more about using a grid here:
// * http://www.subtraction.com/2007/03/18/oh-yeeaahh
// --------------------------------------------------------------
@import compass/utilities/general/float.sass
// Main layout grid, override these constants to build your grid and container sizes.
!blueprint_grid_columns ||= 24
!blueprint_grid_width ||= 30px
!blueprint_grid_margin ||= 10px
!blueprint_grid_outer_width = !blueprint_grid_width + !blueprint_grid_margin
!blueprint_container_size = !blueprint_grid_outer_width * !blueprint_grid_columns - !blueprint_grid_margin
=blueprint-grid
// A container should group all your columns
.container
+container
.column, #{enumerate("div.span", 1, !blueprint_grid_columns)}
+column-base
// The last column in a row needs this class (or mixin) or it will end up on the next row.
.last, div.last
+last
// Use these classes (or mixins) to set the width of a column.
@for !n from 1 to !blueprint_grid_columns
.span-#{!n}
+span(!n)
.span-#{!blueprint_grid_columns}, div.span-#{!blueprint_grid_columns}
+span(!blueprint_grid_columns)
:margin 0
input, textarea, select
@for !n from 1 through !blueprint_grid_columns
&.span-#{!n}
+span(!n, true)
// Add these to a column to append empty cols.
@for !n from 1 to !blueprint_grid_columns
.append-#{!n}
+append(!n)
// Add these to a column to prepend empty cols.
@for !n from 1 to !blueprint_grid_columns
.prepend-#{!n}
+prepend(!n)
// Use these classes on an element to push it into the
// next column, or to pull it into the previous column.
#{enumerate(".pull", 1, !blueprint_grid_columns)}
+pull-base
@for !n from 1 through !blueprint_grid_columns
.pull-#{!n}
+pull-margins(!n)
#{enumerate(".push", 1, !blueprint_grid_columns)}
+push-base
@for !n from 1 through !blueprint_grid_columns
.push-#{!n}
+push-margins(!n)
// Columns
// Note: If you use this mixin without the class and want to support ie6
// you must set text-align left on your container element in an IE stylesheet.
=container
:width = !blueprint_container_size
:margin 0 auto
+clearfix
// The last column in a row needs this mixin or it will end up on the next row.
// TODO add this to span mixin when we have optional arguments
=last
:margin-right 0
=span(!n, !override = false)
!width = !blueprint_grid_width * !n + (!blueprint_grid_margin * (!n - 1))
@if !override
:width = !width !important
@else
:width = !width
=column-base(!last = false)
+float-left
@if !last
+last
@else
:margin-right = !blueprint_grid_margin
* html &
:overflow-x hidden
// Use this mixins to set the width of n columns.
=column(!n, !last = false)
+column-base(!last)
+span(!n)
// Mixin to a column to append n empty cols.
=append(!n)
:padding-right = (!blueprint_grid_outer_width) * !n
// Mixin to a column to prepend n empty cols.
=prepend(!n)
:padding-left = (!blueprint_grid_outer_width) * !n
=pull-base
+float-left
:position relative
=pull-margins(!n, !last = false)
@if !last
:margin-left = (-!blueprint_grid_outer_width * !n) + !blueprint_grid_margin
@else
:margin-left = -!blueprint_grid_outer_width * !n
// mixin to a column to move it n columns to the left
=pull(!n, !last = false)
+pull-base
+pull-margins(!n, !last)
=push-base
+float-right
:position relative
=push-margins(!n)
:margin= 0 (-!blueprint_grid_outer_width * !n) 1.5em (!blueprint_grid_outer_width * !n)
// mixin to a column to push it n columns to the right
=push(!n)
+push-base
+push-margins(!n)
// Border on right hand side of a column.
=border(!border_color = #eee, !border_width = 1px)
:padding-right = !blueprint_grid_margin / 2 - !border_width
:margin-right = !blueprint_grid_margin / 2
:border-right #{!border_width} solid #{!border_color}
// Border with more whitespace, spans one column.
=colborder(!border_color = #eee, !border_width = 1px)
:padding-right= floor((!blueprint_grid_width + 2 * !blueprint_grid_margin - !border_width)/2)
:margin-right= ceil((!blueprint_grid_width + 2 * !blueprint_grid_margin - !border_width)/2)
:border-right #{!border_width} solid #{!border_color}
// Mixin this to an hr to make a horizontal ruler across a column.
=colruler(!border_color = #ddd)
:background= !border_color
:color= !border_color
:clear both
:float none
:width 100%
:height .1em
:margin 0 0 1.45em
:border none
// Mixin this to an hr to make a horizontal spacer across a column.
=colspacer
+colruler
:background #fff
:color #fff