Grid

grid.scss

/*
    Rough first-go, need to create mixins so you can use these styles in your own classes.
    But for now, you can just use the grid classes and it'll work.
*/
$column-gutter: 26px;
$default-padding: $column-gutter / 2;
$max-row-width: 1000px;

/*
    This kinda thing should be in a normalise file anyway - but if not, throw it in somewhere.
*/
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@mixin grid-gutter($collapsed: false) {
    float: left;
    position: relative;
    @if ($collapsed == false) {
        padding: 0 ($column-gutter / 2);
    }
    @if ($collapsed == true) {
        padding: 0 0;
    }
}

/*
    TODO: these should be a single mixin
*/
@mixin grid-row {
    margin: 0 auto;
    max-width: $max-row-width;
    width: 100%;
}

@mixin grid-row-nested {
    width: auto;
    margin-left: 0 - ($column-gutter / 2);
    margin-right: 0 - ($column-gutter / 2);
    max-width: none;
}

@mixin grid-column($colspan: 1, $totalcols: 12, $gutters: true) {
    width: ($colspan / $totalcols) * 100%;
    @if ($gutters) {
        @include grid-gutter();
    }
}

/*
    How many different grid sets do we want? A single 12 column grid? A 12 column AND a 5 column? Up to you!
*/
$grid-column-sets: (
        5,
        12
);

$breakpoints: (
        small: "only screen",
        s-medium: "only screen and (min-width: 481px)",
        medium: "only screen and (min-width: 641px)",
        l-medium: "only screen and (min-width: 801px)",
        large: "only screen and (min-width: 1025px)",
        x-large: "only screen and (min-width: 1281px)",
        xx-large: "only screen and (min-width: 1441px)",
        xxx-large: "only screen and (min-width: 1921px)",
);

/*
    Gets the media query for our breakpoint specified in the $breakpoints map (array) above.
*/

@mixin breakpoint($breakpoint: "small") {
    $breakpointMediaQuery: map-get($breakpoints, $breakpoint);
    @media #{$breakpointMediaQuery} {
        @content
    }
}

/*
    With the mixins, you can use the grid-column() mixin to get the width of the item, along with the breakpoint() mixin this gives you full control to add grid functionality to your own classes.
*/
.my-awesome-thing {
    @include breakpoint('small') {
        @include grid-column(1, 5);
    }
    @include breakpoint('medium') {
        @include grid-column(2, 12);
    }
    @include breakpoint('large') {
        @include grid-column(2, 12, false); // doesn't add the grid-gutters
    }
}

/*
    Examples of class names this will generate:
    .small-1-of-5
    .l-medium-3-of-5
    .x-large-5-of-12
    .xx-large-7-of-12
*/
@each $breakpoint-name, $breakpoint-size in $breakpoints {
    @media #{$breakpoint-size} {
        @each $grid-column-number in $grid-column-sets {
            @for $var from 1 through $grid-column-number {
                .#{$breakpoint-name}-#{$var}-of-#{$grid-column-number} {
                    @include grid-column($var, $grid-column-number, false);
                }
            }
        }
    }
}

.grid-row {
    @include grid-row
}

.grid-row .grid-row {
    @include grid-row-nested
}

.grid-column {
    @include grid-gutter();
}

.collapsed .grid-column {
    @include grid-gutter($collapsed: true);
}

.not-collapsed .grid-column {
    @include grid-gutter();
}