About Blueprint
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
.container
18
19
20
21
22
| /* A container should group all your columns. */
.container {
width: 950px;
margin: 0 auto;
} |
container is where it all begins. This establishes your centered div with a width of 950 pixels. If you’ve done much CSS, this should look pretty familiar:
margin: 0 auto; /* This is what centers the div */
Not much else to say except all of your other columns should be inside a div with the container class. Let’s move on.
.showgrid
24
| .showgrid { background: url(src/grid.png); } |
showgrid is a nice tool to display your columns when you’re laying out a page. Simply add it to the container div like so:
<div class="container showgrid">DIV contents</div>
Once you’re satisfied with how things are positioned, remove showgrid from your classes.
Let’s skip down to line 33 or so.
.span-x
33
34
35
36
37
38
39
40
41
| /* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5,
div.span-6, div.span-7, div.span-8, div.span-9, div.span-10,
div.span-11, div.span-12, div.span-13, div.span-14, div.span-15,
div.span-16, div.span-17, div.span-18, div.span-19, div.span-20,
div.span-21, div.span-22, div.span-23, div.span-24 {
float: left;
margin-right: 10px;
} |
This just sets up your span-x columns to all float left. It’s a bit counter-intuitive, but this makes them all wrap around to the right of each other. It also sets up the 10 pixel margin to the right of each one for a nice gutter. That is, except for last. last is always the last column and forces any div with a span-x class to go below it. It also has no right margin:
44
| div.last { margin-right: 0; } |
Next the span-x widths are set:
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
| /* Use these classes to set the width of a column. */
.span-1 { width: 30px; }
.span-2 { width: 70px; }
.span-3 { width: 110px; }
.span-4 { width: 150px; }
.span-5 { width: 190px; }
.span-6 { width: 230px; }
.span-7 { width: 270px; }
.span-8 { width: 310px; }
.span-9 { width: 350px; }
.span-10 { width: 390px; }
.span-11 { width: 430px; }
.span-12 { width: 470px; }
.span-13 { width: 510px; }
.span-14 { width: 550px; }
.span-15 { width: 590px; }
.span-16 { width: 630px; }
.span-17 { width: 670px; }
.span-18 { width: 710px; }
.span-19 { width: 750px; }
.span-20 { width: 790px; }
.span-21 { width: 830px; }
.span-22 { width: 870px; }
.span-23 { width: 910px; }
.span-24, div.span-24 { width: 950px; margin: 0; } |
Notice above that span-24 takes up the full width with no right margin. Want a wider gutter than the pre-established 10 pixels? No problem.
.append-x
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
| /* Add these to a column to append empty cols. */
.append-1 { padding-right: 40px; }
.append-2 { padding-right: 80px; }
.append-3 { padding-right: 120px; }
.append-4 { padding-right: 160px; }
.append-5 { padding-right: 200px; }
.append-6 { padding-right: 240px; }
.append-7 { padding-right: 280px; }
.append-8 { padding-right: 320px; }
.append-9 { padding-right: 360px; }
.append-10 { padding-right: 400px; }
.append-11 { padding-right: 440px; }
.append-12 { padding-right: 480px; }
.append-13 { padding-right: 520px; }
.append-14 { padding-right: 560px; }
.append-15 { padding-right: 600px; }
.append-16 { padding-right: 640px; }
.append-17 { padding-right: 680px; }
.append-18 { padding-right: 720px; }
.append-19 { padding-right: 760px; }
.append-20 { padding-right: 800px; }
.append-21 { padding-right: 840px; }
.append-22 { padding-right: 880px; }
.append-23 { padding-right: 920px; } |
Remember, each of the span-x columns are 30 pixels wide with a 10-pixel right margin. Likewise the above append-x classes will add an additional column to the right. Just do the math. span-1 adds 40 pixels. span-2, 80 pixels and so on. We can add columns to the left with the prepend classes in the same way.
.prepend-x
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
| /* Add these to a column to prepend empty cols. */
.prepend-1 { padding-left: 40px; }
.prepend-2 { padding-left: 80px; }
.prepend-3 { padding-left: 120px; }
.prepend-4 { padding-left: 160px; }
.prepend-5 { padding-left: 200px; }
.prepend-6 { padding-left: 240px; }
.prepend-7 { padding-left: 280px; }
.prepend-8 { padding-left: 320px; }
.prepend-9 { padding-left: 360px; }
.prepend-10 { padding-left: 400px; }
.prepend-11 { padding-left: 440px; }
.prepend-12 { padding-left: 480px; }
.prepend-13 { padding-left: 520px; }
.prepend-14 { padding-left: 560px; }
.prepend-15 { padding-left: 600px; }
.prepend-16 { padding-left: 640px; }
.prepend-17 { padding-left: 680px; }
.prepend-18 { padding-left: 720px; }
.prepend-19 { padding-left: 760px; }
.prepend-20 { padding-left: 800px; }
.prepend-21 { padding-left: 840px; }
.prepend-22 { padding-left: 880px; }
.prepend-23 { padding-left: 920px; } |
prepend-1 adds 40 pixels to the left of a column. prepend-2 adds 80 pixels and so on. As long as we’re talking about positioning, let’s skip ahead a little bit.
.push-x & .pull-x
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
| /* Use these classes on an element to push it into the
next column, or to pull it into the previous column. */
.pull-1 { margin-left: -40px; }
.pull-2 { margin-left: -80px; }
.pull-3 { margin-left: -120px; }
.pull-4 { margin-left: -160px; }
.pull-5 { margin-left: -200px; }
.pull-1, .pull-2, .pull-3,
.pull-4, .pull-5, .pull-5 {
float:left;
position:relative;
}
.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }
.push-0, .push-1, .push-2,
.push-3, .push-4, .push-5 {
float: right;
position:relative;
} |
pull-x and push-x function in a similar way to append-x and prepend-x, except they’ll actually push columns into one another instead of creating a wider gutter. push-1 pushes the page element over to the right by one, 40-pixel column. pull-1 pulls the page element over to the left by one 40-pixel column.
We skipped over some stuff. Let’s go back to it:
.border
123
124
125
126
127
128
| /* Border on right hand side of a column. */
div.border {
padding-right: 4px;
margin-right: 5px;
border-right: 1px solid #eee;
} |
border adds a right-border to any page element. Notice the right padding, margin and 1-pixel border all add up to 10 pixels to maintain the standard 10-pixel gutter.
.colborder
colborder does the same except the right margin spans an entire column:
130
131
132
133
134
135
| /* Border with more whitespace, spans one column. */
div.colborder {
padding-right: 24px;
margin-right: 25px;
border-right: 1px solid #eee;
} |
The right padding, margin and 1-pixel border add up to 50 pixels this time.
.box
box creates a padded box inside a column.
170
171
172
173
174
| .box {
padding: 1.5em;
margin-bottom: 1.5em;
background: #E5ECF9;
} |
hr
hr gets a nice default setting to make sure it crosses your column:
177
178
179
180
181
182
183
184
185
186
187
188
189
190
| hr {
background: #ddd;
color: #ddd;
clear: both;
float: none;
width: 100%;
height: .1em;
margin: 0 0 1.45em;
border: none;
}
hr.space {
background: #fff;
color: #fff;
} |
I’m actually going to skip to the end because the clearfix classes seem a bit outmoded after reading the article they are based on. Read this article instead.
.clear
clear simply forces a column to go beneath the column before it.
212
| .clear { clear:both; } |
That’s it. Hopefully reading this will give you a good sense of what positioning classes are available in Blueprint and how to use them. Please leave a comment if anything needs clarification.
