├── LICENSE
├── README.md
├── css
    ├── cutegrids.css
    └── normalize.css
└── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Darren Newberry - dazzyweb
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Cute Grids
 2 | 
 3 | ##About
 4 | 
 5 | Cute Grids is a responsive grid system full of features to help designers and developers get started with their responsive layout. Visit [Cute Grids](http://www.cutegrids.com) for more details.
 6 | 
 7 | ##Features
 8 | 
 9 | * 12 Columns
10 | 
11 | * Fully Responsive
12 | 
13 | * Mobile First
14 | 
15 | * Nestable
16 | 
17 | * Fluid
18 | 
19 | * Easy column manipulation
20 | 
21 | * plus more
22 | 
23 | ##Browser Support
24 | 
25 | Works on Chrome, Safari, Firefox, Opera, IE9+.
26 | If you need Cute grids to work in IE8 then this is possible with using respond.js polyfill for Media queries and REM-unit-polyfill for rem untis .
27 | 
28 | ##Getting Started
29 | 
30 | **Link to your stylesheet**
31 | 
32 | ```
33 | 
34 | <link rel="stylesheet" href="css/cutegrids.css">
35 | 
36 | ```
37 | **Structure layout as example below**
38 | 
39 | ```html
40 | 
41 | 
42 |     <div class="row">
43 |       <div class="cute-6-tablet">
44 |         content here....
45 |       </div>
46 |       <div class="cute-6-tablet">
47 |         content here....
48 |       </div>
49 |     </div>
50 | 
51 | ```
52 | Wrap the cute columns in a row. Make sure that all cute columns add up to 12. Column classes named by cute- then number of columns followed by device name for example .cute-6-tablet. Column class device widths applies to the specified  device width and wider devices widths up. Below the device width size columns are stacked and stretched 100 percent.
53 | 
54 | For full instructions using Cute Grids visit [www.cutegrids.com](http://www.cutegrids.com)
55 | 
56 | ##Support
57 | 
58 | If you have any questions or need some support using Cute Grids then please feel free to contact me.
59 | 
60 | Email: [contact@dazzyweb.com](mailto:contact@dazzyweb.com)
61 | 
62 | or connect with me on twitter [@dazzy_web](https://twitter.com/dazzy_web)
63 | 
64 | ##Copyright & License
65 | 
66 | Copyright (C) 2014 Darren Newberry - Released under the MIT License.
67 | 
68 | 


--------------------------------------------------------------------------------
/css/cutegrids.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | *
  3 | * Cute Grids v1.0.1
  4 | * Copyright 2014 Darren Newberry
  5 | * http://www.cutegrids.com
  6 | * Free to use under the MIT Licence
  7 | * http://www.opensource.org/licenses/mit-license.php
  8 | *
  9 | */
 10 | 
 11 | *,
 12 | *:after,
 13 | *:before {
 14 |   margin: 0;
 15 |   padding: 0;
 16 |   -webkit-box-sizing: border-box;
 17 |      -moz-box-sizing: border-box;
 18 |           box-sizing: border-box
 19 | }
 20 | 
 21 | /* Set the width of the row to what you like */
 22 | .row {
 23 |   width: 100%;
 24 |   max-width:75rem; /* max Width of row, Change to what you like */
 25 |   margin:0 auto;
 26 | }
 27 | 
 28 | /* Nested row 1 level down */
 29 | /* Change the gutter if you like, currently set as 0.65em */
 30 | .row .row {
 31 |   margin-left: -0.65rem; /* minus left gutter for nested rows */
 32 |   margin-right: -0.65rem; /* minus Right gutter for nested rows */
 33 |   width: auto;
 34 | }
 35 | 
 36 | [class*='cute-'] {
 37 |   float: left;
 38 |   position: relative;
 39 |   padding: 0.65rem; /* top, bottom, left and right padding for columns */
 40 |   width:100%;
 41 | }
 42 | 
 43 | /* Remove this if you want the columns to float left when they overflow the row */
 44 | 
 45 | [class*='cute-']:last-of-type {
 46 |   float: right;
 47 | }
 48 | 
 49 | /* Clearfix */
 50 | .row:after, .group:after, .clearfix:after {
 51 |   content: "";
 52 |   display: table;
 53 |   clear: both
 54 | }
 55 | .container:before,
 56 | .container:after {
 57 |   display: table;
 58 |   content: " ";
 59 | }
 60 | 
 61 | .container:after {
 62 |   clear: both;
 63 | }
 64 | 
 65 | .left {
 66 |   float: left !important;
 67 | }
 68 | 
 69 | .right {
 70 |   float: right !important;
 71 | }
 72 | 
 73 | /* Grid classes for phone screen widths  */
 74 | @media only screen {
 75 |   .cute-1-phone { width: 8.3333333333333%; }
 76 |   .cute-2-phone { width: 16.666666666667%; }
 77 |   .cute-3-phone { width: 25%; }
 78 |   .cute-4-phone { width: 33.333333333333%; }
 79 |   .cute-5-phone { width: 41.666666666667%; }
 80 |   .cute-6-phone { width: 50%; }
 81 |   .cute-7-phone { width: 58.333333333333%; }
 82 |   .cute-8-phone { width: 66.666666666667%; }
 83 |   .cute-9-phone { width: 75%; }
 84 |   .cute-10-phone { width: 83.333333333333%; }
 85 |   .cute-11-phone { width: 91.666666666667%; }
 86 |   .cute-12-phone { width: 100%; }
 87 | 
 88 |   /* offset for phone size */
 89 |   .cute-0-phone-offset { margin: 0; }
 90 |   .cute-1-phone-offset { margin-left: 8.3333333333333%; }
 91 |   .cute-2-phone-offset { margin-left: 16.666666666667%; }
 92 |   .cute-3-phone-offset { margin-left: 25%; }
 93 |   .cute-4-phone-offset { margin-left: 33.333333333333%; }
 94 |   .cute-5-phone-offset { margin-left: 41.666666666667%; }
 95 |   .cute-6-phone-offset { margin-left: 50%; }
 96 |   .cute-7-phone-offset { margin-left: 58.333333333333%; }
 97 |   .cute-8-phone-offset { margin-left: 66.666666666667%; }
 98 |   .cute-9-phone-offset { margin-left: 75%; }
 99 |   .cute-10-phone-offset { margin-left: 83.333333333333%; }
100 |   .cute-11-phone-offset { margin-left: 91.666666666667%; }
101 | 
102 |   .cute-1-phone-push { left: 8.3333333333333%; }
103 |   .cute-2-phone-push { left: 16.666666666667%; }
104 |   .cute-3-phone-push { left: 25%; }
105 |   .cute-4-phone-push { left: 33.333333333333%; }
106 |   .cute-5-phone-push { left: 41.666666666667%; }
107 |   .cute-6-phone-push { left: 50%; }
108 |   .cute-7-phone-push { left: 58.333333333333%; }
109 |   .cute-8-phone-push { left: 66.666666666667%; }
110 |   .cute-9-phone-push { left: 75%; }
111 |   .cute-10-phone-push { left: 83.333333333333%; }
112 |   .cute-11-phone-push { left: 91.666666666667%; }
113 | 
114 |   .cute-1-phone-pull { right: 8.3333333333333%; }
115 |   .cute-2-phone-pull { right: 16.666666666667%; }
116 |   .cute-3-phone-pull { right: 25%; }
117 |   .cute-4-phone-pull { right: 33.333333333333%; }
118 |   .cute-5-phone-pull { right: 41.666666666667%; }
119 |   .cute-6-phone-pull { right: 50%; }
120 |   .cute-7-phone-pull { right: 58.333333333333%; }
121 |   .cute-8-phone-pull { right: 66.666666666667%; }
122 |   .cute-9-phone-pull { right: 75%; }
123 |   .cute-10-phone-pull { right: 83.333333333333%; }
124 |   .cute-11-phone-pull { right: 91.666666666667%; }
125 | 
126 |   .center-phone {
127 |     margin-left: auto;
128 |     margin-right:auto;
129 |     float:none !important;
130 |   }
131 |   .uncenter-phone {
132 |     margin-left: 0;
133 |     margin-right: 0;
134 |     float:left !important;
135 |   }
136 |   .uncenter-phone.right {
137 |     float:right !important;
138 |   }
139 | 
140 |   [class*='cute-'].phone-reset {
141 |     margin-left: 0;
142 |     margin-right: 0;
143 |     left: auto;
144 |     right: auto;
145 |     float: left; }
146 | }
147 | /* Grid classes for tablet screen widths  */
148 | @media only screen and (min-width: 48em) {
149 |   .cute-1-tablet { width: 8.3333333333333%; }
150 |   .cute-2-tablet { width: 16.666666666667%; }
151 |   .cute-3-tablet { width: 25%; }
152 |   .cute-4-tablet { width: 33.333333333333%; }
153 |   .cute-5-tablet { width: 41.666666666667%; }
154 |   .cute-6-tablet { width: 50%; }
155 |   .cute-7-tablet { width: 58.333333333333%; }
156 |   .cute-8-tablet { width: 66.666666666667%; }
157 |   .cute-9-tablet { width: 75%; }
158 |   .cute-10-tablet { width: 83.333333333333%; }
159 |   .cute-11-tablet { width: 91.666666666667%; }
160 |   .cute-12-tablet { width: 100%; }
161 | 
162 |     /* offset for tablet screen widths */
163 |   .cute-0-tablet-offset { margin: 0; }
164 |   .cute-1-tablet-offset { margin-left: 8.3333333333333%; }
165 |   .cute-2-tablet-offset { margin-left: 16.666666666667%; }
166 |   .cute-3-tablet-offset { margin-left: 25%; }
167 |   .cute-4-tablet-offset { margin-left: 33.333333333333%; }
168 |   .cute-5-tablet-offset { margin-left: 41.666666666667%; }
169 |   .cute-6-tablet-offset { margin-left: 50%; }
170 |   .cute-7-tablet-offset { margin-left: 58.333333333333%; }
171 |   .cute-8-tablet-offset { margin-left: 66.666666666667%; }
172 |   .cute-9-tablet-offset { margin-left: 75%; }
173 |   .cute-10-tablet-offset { margin-left: 83.333333333333%; }
174 |   .cute-11-tablet-offset { margin-left: 91.666666666667%; }
175 | 
176 |   .cute-1-tablet-push { left: 8.3333333333333%; }
177 |   .cute-2-tablet-push { left: 16.666666666667%; }
178 |   .cute-3-tablet-push { left: 25%; }
179 |   .cute-4-tablet-push { left: 33.333333333333%; }
180 |   .cute-5-tablet-push { left: 41.666666666667%; }
181 |   .cute-6-tablet-push { left: 50%; }
182 |   .cute-7-tablet-push { left: 58.333333333333%; }
183 |   .cute-8-tablet-push { left: 66.666666666667%; }
184 |   .cute-9-tablet-push { left: 75%; }
185 |   .cute-10-tablet-push { left: 83.333333333333%; }
186 |   .cute-11-tablet-push { left: 91.666666666667%; }
187 | 
188 |   .cute-1-tablet-pull { right: 8.3333333333333%; }
189 |   .cute-2-tablet-pull { right: 16.666666666667%; }
190 |   .cute-3-tablet-pull { right: 25%; }
191 |   .cute-4-tablet-pull { right: 33.333333333333%; }
192 |   .cute-5-tablet-pull { right: 41.666666666667%; }
193 |   .cute-6-tablet-pull { right: 50%; }
194 |   .cute-7-tablet-pull { right: 58.333333333333%; }
195 |   .cute-8-tablet-pull { right: 66.666666666667%; }
196 |   .cute-9-tablet-pull { right: 75%; }
197 |   .cute-10-tablet-pull { right: 83.333333333333%; }
198 |   .cute-11-tablet-pull { right: 91.666666666667%; }
199 | 
200 |   .center-tablet {
201 |     margin-left: auto;
202 |     margin-right:auto;
203 |     float:none !important;
204 |   }
205 |   .uncenter-tablet {
206 |     margin-left: 0;
207 |     margin-right: 0;
208 |     float:left !important;
209 |   }
210 |   .uncenter-tablet.right {
211 |     float:right !important;
212 |   }
213 | 
214 |   [class*='cute-'].tablet-reset {
215 |     margin-left: 0;
216 |     margin-right: 0;
217 |     left: auto;
218 |     right: auto;
219 |     float: left; }
220 | }
221 | /* Grid classes for wide Tablet / Laptop to Small Desktop Size */
222 | 
223 | @media only screen and (min-width: 62em) {
224 |   .cute-1-laptop { width: 8.3333333333333%; }
225 |   .cute-2-laptop { width: 16.666666666667%; }
226 |   .cute-3-laptop { width: 25%; }
227 |   .cute-4-laptop { width: 33.333333333333%; }
228 |   .cute-5-laptop { width: 41.666666666667%; }
229 |   .cute-6-laptop { width: 50%; }
230 |   .cute-7-laptop { width: 58.333333333333%; }
231 |   .cute-8-laptop { width: 66.666666666667%; }
232 |   .cute-9-laptop { width: 75%; }
233 |   .cute-10-laptop { width: 83.333333333333%; }
234 |   .cute-11-laptop { width: 91.666666666667%; }
235 |   .cute-12-laptop { width: 100%; }
236 | 
237 |   /* offset for tablet laptop widths */
238 |   .cute-0-laptop-offset { margin: 0; }
239 |   .cute-1-laptop-offset { margin-left: 8.3333333333333%; }
240 |   .cute-2-laptop-offset { margin-left: 16.666666666667%; }
241 |   .cute-3-laptop-offset { margin-left: 25%; }
242 |   .cute-4-laptop-offset { margin-left: 33.333333333333%; }
243 |   .cute-5-laptop-offset { margin-left: 41.666666666667%; }
244 |   .cute-6-laptop-offset { margin-left: 50%; }
245 |   .cute-7-laptop-offset { margin-left: 58.333333333333%; }
246 |   .cute-8-laptop-offset { margin-left: 66.666666666667%; }
247 |   .cute-9-laptop-offset { margin-left: 75%; }
248 |   .cute-10-laptop-offset { margin-left: 83.333333333333%; }
249 |   .cute-11-laptop-offset { margin-left: 91.666666666667%; }
250 | 
251 |   .cute-1-laptop-push { left: 8.3333333333333%; }
252 |   .cute-2-laptop-push { left: 16.666666666667%; }
253 |   .cute-3-laptop-push { left: 25%; }
254 |   .cute-4-laptop-push { left: 33.333333333333%; }
255 |   .cute-5-laptop-push { left: 41.666666666667%; }
256 |   .cute-6-laptop-push { left: 50%; }
257 |   .cute-7-laptop-push { left: 58.333333333333%; }
258 |   .cute-8-laptop-push { left: 66.666666666667%; }
259 |   .cute-9-laptop-push { left: 75%; }
260 |   .cute-10-laptop-push { left: 83.333333333333%; }
261 |   .cute-11-laptop-push { left: 91.666666666667%; }
262 | 
263 |   .cute-1-laptop-pull { right: 8.3333333333333%; }
264 |   .cute-2-laptop-pull { right: 16.666666666667%; }
265 |   .cute-3-laptop-pull { right: 25%; }
266 |   .cute-4-laptop-pull { right: 33.333333333333%; }
267 |   .cute-5-laptop-pull { right: 41.666666666667%; }
268 |   .cute-6-laptop-pull { right: 50%; }
269 |   .cute-7-laptop-pull { right: 58.333333333333%; }
270 |   .cute-8-laptop-pull { right: 66.666666666667%; }
271 |   .cute-9-laptop-pull { right: 75%; }
272 |   .cute-10-laptop-pull { right: 83.333333333333%; }
273 |   .cute-11-laptop-pull { right: 91.666666666667%; }
274 | 
275 |   .center-laptop {
276 |     margin-left: auto;
277 |     margin-right:auto;
278 |     float:none !important;
279 |   }
280 |   .uncenter-laptop {
281 |     margin-left: 0;
282 |     margin-right: 0;
283 |     float:left !important;
284 |   }
285 |   .uncenter-laptop.right {
286 |     float:right !important;
287 |   }
288 | 
289 |   [class*='cute-'].laptop-reset {
290 |     margin-left: 0;
291 |     margin-right: 0;
292 |     left: auto;
293 |     right: auto;
294 |     float: left; }
295 | }
296 | 
297 | /* Grid Classes for Large Desktop Size */
298 | .show-desktop { display: none; }
299 | @media only screen and (min-width: 75em) {
300 |   .cute-1-desktop { width: 8.3333333333333%; }
301 |   .cute-2-desktop { width: 16.666666666667%; }
302 |   .cute-3-desktop { width: 25%; }
303 |   .cute-4-desktop { width: 33.333333333333%; }
304 |   .cute-5-desktop { width: 41.666666666667%; }
305 |   .cute-6-desktop { width: 50%; }
306 |   .cute-7-desktop { width: 58.333333333333%; }
307 |   .cute-8-desktop { width: 66.666666666667%; }
308 |   .cute-9-desktop { width: 75%; }
309 |   .cute-10-desktop { width: 83.333333333333%; }
310 |   .cute-11-desktop { width: 91.666666666667%; }
311 |   .cute-12-desktop { width: 100%; }
312 | 
313 |   /* offset for tablet laptop widths */
314 |   .cute-0-desktop-offset { margin: 0; }
315 |   .cute-1-desktop-offset { margin-left: 8.3333333333333%; }
316 |   .cute-2-desktop-offset { margin-left: 16.666666666667%; }
317 |   .cute-3-desktop-offset { margin-left: 25%; }
318 |   .cute-4-desktop-offset { margin-left: 33.333333333333%; }
319 |   .cute-5-desktop-offset { margin-left: 41.666666666667%; }
320 |   .cute-6-desktop-offset { margin-left: 50%; }
321 |   .cute-7-desktop-offset { margin-left: 58.333333333333%; }
322 |   .cute-8-desktop-offset { margin-left: 66.666666666667%; }
323 |   .cute-9-desktop-offset { margin-left: 75%; }
324 |   .cute-10-desktop-offset { margin-left: 83.333333333333%; }
325 |   .cute-11-desktop-offset { margin-left: 91.666666666667%; }
326 | 
327 |   .cute-1-desktop-push { left: 8.3333333333333%; }
328 |   .cute-2-desktop-push { left: 16.666666666667%; }
329 |   .cute-3-desktop-push { left: 25%; }
330 |   .cute-4-desktop-push { left: 33.333333333333%; }
331 |   .cute-5-desktop-push { left: 41.666666666667%; }
332 |   .cute-6-desktop-push { left: 50%; }
333 |   .cute-7-desktop-push { left: 58.333333333333%; }
334 |   .cute-8-desktop-push { left: 66.666666666667%; }
335 |   .cute-9-desktop-push { left: 75%; }
336 |   .cute-10-desktop-push { left: 83.333333333333%; }
337 |   .cute-11-desktop-push { left: 91.666666666667%; }
338 | 
339 |   .cute-1-desktop-pull { right: 8.3333333333333%; }
340 |   .cute-2-desktop-pull { right: 16.666666666667%; }
341 |   .cute-3-desktop-pull { right: 25%; }
342 |   .cute-4-desktop-pull { right: 33.333333333333%; }
343 |   .cute-5-desktop-pull { right: 41.666666666667%; }
344 |   .cute-6-desktop-pull { right: 50%; }
345 |   .cute-7-desktop-pull { right: 58.333333333333%; }
346 |   .cute-8-desktop-pull { right: 66.666666666667%; }
347 |   .cute-9-desktop-pull { right: 75%; }
348 |   .cute-10-desktop-pull { right: 83.333333333333%; }
349 |   .cute-11-desktop-pull { right: 91.666666666667%; }
350 | 
351 |   .center-desktop {
352 |     margin-left: auto;
353 |     margin-right:auto;
354 |     float:none !important;
355 |   }
356 |   .uncenter-desktop {
357 |     margin-left: 0;
358 |     margin-right: 0;
359 |     float:left !important;
360 |   }
361 |   .uncenter-desktop.right {
362 |     float:right !important;
363 |   }
364 | 
365 |   [class*='cute-'].desktop-reset {
366 |     margin-left: 0;
367 |     margin-right: 0;
368 |     left: auto;
369 |     right: auto;
370 |     float: left; }
371 | }
372 | 
373 | @media only screen and (max-width: 30em){
374 |     .cute-100 { width:100%;}
375 | }
376 | 
377 | /* Make visible or hidden block elements */
378 | 
379 |   .show-phone, .show-tablet, .show-laptop, .show-desktop { display: none !important; }
380 |   .hide-phone { display: block !important; }
381 | 
382 | @media only screen and (max-width: 47.938em) {
383 |   .phone { width: 100%; }
384 |   .hide-phone { display:none !important; }
385 |   .show-phone { display: block !important; }
386 | }
387 |  
388 | @media only screen and (min-width: 48em) and (max-width: 61.938em) { 
389 |   .hide-tablet { display: none !important; }
390 |   .show-tablet { display: block !important; }
391 | }
392 |   
393 | @media only screen and (min-width: 62em) and (max-width: 74.938em) { 
394 |   .hide-laptop { display: none !important; }
395 |   .show-laptop { display: block !important; }
396 | }
397 | 
398 | @media only screen and (min-width: 75em) { 
399 |   .hide-desktop { display: none !important; }
400 |   .show-desktop { display: block !important; } 
401 | }
402 | 
403 | /* make images responsive */
404 | .responsive-img {
405 |     display: block;
406 |     height: auto;
407 |     max-width: 100%;
408 | }
409 | /* Optional Extras */
410 | 
411 | /* something to keep tables horizontal with scroll when on small screen 
412 | *  Useful if table is wide. Set media query to point where table needs it
413 | */ 
414 | /*
415 | @media only screen and (max-width: 47.938em) {
416 |   .table-respond {
417 |     width: 100%;
418 |     overflow-x: scroll;
419 |     overflow-y: hidden;
420 | }
421 | }
422 | */
423 | 
424 | 


--------------------------------------------------------------------------------
/css/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.0 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *    user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-text-size-adjust: 100%; /* 2 */
 13 | }
 14 | 
 15 | /**
 16 |  * Remove default margin.
 17 |  */
 18 | 
 19 | body {
 20 |   margin: 0;
 21 | }
 22 | 
 23 | /* HTML5 display definitions
 24 |    ========================================================================== */
 25 | 
 26 | /**
 27 |  * Correct `block` display not defined in IE 8/9.
 28 |  */
 29 | 
 30 | article,
 31 | aside,
 32 | details,
 33 | figcaption,
 34 | figure,
 35 | footer,
 36 | header,
 37 | hgroup,
 38 | main,
 39 | nav,
 40 | section,
 41 | summary {
 42 |   display: block;
 43 | }
 44 | 
 45 | /**
 46 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 47 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 48 |  */
 49 | 
 50 | audio,
 51 | canvas,
 52 | progress,
 53 | video {
 54 |   display: inline-block; /* 1 */
 55 |   vertical-align: baseline; /* 2 */
 56 | }
 57 | 
 58 | /**
 59 |  * Prevent modern browsers from displaying `audio` without controls.
 60 |  * Remove excess height in iOS 5 devices.
 61 |  */
 62 | 
 63 | audio:not([controls]) {
 64 |   display: none;
 65 |   height: 0;
 66 | }
 67 | 
 68 | /**
 69 |  * Address `[hidden]` styling not present in IE 8/9.
 70 |  * Hide the `template` element in IE, Safari, and Firefox < 22.
 71 |  */
 72 | 
 73 | [hidden],
 74 | template {
 75 |   display: none;
 76 | }
 77 | 
 78 | /* Links
 79 |    ========================================================================== */
 80 | 
 81 | /**
 82 |  * Remove the gray background color from active links in IE 10.
 83 |  */
 84 | 
 85 | a {
 86 |   background: transparent;
 87 | }
 88 | 
 89 | /**
 90 |  * Improve readability when focused and also mouse hovered in all browsers.
 91 |  */
 92 | 
 93 | a:active,
 94 | a:hover {
 95 |   outline: 0;
 96 | }
 97 | 
 98 | /* Text-level semantics
 99 |    ========================================================================== */
100 | 
101 | /**
102 |  * Address styling not present in IE 8/9, Safari 5, and Chrome.
103 |  */
104 | 
105 | abbr[title] {
106 |   border-bottom: 1px dotted;
107 | }
108 | 
109 | /**
110 |  * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
111 |  */
112 | 
113 | b,
114 | strong {
115 |   font-weight: bold;
116 | }
117 | 
118 | /**
119 |  * Address styling not present in Safari 5 and Chrome.
120 |  */
121 | 
122 | dfn {
123 |   font-style: italic;
124 | }
125 | 
126 | /**
127 |  * Address variable `h1` font-size and margin within `section` and `article`
128 |  * contexts in Firefox 4+, Safari 5, and Chrome.
129 |  */
130 | 
131 | h1 {
132 |   font-size: 2em;
133 |   margin: 0.67em 0;
134 | }
135 | 
136 | /**
137 |  * Address styling not present in IE 8/9.
138 |  */
139 | 
140 | mark {
141 |   background: #ff0;
142 |   color: #000;
143 | }
144 | 
145 | /**
146 |  * Address inconsistent and variable font size in all browsers.
147 |  */
148 | 
149 | small {
150 |   font-size: 80%;
151 | }
152 | 
153 | /**
154 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
155 |  */
156 | 
157 | sub,
158 | sup {
159 |   font-size: 75%;
160 |   line-height: 0;
161 |   position: relative;
162 |   vertical-align: baseline;
163 | }
164 | 
165 | sup {
166 |   top: -0.5em;
167 | }
168 | 
169 | sub {
170 |   bottom: -0.25em;
171 | }
172 | 
173 | /* Embedded content
174 |    ========================================================================== */
175 | 
176 | /**
177 |  * Remove border when inside `a` element in IE 8/9.
178 |  */
179 | 
180 | img {
181 |   border: 0;
182 | }
183 | 
184 | /**
185 |  * Correct overflow displayed oddly in IE 9.
186 |  */
187 | 
188 | svg:not(:root) {
189 |   overflow: hidden;
190 | }
191 | 
192 | /* Grouping content
193 |    ========================================================================== */
194 | 
195 | /**
196 |  * Address margin not present in IE 8/9 and Safari 5.
197 |  */
198 | 
199 | figure {
200 |   margin: 1em 40px;
201 | }
202 | 
203 | /**
204 |  * Address differences between Firefox and other browsers.
205 |  */
206 | 
207 | hr {
208 |   -moz-box-sizing: content-box;
209 |   box-sizing: content-box;
210 |   height: 0;
211 | }
212 | 
213 | /**
214 |  * Contain overflow in all browsers.
215 |  */
216 | 
217 | pre {
218 |   overflow: auto;
219 | }
220 | 
221 | /**
222 |  * Address odd `em`-unit font size rendering in all browsers.
223 |  */
224 | 
225 | code,
226 | kbd,
227 | pre,
228 | samp {
229 |   font-family: monospace, monospace;
230 |   font-size: 1em;
231 | }
232 | 
233 | /* Forms
234 |    ========================================================================== */
235 | 
236 | /**
237 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
238 |  * styling of `select`, unless a `border` property is set.
239 |  */
240 | 
241 | /**
242 |  * 1. Correct color not being inherited.
243 |  *    Known issue: affects color of disabled elements.
244 |  * 2. Correct font properties not being inherited.
245 |  * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
246 |  */
247 | 
248 | button,
249 | input,
250 | optgroup,
251 | select,
252 | textarea {
253 |   color: inherit; /* 1 */
254 |   font: inherit; /* 2 */
255 |   margin: 0; /* 3 */
256 | }
257 | 
258 | /**
259 |  * Address `overflow` set to `hidden` in IE 8/9/10.
260 |  */
261 | 
262 | button {
263 |   overflow: visible;
264 | }
265 | 
266 | /**
267 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
268 |  * All other form control elements do not inherit `text-transform` values.
269 |  * Correct `button` style inheritance in Firefox, IE 8+, and Opera
270 |  * Correct `select` style inheritance in Firefox.
271 |  */
272 | 
273 | button,
274 | select {
275 |   text-transform: none;
276 | }
277 | 
278 | /**
279 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
280 |  *    and `video` controls.
281 |  * 2. Correct inability to style clickable `input` types in iOS.
282 |  * 3. Improve usability and consistency of cursor style between image-type
283 |  *    `input` and others.
284 |  */
285 | 
286 | button,
287 | html input[type="button"], /* 1 */
288 | input[type="reset"],
289 | input[type="submit"] {
290 |   -webkit-appearance: button; /* 2 */
291 |   cursor: pointer; /* 3 */
292 | }
293 | 
294 | /**
295 |  * Re-set default cursor for disabled elements.
296 |  */
297 | 
298 | button[disabled],
299 | html input[disabled] {
300 |   cursor: default;
301 | }
302 | 
303 | /**
304 |  * Remove inner padding and border in Firefox 4+.
305 |  */
306 | 
307 | button::-moz-focus-inner,
308 | input::-moz-focus-inner {
309 |   border: 0;
310 |   padding: 0;
311 | }
312 | 
313 | /**
314 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
315 |  * the UA stylesheet.
316 |  */
317 | 
318 | input {
319 |   line-height: normal;
320 | }
321 | 
322 | /**
323 |  * It's recommended that you don't attempt to style these elements.
324 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
325 |  *
326 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
327 |  * 2. Remove excess padding in IE 8/9/10.
328 |  */
329 | 
330 | input[type="checkbox"],
331 | input[type="radio"] {
332 |   box-sizing: border-box; /* 1 */
333 |   padding: 0; /* 2 */
334 | }
335 | 
336 | /**
337 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
338 |  * `font-size` values of the `input`, it causes the cursor style of the
339 |  * decrement button to change from `default` to `text`.
340 |  */
341 | 
342 | input[type="number"]::-webkit-inner-spin-button,
343 | input[type="number"]::-webkit-outer-spin-button {
344 |   height: auto;
345 | }
346 | 
347 | /**
348 |  * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
349 |  * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
350 |  *    (include `-moz` to future-proof).
351 |  */
352 | 
353 | input[type="search"] {
354 |   -webkit-appearance: textfield; /* 1 */
355 |   -moz-box-sizing: content-box;
356 |   -webkit-box-sizing: content-box; /* 2 */
357 |   box-sizing: content-box;
358 | }
359 | 
360 | /**
361 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
362 |  * Safari (but not Chrome) clips the cancel button when the search input has
363 |  * padding (and `textfield` appearance).
364 |  */
365 | 
366 | input[type="search"]::-webkit-search-cancel-button,
367 | input[type="search"]::-webkit-search-decoration {
368 |   -webkit-appearance: none;
369 | }
370 | 
371 | /**
372 |  * Define consistent border, margin, and padding.
373 |  */
374 | 
375 | fieldset {
376 |   border: 1px solid #c0c0c0;
377 |   margin: 0 2px;
378 |   padding: 0.35em 0.625em 0.75em;
379 | }
380 | 
381 | /**
382 |  * 1. Correct `color` not being inherited in IE 8/9.
383 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
384 |  */
385 | 
386 | legend {
387 |   border: 0; /* 1 */
388 |   padding: 0; /* 2 */
389 | }
390 | 
391 | /**
392 |  * Remove default vertical scrollbar in IE 8/9.
393 |  */
394 | 
395 | textarea {
396 |   overflow: auto;
397 | }
398 | 
399 | /**
400 |  * Don't inherit the `font-weight` (applied by a rule above).
401 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
402 |  */
403 | 
404 | optgroup {
405 |   font-weight: bold;
406 | }
407 | 
408 | /* Tables
409 |    ========================================================================== */
410 | 
411 | /**
412 |  * Remove most spacing between table cells.
413 |  */
414 | 
415 | table {
416 |   border-collapse: collapse;
417 |   border-spacing: 0;
418 | }
419 | 
420 | td,
421 | th {
422 |   padding: 0;
423 | }
424 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Cutegrids</title>
 7 |     <link rel="stylesheet" href="css/normalize.css">
 8 |     <link rel="stylesheet" href="css/cutegrids.css">
 9 |     <!--  For IE8 support include the following Respond.js for support of media queiries and also download and include the REM pollyfill from https://github.com/chuckcarpenter/REM-unit-polyfill for REM support -->
10 |     <!--[if lt IE 9]>
11 |     	<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
12 | 		<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
13 |     <![endif]-->
14 |     <style>
15 |         h1 {
16 |             text-align: center;
17 |         }
18 |         .box {
19 |           text-align: center;
20 |           font: 15px "Helvetica Neue";
21 |           background:#5F9BD1;
22 |           color: #fff;
23 |           padding: 15px 0;
24 |           
25 |         }
26 |     </style>
27 | </head>
28 | <body>
29 |     <div class="row">
30 |         <div class="cute-12-tablet">
31 |             <h1>Cute Grids</h1>
32 |         </div>
33 |     </div>
34 |     <div class="row">
35 |         <div class="cute-12-tablet">
36 |             <div class="box">
37 |                 cute-12-tablet
38 |             </div>
39 |         </div>
40 |     </div>
41 |     <div class="row">
42 |         <div class="cute-6-tablet">
43 |             <div class="box">
44 |                 <p>cute-6-tablet</p>
45 |             </div>
46 |         </div>
47 |         <div class="cute-6-tablet">
48 |             <div class="box">
49 |                 <p>cute-6-tablet</p>
50 |             </div>
51 |         </div>
52 |     </div>
53 |     <div class="row">
54 |         <div class="cute-3-tablet">
55 |             <div class="box">
56 |                 <p>cute-4-tablet</p>
57 |             </div>
58 |         </div>
59 |         <div class="cute-3-tablet">
60 |             <div class="box">
61 |                 <p>cute-4-tablet</p>
62 |             </div>
63 |         </div>
64 |         <div class="cute-3-tablet">
65 |             <div class="box">
66 |                 <p>cute-4-tablet</p>
67 |             </div>
68 |         </div>
69 |         <div class="cute-3-tablet">
70 |             <div class="box">
71 |                 <p>cute-4-tablet</p>
72 |             </div>
73 |         </div>
74 |     </div>
75 | </body>
76 | </html>


--------------------------------------------------------------------------------