194 |
195 |
196 | I appear first in the markup, but render second in the page.
197 |
200 | I appear second in the markup, but render first in the page.
201 |
202 |
203 |
215 |
216 |
217 | Look, ma! No gutter!
218 |
221 | Look, ma! No gutter!
222 |
223 |
224 |
231 |
232 |
233 | I render first but start in the middle of the page.
234 |
237 | I render second and appear at the very right edge of the page.
238 |
239 |
240 |
37 | *
38 | * This would give you a grid item which is 100% width unless it is on a lap
39 | * device, at which point it become 50% wide, or it is on a desktop device, at
40 | * which point it becomes 33.333% width.
41 | *
42 | * csswizardry grids also has push and pull classes which allow you to nudge
43 | * grid items left and right by a defined amount. These follow the same naming
44 | * convention as above, but are prepended by either `push--` or `pull--`, for
45 | * example:
46 | *
47 | `class="grid__item one-half push--one-half"`
48 | *
49 | * This would give you a grid item which is 50% width and pushed over to the
50 | * right by 50%.
51 | *
52 | * All classes in csswizardry grids follow this patten, so you should fairly
53 | * quickly be able to piece together any combinations you can imagine, for
54 | * example:
55 | *
56 | `class="grid__item one-whole lap--one-half desk--one-third push--desk--one-third"`
57 | *
58 | `class="grid__item one-quarter palm--one-half push--palm--one-half"`
59 | *
60 | `class="grid__item palm--one-third desk--five-twelfths"`
61 | */
62 |
63 |
64 |
65 |
66 |
67 | /*------------------------------------*\
68 | $VARIABLES
69 | \*------------------------------------*/
70 | /**
71 | * If you are building a non-responsive site but would still like to use
72 | * csswizardry-grids, set this to ‘false’:
73 | */
74 | $responsive: true !default;
75 |
76 |
77 | /**
78 | * Is this build mobile first? Setting to ‘true’ means that all grids will be
79 | * 100% width if you do not apply a more specific class to them.
80 | */
81 | $mobile-first: true !default;
82 |
83 |
84 | /**
85 | * Set the spacing between your grid items.
86 | */
87 | $gutter: 24px !default;
88 |
89 |
90 | /**
91 | * Would you like Sass’ silent classes, or regular CSS classes?
92 | */
93 | $use-silent-classes: false !default;
94 |
95 |
96 | /**
97 | * Would you like push and pull classes enabled?
98 | */
99 | $push: false !default;
100 | $pull: false !default;
101 |
102 |
103 | /**
104 | * Using `inline-block` means that the grid items need their whitespace removing
105 | * in order for them to work correctly. Set the following to true if you are
106 | * going to achieve this by manually removing/commenting out any whitespace in
107 | * your HTML yourself.
108 | *
109 | * Setting this to false invokes a hack which cannot always be guaranteed,
110 | * please see the following for more detail:
111 | *
112 | * github.com/csswizardry/csswizardry-grids/commit/744d4b23c9d2b77d605b5991e54a397df72e0688
113 | * github.com/csswizardry/inuit.css/issues/170#issuecomment-14859371
114 | */
115 | $use-markup-fix: true !default;
116 |
117 |
118 | /**
119 | * Define your breakpoints. The first value is the prefix that shall be used for
120 | * your classes (e.g. `.palm--one-half`), the second value is the media query
121 | * that the breakpoint fires at.
122 | */
123 | $breakpoints: (
124 | 'palm' '(max-width: 480px)',
125 | 'lap' '(min-width: 481px) and (max-width: 1023px)',
126 | 'portable' '(max-width: 1023px)',
127 | 'desk' '(min-width: 1024px)'
128 | ) !default;
129 |
130 |
131 | /**
132 | * Define which namespaced breakpoints you would like to generate for each of
133 | * widths, push and pull. This is handy if you only need pull on, say, desk, or
134 | * you only need a new width breakpoint at mobile sizes. It allows you to only
135 | * compile as much CSS as you need. All are turned on by default, but you can
136 | * add and remove breakpoints at will.
137 | *
138 | * Push and pull shall only be used if `$push` and/or `$pull` and `$responsive`
139 | * have been set to ‘true’.
140 | */
141 | $breakpoint-has-widths: ('palm', 'lap', 'portable', 'desk') !default;
142 | $breakpoint-has-push: ('palm', 'lap', 'portable', 'desk') !default;
143 | $breakpoint-has-pull: ('palm', 'lap', 'portable', 'desk') !default;
144 |
145 |
146 | /**
147 | * You do not need to edit anything from this line onward; csswizardry-grids is
148 | * good to go. Happy griddin’!
149 | */
150 | $class-type: if($use-silent-classes, unquote("%"), unquote("."));
151 |
152 |
153 |
154 |
155 |
156 | /*------------------------------------*\
157 | $MIXINS
158 | \*------------------------------------*/
159 | /**
160 | * These mixins are for the library to use only, you should not need to modify
161 | * them at all.
162 | *
163 | * Enclose a block of code with a media query as named in `$breakpoints`.
164 | */
165 | @mixin grid-media-query($media-query) {
166 | $breakpoint-found: false;
167 |
168 | @each $breakpoint in $breakpoints {
169 | $name: nth($breakpoint, 1);
170 | $declaration: nth($breakpoint, 2);
171 |
172 | @if $media-query == $name and $declaration {
173 | $breakpoint-found: true;
174 |
175 | @media only screen and #{$declaration} {
176 | @content;
177 | }
178 | }
179 | }
180 |
181 | @if not $breakpoint-found {
182 | @warn "Breakpoint ‘#{$media-query}’ does not exist";
183 | }
184 | }
185 |
186 |
187 | /**
188 | * Drop relative positioning into silent classes which can’t take advantage of
189 | * the `[class*="push--"]` and `[class*="pull--"]` selectors.
190 | */
191 | @mixin silent-relative {
192 | @if $use-silent-classes {
193 | position:relative;
194 | }
195 | }
196 |
197 |
198 |
199 |
200 |
201 | /*------------------------------------*\
202 | $GRID SETUP
203 | \*------------------------------------*/
204 | /**
205 | * 1. Allow the grid system to be used on lists.
206 | * 2. Remove any margins and paddings that might affect the grid system.
207 | * 3. Apply a negative `margin-left` to negate the columns’ gutters.
208 | */
209 | #{$class-type}grid {
210 | list-style:none; /* [1] */
211 | margin:0; /* [2] */
212 | padding:0; /* [2] */
213 | margin-left:-$gutter; /* [3] */
214 | @if not $use-markup-fix {
215 | letter-spacing:-0.31em;
216 | }
217 | }
218 |
219 | @if not $use-markup-fix {
220 | /* Opera hack */
221 | .opera:-o-prefocus,
222 | #{$class-type}grid {
223 | word-spacing:-0.43em;
224 | }
225 | }
226 |
227 |
228 | /**
229 | * 1. Cause columns to stack side-by-side.
230 | * 2. Space columns apart.
231 | * 3. Align columns to the tops of each other.
232 | * 4. Full-width unless told to behave otherwise.
233 | * 5. Required to combine fluid widths and fixed gutters.
234 | */
235 | #{$class-type}grid__item {
236 | display:inline-block; /* [1] */
237 | padding-left:$gutter; /* [2] */
238 | vertical-align:top; /* [3] */
239 | @if $mobile-first {
240 | width:100%; /* [4] */
241 | }
242 | -webkit-box-sizing:border-box; /* [5] */
243 | -moz-box-sizing:border-box; /* [5] */
244 | box-sizing:border-box; /* [5] */
245 | @if not $use-markup-fix {
246 | letter-spacing:normal;
247 | word-spacing:normal;
248 | }
249 | }
250 |
251 |
252 | /**
253 | * Reversed grids allow you to structure your source in the opposite order to
254 | * how your rendered layout will appear. Extends `.grid`.
255 | */
256 | #{$class-type}grid--rev {
257 | direction:rtl;
258 | text-align:left;
259 |
260 | > #{$class-type}grid__item {
261 | direction:ltr;
262 | text-align:left;
263 | }
264 | }
265 |
266 |
267 | /**
268 | * Gutterless grids have all the properties of regular grids, minus any spacing.
269 | * Extends `.grid`.
270 | */
271 | #{$class-type}grid--full {
272 | margin-left:0;
273 |
274 | > #{$class-type}grid__item {
275 | padding-left:0;
276 | }
277 | }
278 |
279 |
280 | /**
281 | * Align the entire grid to the right. Extends `.grid`.
282 | */
283 | #{$class-type}grid--right {
284 | text-align:right;
285 |
286 | > #{$class-type}grid__item {
287 | text-align:left;
288 | }
289 | }
290 |
291 |
292 | /**
293 | * Centered grids align grid items centrally without needing to use push or pull
294 | * classes. Extends `.grid`.
295 | */
296 | #{$class-type}grid--center {
297 | text-align:center;
298 |
299 | > #{$class-type}grid__item {
300 | text-align:left;
301 | }
302 | }
303 |
304 |
305 | /**
306 | * Align grid cells vertically (`.grid--middle` or `.grid--bottom`). Extends
307 | * `.grid`.
308 | */
309 | #{$class-type}grid--middle {
310 |
311 | > #{$class-type}grid__item {
312 | vertical-align:middle;
313 | }
314 | }
315 |
316 | #{$class-type}grid--bottom {
317 |
318 | > #{$class-type}grid__item {
319 | vertical-align:bottom;
320 | }
321 | }
322 |
323 |
324 | /**
325 | * Create grids with narrower gutters. Extends `.grid`.
326 | */
327 | #{$class-type}grid--narrow {
328 | margin-left:-($gutter / 2);
329 |
330 | > #{$class-type}grid__item {
331 | padding-left:$gutter / 2;
332 | }
333 | }
334 |
335 |
336 | /**
337 | * Create grids with wider gutters. Extends `.grid`.
338 | */
339 | #{$class-type}grid--wide {
340 | margin-left:-($gutter * 2);
341 |
342 | > #{$class-type}grid__item {
343 | padding-left:$gutter * 2;
344 | }
345 | }
346 |
347 |
348 |
349 |
350 |
351 | /*------------------------------------*\
352 | $WIDTHS
353 | \*------------------------------------*/
354 | /**
355 | * Create our width classes, prefixed by the specified namespace.
356 | */
357 | @mixin device-type($namespace:"") {
358 | $prefix: $class-type + $namespace;
359 |
360 | /**
361 | * Whole
362 | */
363 | #{$prefix}one-whole { width:100%; }
364 |
365 |
366 | /**
367 | * Halves
368 | */
369 | #{$prefix}one-half { width:50%; }
370 |
371 |
372 | /**
373 | * Thirds
374 | */
375 | #{$prefix}one-third { width:33.333%; }
376 | #{$prefix}two-thirds { width:66.666%; }
377 |
378 |
379 | /**
380 | * Quarters
381 | */
382 | #{$prefix}one-quarter { width:25%; }
383 | #{$prefix}two-quarters { @extend #{$prefix}one-half; }
384 | #{$prefix}three-quarters { width:75%; }
385 |
386 |
387 | /**
388 | * Fifths
389 | */
390 | #{$prefix}one-fifth { width:20%; }
391 | #{$prefix}two-fifths { width:40%; }
392 | #{$prefix}three-fifths { width:60%; }
393 | #{$prefix}four-fifths { width:80%; }
394 |
395 |
396 | /**
397 | * Sixths
398 | */
399 | #{$prefix}one-sixth { width:16.666%; }
400 | #{$prefix}two-sixths { @extend #{$prefix}one-third; }
401 | #{$prefix}three-sixths { @extend #{$prefix}one-half; }
402 | #{$prefix}four-sixths { @extend #{$prefix}two-thirds; }
403 | #{$prefix}five-sixths { width:83.333%; }
404 |
405 |
406 | /**
407 | * Eighths
408 | */
409 | #{$prefix}one-eighth { width:12.5%; }
410 | #{$prefix}two-eighths { @extend #{$prefix}one-quarter; }
411 | #{$prefix}three-eighths { width:37.5%; }
412 | #{$prefix}four-eighths { @extend #{$prefix}one-half; }
413 | #{$prefix}five-eighths { width:62.5%; }
414 | #{$prefix}six-eighths { @extend #{$prefix}three-quarters; }
415 | #{$prefix}seven-eighths { width:87.5%; }
416 |
417 |
418 | /**
419 | * Tenths
420 | */
421 | #{$prefix}one-tenth { width:10%; }
422 | #{$prefix}two-tenths { @extend #{$prefix}one-fifth; }
423 | #{$prefix}three-tenths { width:30%; }
424 | #{$prefix}four-tenths { @extend #{$prefix}two-fifths; }
425 | #{$prefix}five-tenths { @extend #{$prefix}one-half; }
426 | #{$prefix}six-tenths { @extend #{$prefix}three-fifths; }
427 | #{$prefix}seven-tenths { width:70%; }
428 | #{$prefix}eight-tenths { @extend #{$prefix}four-fifths; }
429 | #{$prefix}nine-tenths { width:90%; }
430 |
431 |
432 | /**
433 | * Twelfths
434 | */
435 | #{$prefix}one-twelfth { width:8.333%; }
436 | #{$prefix}two-twelfths { @extend #{$prefix}one-sixth; }
437 | #{$prefix}three-twelfths { @extend #{$prefix}one-quarter; }
438 | #{$prefix}four-twelfths { @extend #{$prefix}one-third; }
439 | #{$prefix}five-twelfths { width:41.666% }
440 | #{$prefix}six-twelfths { @extend #{$prefix}one-half; }
441 | #{$prefix}seven-twelfths { width:58.333%; }
442 | #{$prefix}eight-twelfths { @extend #{$prefix}two-thirds; }
443 | #{$prefix}nine-twelfths { @extend #{$prefix}three-quarters; }
444 | #{$prefix}ten-twelfths { @extend #{$prefix}five-sixths; }
445 | #{$prefix}eleven-twelfths { width:91.666%; }
446 | }
447 |
448 |
449 | /**
450 | * Our regular, non-responsive width classes.
451 | */
452 | @include device-type;
453 |
454 |
455 | /**
456 | * Our responsive classes, if we have enabled them.
457 | */
458 | @if $responsive {
459 |
460 | @each $name in $breakpoint-has-widths {
461 | @include grid-media-query($name) {
462 | @include device-type('#{$name}--');
463 | }
464 | }
465 |
466 | }
467 |
468 |
469 |
470 |
471 |
472 | /*------------------------------------*\
473 | $PUSH
474 | \*------------------------------------*/
475 | /**
476 | * Push classes, to move grid items over to the right by certain amounts.
477 | */
478 | @mixin push-setup($namespace: "") {
479 | $prefix: $class-type + "push--" + $namespace;
480 |
481 | /**
482 | * Whole
483 | */
484 | #{$prefix}one-whole { left:100%; @include silent-relative; }
485 |
486 |
487 | /**
488 | * Halves
489 | */
490 | #{$prefix}one-half { left:50%; @include silent-relative; }
491 |
492 |
493 | /**
494 | * Thirds
495 | */
496 | #{$prefix}one-third { left:33.333%; @include silent-relative; }
497 | #{$prefix}two-thirds { left:66.666%; @include silent-relative; }
498 |
499 |
500 | /**
501 | * Quarters
502 | */
503 | #{$prefix}one-quarter { left:25%; @include silent-relative; }
504 | #{$prefix}two-quarters { @extend #{$prefix}one-half; }
505 | #{$prefix}three-quarters { left:75%; @include silent-relative; }
506 |
507 |
508 | /**
509 | * Fifths
510 | */
511 | #{$prefix}one-fifth { left:20%; @include silent-relative; }
512 | #{$prefix}two-fifths { left:40%; @include silent-relative; }
513 | #{$prefix}three-fifths { left:60%; @include silent-relative; }
514 | #{$prefix}four-fifths { left:80%; @include silent-relative; }
515 |
516 |
517 | /**
518 | * Sixths
519 | */
520 | #{$prefix}one-sixth { left:16.666%; @include silent-relative; }
521 | #{$prefix}two-sixths { @extend #{$prefix}one-third; }
522 | #{$prefix}three-sixths { @extend #{$prefix}one-half; }
523 | #{$prefix}four-sixths { @extend #{$prefix}two-thirds; }
524 | #{$prefix}five-sixths { left:83.333%; @include silent-relative; }
525 |
526 |
527 | /**
528 | * Eighths
529 | */
530 | #{$prefix}one-eighth { left:12.5%; @include silent-relative; }
531 | #{$prefix}two-eighths { @extend #{$prefix}one-quarter; }
532 | #{$prefix}three-eighths { left:37.5%; @include silent-relative; }
533 | #{$prefix}four-eighths { @extend #{$prefix}one-half; }
534 | #{$prefix}five-eighths { left:62.5%; @include silent-relative; }
535 | #{$prefix}six-eighths { @extend #{$prefix}three-quarters; }
536 | #{$prefix}seven-eighths { left:87.5%; @include silent-relative; }
537 |
538 |
539 | /**
540 | * Tenths
541 | */
542 | #{$prefix}one-tenth { left:10%; @include silent-relative; }
543 | #{$prefix}two-tenths { @extend #{$prefix}one-fifth; }
544 | #{$prefix}three-tenths { left:30%; @include silent-relative; }
545 | #{$prefix}four-tenths { @extend #{$prefix}two-fifths; }
546 | #{$prefix}five-tenths { @extend #{$prefix}one-half; }
547 | #{$prefix}six-tenths { @extend #{$prefix}three-fifths; }
548 | #{$prefix}seven-tenths { left:70%; @include silent-relative; }
549 | #{$prefix}eight-tenths { @extend #{$prefix}four-fifths; }
550 | #{$prefix}nine-tenths { left:90%; @include silent-relative; }
551 |
552 |
553 | /**
554 | * Twelfths
555 | */
556 | #{$prefix}one-twelfth { left:8.333%; @include silent-relative; }
557 | #{$prefix}two-twelfths { @extend #{$prefix}one-sixth; }
558 | #{$prefix}three-twelfths { @extend #{$prefix}one-quarter; }
559 | #{$prefix}four-twelfths { @extend #{$prefix}one-third; }
560 | #{$prefix}five-twelfths { left:41.666%; @include silent-relative; }
561 | #{$prefix}six-twelfths { @extend #{$prefix}one-half; }
562 | #{$prefix}seven-twelfths { left:58.333%; @include silent-relative; }
563 | #{$prefix}eight-twelfths { @extend #{$prefix}two-thirds; }
564 | #{$prefix}nine-twelfths { @extend #{$prefix}three-quarters; }
565 | #{$prefix}ten-twelfths { @extend #{$prefix}five-sixths; }
566 | #{$prefix}eleven-twelfths { left:91.666%; @include silent-relative; }
567 | }
568 |
569 | @if $push {
570 |
571 | /**
572 | * Not a particularly great selector, but the DRYest way to do things.
573 | */
574 | [class*="push--"] { position:relative; }
575 |
576 | @include push-setup;
577 |
578 | @if $responsive {
579 | @each $name in $breakpoint-has-push {
580 | @include grid-media-query($name) {
581 | @include push-setup('#{$name}--');
582 | }
583 | }
584 | }
585 |
586 | }
587 |
588 |
589 |
590 |
591 |
592 | /*------------------------------------*\
593 | $PULL
594 | \*------------------------------------*/
595 | /**
596 | * Pull classes, to move grid items back to the left by certain amounts.
597 | */
598 | @mixin pull-setup($namespace: "") {
599 | $prefix: $class-type + "pull--" + $namespace;
600 |
601 | /**
602 | * Whole
603 | */
604 | #{$prefix}one-whole { right:100%; @include silent-relative; }
605 |
606 |
607 | /**
608 | * Halves
609 | */
610 | #{$prefix}one-half { right:50%; @include silent-relative; }
611 |
612 |
613 | /**
614 | * Thirds
615 | */
616 | #{$prefix}one-third { right:33.333%; @include silent-relative; }
617 | #{$prefix}two-thirds { right:66.666%; @include silent-relative; }
618 |
619 |
620 | /**
621 | * Quarters
622 | */
623 | #{$prefix}one-quarter { right:25%; @include silent-relative; }
624 | #{$prefix}two-quarters { @extend #{$prefix}one-half; }
625 | #{$prefix}three-quarters { right:75%; @include silent-relative; }
626 |
627 |
628 | /**
629 | * Fifths
630 | */
631 | #{$prefix}one-fifth { right:20%; @include silent-relative; }
632 | #{$prefix}two-fifths { right:40%; @include silent-relative; }
633 | #{$prefix}three-fifths { right:60%; @include silent-relative; }
634 | #{$prefix}four-fifths { right:80%; @include silent-relative; }
635 |
636 |
637 | /**
638 | * Sixths
639 | */
640 | #{$prefix}one-sixth { right:16.666%; @include silent-relative; }
641 | #{$prefix}two-sixths { @extend #{$prefix}one-third; }
642 | #{$prefix}three-sixths { @extend #{$prefix}one-half; }
643 | #{$prefix}four-sixths { @extend #{$prefix}two-thirds; }
644 | #{$prefix}five-sixths { right:83.333%; @include silent-relative; }
645 |
646 |
647 | /**
648 | * Eighths
649 | */
650 | #{$prefix}one-eighth { right:12.5%; @include silent-relative; }
651 | #{$prefix}two-eighths { @extend #{$prefix}one-quarter; }
652 | #{$prefix}three-eighths { right:37.5%; @include silent-relative; }
653 | #{$prefix}four-eighths { @extend #{$prefix}one-half; }
654 | #{$prefix}five-eighths { right:62.5%; @include silent-relative; }
655 | #{$prefix}six-eighths { @extend #{$prefix}three-quarters; }
656 | #{$prefix}seven-eighths { right:87.5%; @include silent-relative; }
657 |
658 |
659 | /**
660 | * Tenths
661 | */
662 | #{$prefix}one-tenth { right:10%; @include silent-relative; }
663 | #{$prefix}two-tenths { @extend #{$prefix}one-fifth; }
664 | #{$prefix}three-tenths { right:30%; @include silent-relative; }
665 | #{$prefix}four-tenths { @extend #{$prefix}two-fifths; }
666 | #{$prefix}five-tenths { @extend #{$prefix}one-half; }
667 | #{$prefix}six-tenths { @extend #{$prefix}three-fifths; }
668 | #{$prefix}seven-tenths { right:70%; @include silent-relative; }
669 | #{$prefix}eight-tenths { @extend #{$prefix}four-fifths; }
670 | #{$prefix}nine-tenths { right:90%; @include silent-relative; }
671 |
672 |
673 | /**
674 | * Twelfths
675 | */
676 | #{$prefix}one-twelfth { right:8.333%; @include silent-relative; }
677 | #{$prefix}two-twelfths { @extend #{$prefix}one-sixth; }
678 | #{$prefix}three-twelfths { @extend #{$prefix}one-quarter; }
679 | #{$prefix}four-twelfths { @extend #{$prefix}one-third; }
680 | #{$prefix}five-twelfths { right:41.666%; @include silent-relative; }
681 | #{$prefix}six-twelfths { @extend #{$prefix}one-half; }
682 | #{$prefix}seven-twelfths { right:58.333%; @include silent-relative; }
683 | #{$prefix}eight-twelfths { @extend #{$prefix}two-thirds; }
684 | #{$prefix}nine-twelfths { @extend #{$prefix}three-quarters; }
685 | #{$prefix}ten-twelfths { @extend #{$prefix}five-sixths; }
686 | #{$prefix}eleven-twelfths { right:91.666%; @include silent-relative; }
687 | }
688 |
689 | @if $pull {
690 |
691 | /**
692 | * Not a particularly great selector, but the DRYest way to do things.
693 | */
694 | [class*="pull--"] { position:relative; }
695 |
696 | @include pull-setup;
697 |
698 | @if $responsive {
699 | @each $name in $breakpoint-has-pull {
700 | @include grid-media-query($name) {
701 | @include pull-setup('#{$name}--');
702 | }
703 | }
704 | }
705 |
706 | }
707 |
--------------------------------------------------------------------------------