Skip to content

Instantly share code, notes, and snippets.

@invmatt

invmatt/_grid.scss

Last active September 19, 2016 15:58
Show Gist options
  • Save invmatt/a8c8ebc1d6317882633e to your computer and use it in GitHub Desktop.
Save invmatt/a8c8ebc1d6317882633e to your computer and use it in GitHub Desktop.
Download ZIP
CSSWizardry grid system. Switched worded grid names for numbers. This Gist can be installed via NPM using npm install gist:a8c8ebc1d6317882633e --save-dev
Raw
_grid.scss
/**
* CSSW Grid System
* Based off https://github.com/csswizardry/csswizardry-grids
*
* Modified to change word based class system to numbered & additional tidyup
*/
$class-type: if($use-silent-classes, unquote("%"), unquote("."));
/*------------------------------------*\
$MIXINS
\*------------------------------------*/
/**
* These mixins are for the library to use only, you should not need to modify
* them at all.
*
* Enclose a block of code with a media query as named in `$breakpoints`.
*/
@mixin grid-media-query($media-query) {
$breakpoint-found: false;
@each $breakpoint in $grid-breakpoints {
$name: nth($breakpoint, 1);
$declaration: nth($breakpoint, 2);
@if $media-query == $name and $declaration {
$breakpoint-found: true;
@media only screen and #{$declaration} {
@content;
}
}
}
@if not $breakpoint-found {
@warn "Breakpoint ‘#{$media-query}’ does not exist";
}
}
/**
* Drop relative positioning into silent classes which can’t take advantage of
* the `[class*="push--"]` and `[class*="pull--"]` selectors.
*/
@mixin silent-relative {
@if $use-silent-classes {
position:relative;
}
}
/*------------------------------------*\
$GRID SETUP
\*------------------------------------*/
/**
* 1. Allow the grid system to be used on lists.
* 2. Remove any margins and paddings that might affect the grid system.
* 3. Apply a negative `margin-left` to negate the columns’ gutters.
*/
#{$class-type}grid {
list-style:none; /* [1] */
margin:0; /* [2] */
padding:0; /* [2] */
margin-left:-$gutter; /* [3] */
@if not $use-markup-fix {
letter-spacing:-0.31em;
}
}
@if not $use-markup-fix {
/* Opera hack */
.opera:-o-prefocus,
#{$class-type}grid {
word-spacing:-0.43em;
}
}
/**
* 1. Cause columns to stack side-by-side.
* 2. Space columns apart.
* 3. Align columns to the tops of each other.
* 4. Full-width unless told to behave otherwise.
* 5. Required to combine fluid widths and fixed gutters.
*/
#{$class-type}grid__item {
display:inline-block; /* [1] */
padding-left:$gutter; /* [2] */
vertical-align:top; /* [3] */
@if $mobile-first {
width:100%; /* [4] */
}
-webkit-box-sizing:border-box; /* [5] */
-moz-box-sizing:border-box; /* [5] */
box-sizing:border-box; /* [5] */
@if not $use-markup-fix {
letter-spacing:normal;
word-spacing:normal;
}
}
/**
* Reversed grids allow you to structure your source in the opposite order to
* how your rendered layout will appear. Extends `.grid`.
*/
#{$class-type}grid--rev {
direction:rtl;
text-align:left;
> #{$class-type}grid__item {
direction:ltr;
text-align:left;
}
}
/**
* Gutterless grids have all the properties of regular grids, minus any spacing.
* Extends `.grid`.
*/
#{$class-type}grid--full {
margin-left:0;
> #{$class-type}grid__item {
padding-left:0;
}
}
/**
* Align the entire grid to the right. Extends `.grid`.
*/
#{$class-type}grid--right {
text-align:right;
> #{$class-type}grid__item {
text-align:left;
}
}
/**
* Centered grids align grid items centrally without needing to use push or pull
* classes. Extends `.grid`.
*/
#{$class-type}grid--center {
text-align:center;
> #{$class-type}grid__item {
text-align:left;
}
}
/**
* Align grid cells vertically (`.grid--middle` or `.grid--bottom`). Extends
* `.grid`.
*/
#{$class-type}grid--middle {
> #{$class-type}grid__item {
vertical-align:middle;
}
}
#{$class-type}grid--bottom {
> #{$class-type}grid__item {
vertical-align:bottom;
}
}
/**
* Create grids with narrower gutters. Extends `.grid`.
*/
#{$class-type}grid--narrow {
margin-left:-($gutter / 2);
> #{$class-type}grid__item {
padding-left:$gutter / 2;
}
}
/**
* Create grids with wider gutters. Extends `.grid`.
*/
#{$class-type}grid--wide {
margin-left:-($gutter * 2);
> #{$class-type}grid__item {
padding-left:$gutter * 2;
}
}
/*------------------------------------*\
$WIDTHS
\*------------------------------------*/
/**
* Create our width classes, prefixed by the specified namespace.
*/
@mixin device-type($namespace:"col--") {
$prefix: $class-type + $namespace;
/**
* Whole
*/
#{$prefix}1-1 { width:100%; }
/**
* Halves
*/
#{$prefix}1-2 { width:50%; }
/**
* Thirds
*/
#{$prefix}1-3 { width:33.333%; }
#{$prefix}2-3 { width:66.666%; }
/**
* Quarters
*/
#{$prefix}1-4 { width:25%; }
#{$prefix}2-4 { @extend #{$prefix}1-2; }
#{$prefix}3-4 { width:75%; }
/**
* Fifths
*/
#{$prefix}1-5 { width:20%; }
#{$prefix}2-5 { width:40%; }
#{$prefix}3-5 { width:60%; }
#{$prefix}4-5 { width:80%; }
/**
* Sixths
*/
#{$prefix}1-6 { width:16.666%; }
#{$prefix}2-6 { @extend #{$prefix}1-3; }
#{$prefix}3-6 { @extend #{$prefix}1-2; }
#{$prefix}4-6 { @extend #{$prefix}2-3; }
#{$prefix}5-6 { width:83.333%; }
/**
* Eighths
*/
#{$prefix}1-8 { width:12.5%; }
#{$prefix}2-8 { @extend #{$prefix}1-4; }
#{$prefix}3-8 { width:37.5%; }
#{$prefix}4-8 { @extend #{$prefix}1-2; }
#{$prefix}5-8 { width:62.5%; }
#{$prefix}6-8 { @extend #{$prefix}3-4; }
#{$prefix}7-8 { width:87.5%; }
/**
* Tenths
*/
#{$prefix}1-10 { width:10%; }
#{$prefix}2-10 { @extend #{$prefix}1-5; }
#{$prefix}3-10 { width:30%; }
#{$prefix}4-10 { @extend #{$prefix}2-5; }
#{$prefix}5-10 { @extend #{$prefix}1-2; }
#{$prefix}6-10 { @extend #{$prefix}3-5; }
#{$prefix}7-10 { width:70%; }
#{$prefix}8-10 { @extend #{$prefix}4-5; }
#{$prefix}9-10 { width:90%; }
/**
* Twelfths
*/
#{$prefix}1-12 { width:8.333%; }
#{$prefix}2-12 { @extend #{$prefix}1-6; }
#{$prefix}3-12 { @extend #{$prefix}1-4; }
#{$prefix}4-12 { @extend #{$prefix}1-3; }
#{$prefix}5-12 { width:41.666% }
#{$prefix}6-12 { @extend #{$prefix}1-2; }
#{$prefix}7-12 { width:58.333%; }
#{$prefix}8-12 { @extend #{$prefix}2-3; }
#{$prefix}9-12 { @extend #{$prefix}3-4; }
#{$prefix}10-12 { @extend #{$prefix}5-6; }
#{$prefix}11-12 { width:91.666%; }
#{$prefix}12-12 { @extend #{$prefix}1-1; }
}
/**
* Our regular, non-responsive width classes.
*/
@include device-type;
/**
* Our responsive classes, if we have enabled them.
*/
@if $responsive {
@each $name in $breakpoint-has-widths {
@include grid-media-query($name) {
@include device-type('#{$name}--');
}
}
}
/*------------------------------------*\
$PUSH
\*------------------------------------*/
/**
* Push classes, to move grid items over to the right by certain amounts.
*/
@mixin push-setup($namespace: "") {
$prefix: $class-type + "push--" + $namespace;
/**
* Whole
*/
#{$prefix}1-1 { left: 100%; @include silent-relative;}
#{$prefix}one-whole { @extend #{$prefix}1-1;}
/**
* Halves
*/
#{$prefix}1-2 { left: 50%; @include silent-relative;}
#{$prefix}one-half { @extend #{$prefix}1-2;}
/**
* Thirds
*/
#{$prefix}1-3 { left:33.333%; @include silent-relative; }
#{$prefix}2-3 { left:66.666%; @include silent-relative; }
/**
* Quarters
*/
#{$prefix}1-4 { left:25%; @include silent-relative; }
#{$prefix}2-4 { @extend #{$prefix}one-half; }
#{$prefix}3-4 { left:75%; @include silent-relative; }
/**
* Fifths
*/
#{$prefix}1-5 { left:20%; @include silent-relative; }
#{$prefix}2-5 { left:40%; @include silent-relative; }
#{$prefix}3-5 { left:60%; @include silent-relative; }
#{$prefix}4-5 { left:80%; @include silent-relative; }
/**
* Sixths
*/
#{$prefix}1-6 { left:16.666%; @include silent-relative; }
#{$prefix}2-6 { @extend #{$prefix}1-3; }
#{$prefix}3-6 { @extend #{$prefix}1-2; }
#{$prefix}4-6 { @extend #{$prefix}2-3; }
#{$prefix}5-6 { left:83.333%; @include silent-relative; }
/**
* Eighths
*/
#{$prefix}1-8 { left:12.5%; @include silent-relative; }
#{$prefix}2-8 { @extend #{$prefix}1-4; }
#{$prefix}3-8 { left:37.5%; @include silent-relative; }
#{$prefix}4-8 { @extend #{$prefix}1-2; }
#{$prefix}5-8 { left:62.5%; @include silent-relative; }
#{$prefix}6-8 { @extend #{$prefix}3-4; }
#{$prefix}7-8 { left:87.5%; @include silent-relative; }
/**
* Tenths
*/
#{$prefix}1-10 { left:10%; @include silent-relative; }
#{$prefix}2-10 { @extend #{$prefix}1-5; }
#{$prefix}3-10 { left:30%; @include silent-relative; }
#{$prefix}4-10 { @extend #{$prefix}2-5; }
#{$prefix}5-10 { @extend #{$prefix}1-2; }
#{$prefix}6-10 { @extend #{$prefix}3-5; }
#{$prefix}7-10 { left:70%; @include silent-relative; }
#{$prefix}8-10 { @extend #{$prefix}4-5; }
#{$prefix}9-10 { left:90%; @include silent-relative; }
/**
* Twelfths
*/
#{$prefix}1-12 { left:8.333%; @include silent-relative; }
#{$prefix}2-12 { @extend #{$prefix}1-6; }
#{$prefix}3-12 { @extend #{$prefix}1-4; }
#{$prefix}4-12 { @extend #{$prefix}1-3; }
#{$prefix}5-12 { left:41.666%; @include silent-relative; }
#{$prefix}6-12 { @extend #{$prefix}1-2; }
#{$prefix}7-12 { left:58.333%; @include silent-relative; }
#{$prefix}8-12 { @extend #{$prefix}2-3; }
#{$prefix}9-12 { @extend #{$prefix}3-4; }
#{$prefix}10-12 { @extend #{$prefix}5-6; }
#{$prefix}11-12 { left:91.666%; @include silent-relative; }
}
@if $push {
/**
* Not a particularly great selector, but the DRYest way to do things.
*/
[class*="push--"] { position:relative; }
@include push-setup;
@if $responsive {
@each $name in $breakpoint-has-push {
@include grid-media-query($name) {
@include push-setup('#{$name}--');
}
}
}
}
/*------------------------------------*\
$PULL
\*------------------------------------*/
/**
* Pull classes, to move grid items back to the left by certain amounts.
*/
@mixin pull-setup($namespace: "") {
$prefix: $class-type + "pull--" + $namespace;
/**
* Whole
*/
#{$prefix}1-1 { right: 100%; @include silent-relative;}
#{$prefix}one-whole { @extend #{$prefix}1-1;}
/**
* Halves
*/
#{$prefix}1-1 { right: 50%; @include silent-relative;}
#{$prefix}one-half { @extend #{$prefix}1-1;}
/**
* Thirds
*/
#{$prefix}1-3 { right:33.333%; @include silent-relative; }
#{$prefix}2-3 { right:66.666%; @include silent-relative; }
/**
* Quarters
*/
#{$prefix}1-4 { right:25%; @include silent-relative; }
#{$prefix}2-4 { @extend #{$prefix}1-2; }
#{$prefix}3-4 { right:75%; @include silent-relative; }
/**
* Fifths
*/
#{$prefix}1-5 { right:20%; @include silent-relative; }
#{$prefix}2-5 { right:40%; @include silent-relative; }
#{$prefix}3-5 { right:60%; @include silent-relative; }
#{$prefix}4-5 { right:80%; @include silent-relative; }
/**
* Sixths
*/
#{$prefix}1-6 { right:16.666%; @include silent-relative; }
#{$prefix}2-6 { @extend #{$prefix}1-3; }
#{$prefix}3-6 { @extend #{$prefix}1-2; }
#{$prefix}4-6 { @extend #{$prefix}2-3; }
#{$prefix}5-6 { right:83.333%; @include silent-relative; }
/**
* Eighths
*/
#{$prefix}1-8 { right:12.5%; @include silent-relative; }
#{$prefix}2-8 { @extend #{$prefix}1-4; }
#{$prefix}3-8 { right:37.5%; @include silent-relative; }
#{$prefix}4-8 { @extend #{$prefix}1-2; }
#{$prefix}5-8 { right:62.5%; @include silent-relative; }
#{$prefix}6-8 { @extend #{$prefix}3-4; }
#{$prefix}7-8 { right:87.5%; @include silent-relative; }
/**
* Tenths
*/
#{$prefix}1-10 { right:10%; @include silent-relative; }
#{$prefix}2-10 { @extend #{$prefix}1-5; }
#{$prefix}3-10 { right:30%; @include silent-relative; }
#{$prefix}4-10 { @extend #{$prefix}2-5; }
#{$prefix}5-10 { @extend #{$prefix}1-2; }
#{$prefix}6-10 { @extend #{$prefix}3-5; }
#{$prefix}7-10 { right:70%; @include silent-relative; }
#{$prefix}8-10 { @extend #{$prefix}4-5; }
#{$prefix}9-10 { right:90%; @include silent-relative; }
/**
* Twelfths
*/
#{$prefix}1-12 { right:8.333%; @include silent-relative; }
#{$prefix}2-12 { @extend #{$prefix}1-6; }
#{$prefix}3-12 { @extend #{$prefix}1-4; }
#{$prefix}4-12 { @extend #{$prefix}1-3; }
#{$prefix}5-12 { right:41.666%; @include silent-relative; }
#{$prefix}6-12 { @extend #{$prefix}1-2; }
#{$prefix}7-12 { right:58.333%; @include silent-relative; }
#{$prefix}8-12 { @extend #{$prefix}2-3; }
#{$prefix}9-12 { @extend #{$prefix}3-4; }
#{$prefix}10-12 { @extend #{$prefix}5-6; }
#{$prefix}11-12 { right:91.666%; @include silent-relative; }
}
@if $pull {
/**
* Not a particularly great selector, but the DRYest way to do things.
*/
[class*="pull--"] { position:relative; }
@include pull-setup;
@if $responsive {
@each $name in $breakpoint-has-pull {
@include grid-media-query($name) {
@include pull-setup('#{$name}--');
}
}
}
}
Raw
package.json
{
"name": "CSSWGridNumbered",
"version": "0.2.0"
}
@invmatt
Copy link
Author

invmatt commented Feb 29, 2016

Requires variables:

$responsive:                true                    !default;
$mobile-first:              true                    !default;
$gutter:                    14px                     !default;
$use-silent-classes:        false                   !default;
$push:                      true                    !default;
$pull:                      false                   !default;
$use-markup-fix:            false                   !default;

$breakpoint-has-widths: ('mob', 'tablet', 'desk')   !default;
$breakpoint-has-push:   ('mob', 'tablet', 'desk')   !default;
$breakpoint-has-pull:   ('mob', 'tablet', 'desk')   !default;

$grid-breakpoints: (
    'mob' '(max-width: 47.938em)',
    'tablet' '(min-width: 48em)',
    'desk' '(min-width: 68.75em)'
) !default;

@invmatt
Copy link
Author

invmatt commented Feb 29, 2016

Unprefixed grid classes are given col-value-value (Example col-1-3) namespaced classes are unaffected (mob--1-3)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment