Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 286 lines (186 sloc) 8.557 kb
10b2704 @kaishin Add logo to the README
kaishin authored
1 [![Bourbon Neat](http://thoughtbot.com/neat/images/logotype.svg)](http://thoughtbot.com/neat)
2
725dedd @kaishin Update README and change $max-columns variable name
kaishin authored
3 **Neat** is an open source fluid grid framework built on top of [Bourbon](http://thoughtbot.com/bourbon) with the aim of being easy enough to use out of the box and flexible enough to customize down the road.
6241dd8 @kylefiedler Initial commit
kylefiedler authored
4
725dedd @kaishin Update README and change $max-columns variable name
kaishin authored
5 Learn more about Neat and why we built it [here](http://thoughtbot.com/neat/).
fc606b3 more documentation and remove type styles
Kyle Fiedler authored
6
f142256 @kaishin Update Readme with Credits and License file
kaishin authored
7
8 Getting started
fc606b3 more documentation and remove type styles
Kyle Fiedler authored
9 ===
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
10
f142256 @kaishin Update Readme with Credits and License file
kaishin authored
11 Requirements:
12
883bb33 @kaishin Add version info
kaishin authored
13 - Sass 3.2+
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
14 - Bourbon 2.1+
fc606b3 more documentation and remove type styles
Kyle Fiedler authored
15
725dedd @kaishin Update README and change $max-columns variable name
kaishin authored
16 Put the ```/neat``` folder in your Sass directory and import it right below Bourbon in your stylesheets:
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
17
18 @import "bourbon/bourbon";
19 @import "neat/neat";
f142256 @kaishin Update Readme with Credits and License file
kaishin authored
20
ea376aa Added push and pull, fill, and readme info
Kyle Fiedler authored
21
22 Using the grid
23 ===
725dedd @kaishin Update README and change $max-columns variable name
kaishin authored
24 The default grid uses 12 columns (a setting that can be easily overridden as detailed further down).
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
25
725dedd @kaishin Update README and change $max-columns variable name
kaishin authored
26 ### Containers
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
27 Include the ```outer-container``` mixin in the topmost container (to which the ```max-width``` setting will be applied):
f142256 @kaishin Update Readme with Credits and License file
kaishin authored
28
29 div.container {
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
30 @include outer-container;
f142256 @kaishin Update Readme with Credits and License file
kaishin authored
31 }
32
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
33
34 You can include this mixin in more than one element in the same page.
35
725dedd @kaishin Update README and change $max-columns variable name
kaishin authored
36 ### Columns
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
37 Use the ```span-columns``` mixin to specify the number of columns an element should span:
38
e97b395 @kaishin Update README to reflect the span-columns() changes
kaishin authored
39 @include span-columns($span: $columns of $container-columns, $display: block)
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
40
f142256 @kaishin Update Readme with Credits and License file
kaishin authored
41 * ```columns``` is the number of columns you wish this element to span.
e97b395 @kaishin Update README to reflect the span-columns() changes
kaishin authored
42 * ```container-columns``` (optional) is the number of columns the container spans, defaults to the total number of columns in the grid.
43 * ```display``` (optional) changes the display type of the grid. Use ```block```—the default—for floated layout, ```table``` for table-cell layout, and ```inline-block``` for an inline block layout.
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
44
fbd7278 @kaishin Fix indentation in README
kaishin authored
45 eg. Element that spans across 6 columns (out of the default 12):
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
46
47 div.element {
fbd7278 @kaishin Fix indentation in README
kaishin authored
48 @include span-columns(6);
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
49 }
50
51
e97b395 @kaishin Update README to reflect the span-columns() changes
kaishin authored
52 If the element's parent isn't the top-most container, you need to add the number of columns of the parent element to keep the right proportions:
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
53
54 div.container {
f142256 @kaishin Update Readme with Credits and License file
kaishin authored
55 @include outer-container;
56
57 div.parent-element {
58 @include span-columns(8);
59
60 div.element {
e97b395 @kaishin Update README to reflect the span-columns() changes
kaishin authored
61 @include span-columns(6 of 8);
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
62 }
f142256 @kaishin Update Readme with Credits and License file
kaishin authored
63 }
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
64 }
65
e97b395 @kaishin Update README to reflect the span-columns() changes
kaishin authored
66 To use a table-cell layout, add ```table``` as the ```display``` argument:
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
67
fbd7278 @kaishin Fix indentation in README
kaishin authored
68 @include span-columns(6 of 8, table)
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
69
70
064447b @kaishin Add Breakpoint() mixin
kaishin authored
71 Likewise for inline-block:
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
72
e97b395 @kaishin Update README to reflect the span-columns() changes
kaishin authored
73 @include span-columns(6 of 8, inline-block)
74
064447b @kaishin Add Breakpoint() mixin
kaishin authored
75 The following syntaxes would also work:
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
76
e97b395 @kaishin Update README to reflect the span-columns() changes
kaishin authored
77 @include span-columns(6 / 8,inline-block);
78 @include span-columns(6 8,inline-block);
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
79
80
725dedd @kaishin Update README and change $max-columns variable name
kaishin authored
81 ### Rows
064447b @kaishin Add Breakpoint() mixin
kaishin authored
82 In order to clear floated or table-cell columns, use the ```row``` mixin:
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
83
fbd7278 @kaishin Fix indentation in README
kaishin authored
84 @include row($display);
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
85
e97b395 @kaishin Update README to reflect the span-columns() changes
kaishin authored
86 * ```display``` takes either ```block```—the default—or ```table```.
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
87
ea376aa Added push and pull, fill, and readme info
Kyle Fiedler authored
88
725dedd @kaishin Update README and change $max-columns variable name
kaishin authored
89 ### Shifting columns
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
90
91
064447b @kaishin Add Breakpoint() mixin
kaishin authored
92 To move an element to the left or right by a number of columns, use the ```shift``` mixin:
f142256 @kaishin Update Readme with Credits and License file
kaishin authored
93
fbd7278 @kaishin Fix indentation in README
kaishin authored
94 @include shift(2); // Move 2 columns to the right
95 @include shift(-3); // Move 3 columns to the left
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
96
064447b @kaishin Add Breakpoint() mixin
kaishin authored
97 Please note that the ```shift()``` mixin is incompatible with display ```table```.
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
98
99
725dedd @kaishin Update README and change $max-columns variable name
kaishin authored
100 ### Padding columns
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
101
064447b @kaishin Add Breakpoint() mixin
kaishin authored
102 To add padding around the entire column use ```pad()```. By default it adds the same value as the grid's gutter but can take any unit value.
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
103
fbd7278 @kaishin Fix indentation in README
kaishin authored
104 @include pad; // Adds a padding equivalent to the grid's gutter
ad0c7e1 Change extend to include
Kyle Fiedler authored
105 @include pad(20px); // Adds a padding of 20px
f142256 @kaishin Update Readme with Credits and License file
kaishin authored
106
b80b805 @kaishin Fix a span-columns() mixin syntax in the README
kaishin authored
107 The ```pad()``` mixin works particularly well with ```span-columns(x, table)``` by adding the necessary padding without breaking your table-based grid layout.
b065baf updates to the readme
Kyle Fiedler authored
108
725dedd @kaishin Update README and change $max-columns variable name
kaishin authored
109 ### Removing gutter
bb3c372 Documentation
Kyle Fiedler authored
110
064447b @kaishin Add Breakpoint() mixin
kaishin authored
111 Neat automatically removes the last columns's gutter. However, if you are queueing more than one row of columns within the same parent element, you need to specify which columns are considered last in their row to preserve the layout. Use the ```omega``` mixin to achieve this:
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
112
fbd7278 @kaishin Fix indentation in README
kaishin authored
113 @include omega; // Removes right gutter
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
114
064447b @kaishin Add Breakpoint() mixin
kaishin authored
115 You can also use ```nth-omega``` to remove the gutter of a specific column or set of columns:
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
116
fbd7278 @kaishin Fix indentation in README
kaishin authored
117 @include nth-omega(nth-child);
ce8fd7d More added to the documentation
Kyle Fiedler authored
118
f142256 @kaishin Update Readme with Credits and License file
kaishin authored
119 * ```nth-child``` takes any valid :nth-child value. See [https://developer.mozilla.org/en-US/docs/CSS/:nth-child](Mozilla's :nth-child documentation)
ce8fd7d More added to the documentation
Kyle Fiedler authored
120
6986d5f Fix indent in the README
Reda Lemeden authored
121 eg. Remove every 3rd gutter using:
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
122
fbd7278 @kaishin Fix indentation in README
kaishin authored
123 @include nth-omega(3n);
bb3c372 Documentation
Kyle Fiedler authored
124
725dedd @kaishin Update README and change $max-columns variable name
kaishin authored
125 ### Filling parent elements
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
126
064447b @kaishin Add Breakpoint() mixin
kaishin authored
127 This makes sure that the child fills 100% of its parent:
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
128
6986d5f Fix indent in the README
Reda Lemeden authored
129 @include fill-parent;
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
130
064447b @kaishin Add Breakpoint() mixin
kaishin authored
131 ### Breakpoints
132
133 The ```breakpoint()``` mixin allows you to use media-queries to modify both the grid and the layout. It takes two arguments:
134
135 @include breakpoint($query:$feature $value, $total-columns: $grid-columns)
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
136
064447b @kaishin Add Breakpoint() mixin
kaishin authored
137 * ```query``` contains the media feature (min-width, max-width, etc.) and the value (481px, 30em, etc.). If you specify the value only, ```min-width``` will be used by default (ideal if you follow a mobile-first approach). You can also change the default feature in the settings (see section below).
138 * ```total-columns``` (optional) is the total number of columns to be used inside this media query. Changing the total number of columns will change the width, padding and margin percentages obtained using the ```span-column``` mixin.
139
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
140 ##### Example 1
141
142 .my-class {
143 @include breakpoint(481px) {
eb018af @kaishin Fix some code indents in the README
kaishin authored
144 font-size: 1.2em;
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
145 }
146 }
064447b @kaishin Add Breakpoint() mixin
kaishin authored
147
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
148 // Compiled CSS
149
150 @media screen and (min-width: 481px) {
064447b @kaishin Add Breakpoint() mixin
kaishin authored
151 .my-class {
eb018af @kaishin Fix some code indents in the README
kaishin authored
152 font-size: 1.2em;
064447b @kaishin Add Breakpoint() mixin
kaishin authored
153 }
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
154 }
155
156 ##### Example 2
157
158 .my-class {
159 @include breakpoint(max-width 769px) {
eb018af @kaishin Fix some code indents in the README
kaishin authored
160 float: none;
064447b @kaishin Add Breakpoint() mixin
kaishin authored
161 }
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
162 }
163
164 // Compiled CSS
064447b @kaishin Add Breakpoint() mixin
kaishin authored
165
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
166 @media screen and (max-width: 769px) {
064447b @kaishin Add Breakpoint() mixin
kaishin authored
167 .my-class {
eb018af @kaishin Fix some code indents in the README
kaishin authored
168 float: none;
064447b @kaishin Add Breakpoint() mixin
kaishin authored
169 }
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
170 }
171
172 ##### Example 3
173
174 .my-class {
175 @include breakpoint(max-width 769px) {
eb018af @kaishin Fix some code indents in the README
kaishin authored
176 @include span-columns(6);
064447b @kaishin Add Breakpoint() mixin
kaishin authored
177 }
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
178 }
179
180 // Compiled CSS
181
182 @media screen and (max-width: 769px) {
064447b @kaishin Add Breakpoint() mixin
kaishin authored
183 .my-class {
eb018af @kaishin Fix some code indents in the README
kaishin authored
184 display: block;
185 float: left;
186 margin-right: 2.35765%;
187 width: 48.82117%; // That's 6 columns of the total 12
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
188 }
189
190 .my-class:last-child {
eb018af @kaishin Fix some code indents in the README
kaishin authored
191 margin-right: 0;
064447b @kaishin Add Breakpoint() mixin
kaishin authored
192 }
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
193 }
194
195 ##### Example 4
196
197 .my-class {
198 @include breakpoint(max-width 769px, 6) { // Use a 6 column grid (instead of the default 12)
eb018af @kaishin Fix some code indents in the README
kaishin authored
199 @include span-columns(6);
064447b @kaishin Add Breakpoint() mixin
kaishin authored
200 }
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
201 }
202
203 // Compiled CSS
204
205 @media screen and (max-width: 769px) {
064447b @kaishin Add Breakpoint() mixin
kaishin authored
206 .my-class {
eb018af @kaishin Fix some code indents in the README
kaishin authored
207 display: block;
208 float: left;
209 margin-right: 4.82916%;
210 width: 100%; // That's 6 columns of the total 6 specified for this media query
064447b @kaishin Add Breakpoint() mixin
kaishin authored
211 }
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
212 .my-class:last-child {
eb018af @kaishin Fix some code indents in the README
kaishin authored
213 margin-right: 0;
064447b @kaishin Add Breakpoint() mixin
kaishin authored
214 }
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
215 }
216
064447b @kaishin Add Breakpoint() mixin
kaishin authored
217 For convenience, you can create a list variable to hold your media context (breakpoint/column-count) and use it throughout your code:
218
219 $mobile: max-width 480px 4; // Use a 4 column grid in mobile devices (requires all three arguments to work)
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
220
064447b @kaishin Add Breakpoint() mixin
kaishin authored
221 .my-class {
222 @include breakpoint($mobile) {
223 @include span-columns(2);
224 }
225 }
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
226
064447b @kaishin Add Breakpoint() mixin
kaishin authored
227 // Compiled CSS
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
228
064447b @kaishin Add Breakpoint() mixin
kaishin authored
229 @media screen and (max-width: 480px) {
230 .my-class {
231 display: block;
232 float: left;
233 margin-right: 7.42297%;
234 width: 46.28851%; // 2 columns of the total 4 in this media context
235 }
236 .my-class:last-child {
237 margin-right: 0;
238 }
239 }
240
241 Here is a summary of possible argument combinations:
242
243 // YAY
244 @include breakpoint(480px);
245 @include breakpoint(max-width 480px);
246 @include breakpoint(480px, 4);
247 @include breakpoint(max-width 480px, 4);
248 @include breakpoint(max-width 480px 4); // Shorthand syntax
890365a @kaishin Reformat breakpoint() examples in the README
kaishin authored
249
064447b @kaishin Add Breakpoint() mixin
kaishin authored
250 // NAY
251 @include breakpoint(480px 4);
252 @include breakpoint(max-width 4);
253 @include breakpoint(max-width, 4);
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
254
bb3c372 Documentation
Kyle Fiedler authored
255
f142256 @kaishin Update Readme with Credits and License file
kaishin authored
256 ### Changing the defaults
bb3c372 Documentation
Kyle Fiedler authored
257
064447b @kaishin Add Breakpoint() mixin
kaishin authored
258 All the default settings can be overridden, including ```$grid-columns``` and ```$max-width```. The complete list of settings can be found in the ```/settings``` subfolder. In order to override any of these settings, redefine the variable in your site-wide ```_variables.scss``` and make sure to import it *before* Neat (failing to do so will cause Neat to use the default values):
ce8fd7d More added to the documentation
Kyle Fiedler authored
259
ed120f9 @kaishin Update the README with new instructions and fixed typos
kaishin authored
260 @import "bourbon/bourbon";
261 @import "variables";
262 @import "neat/neat";
f142256 @kaishin Update Readme with Credits and License file
kaishin authored
263
264
98d98a8 @kaishin Add browser support to the Readme
kaishin authored
265 ### Browser support
266 - Firefox 3.5+
267 - Safari 4.0+
268 - Chrome 4.0+
269 - Opera 9.5+
270 - IE 9+
271 - IE 8 with [selectivizr](http://selectivizr.com) (no ```breakpoint()``` support)
272
f142256 @kaishin Update Readme with Credits and License file
kaishin authored
273 Credits
274 ===
275
276 ![thoughtbot](http://thoughtbot.com/images/tm/logo.png)
277
278 Bourbon is maintained and funded by [thoughtbot, inc](http://thoughtbot.com/community). Tweet your questions or suggestions at [Kyle](https://twitter.com/kylefiedler) / [Reda](https://twitter.com/kaishin).
279
280 License
281 ===
282
283 Bourbon Neat is Copyright © 2012 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.
284
725dedd @kaishin Update README and change $max-columns variable name
kaishin authored
285
Something went wrong with that request. Please try again.