Skip to content

Instantly share code, notes, and snippets.

@ozziexsh

ozziexsh/_grid.scss

Last active September 8, 2017 11:45
Show Gist options
  • Save ozziexsh/dff51632618fa1eb2153 to your computer and use it in GitHub Desktop.
Save ozziexsh/dff51632618fa1eb2153 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ozziexsh revised this gist Apr 24, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions _grid.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -52,10 +52,10 @@ html {
    }
    @for $x from 1 through $columns {
    .#{$breakpoint}-#{$x} {
    width: calc(100% / $columns * #{$x});
    width: calc(100% / #{$columns} * #{$x});
    }
    .#{$breakpoint}-offset-#{$x} {
    margin-left: calc(100% / $columns * #{$x});
    margin-left: calc(100% / #{$columns} * #{$x});
    }
    }
    }
  2. ozziexsh revised this gist Apr 24, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions _grid.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -52,10 +52,10 @@ html {
    }
    @for $x from 1 through $columns {
    .#{$breakpoint}-#{$x} {
    width: calc(100% / 12 * #{$x});
    width: calc(100% / $columns * #{$x});
    }
    .#{$breakpoint}-offset-#{$x} {
    margin-left: calc(100% / 12 * #{$x});
    margin-left: calc(100% / $columns * #{$x});
    }
    }
    }
  3. ozziexsh revised this gist Apr 24, 2016. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion _grid.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -41,7 +41,6 @@ html {
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    @extend .clearfix;
    }

    @each $breakpoint, $width in $grid-breakpoints {
  4. ozziexsh revised this gist Apr 24, 2016. 1 changed file with 41 additions and 82 deletions.
    123 changes: 41 additions & 82 deletions _grid.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,19 @@
    $sm-screen: 768px;
    $md-screen: 992px;
    $lg-screen: 1200px;
    $columns: 12;

    $grid-breakpoints: (
    xs: 0,
    sm: 544px,
    md: 768px,
    lg: 992px,
    xl: 1200px
    );

    $container-max-widths: (
    sm: 576px,
    md: 720px,
    lg: 940px,
    xl: 1140px
    );

    html {
    box-sizing: border-box;
    @@ -18,87 +31,33 @@ html {
    clear: both;
    }

    .container {
    width: 100%;
    }

    .column, .columns {
    position: relative;
    float: left;
    }

    .xs-full {
    width: 100%;
    }

    .xs-half {
    width: calc(100% / 2);
    }

    .xs-three {
    width: calc(100% / 3);
    }

    .xs-four {
    width: calc(100% / 4);
    }

    /* Small (tablets) */
    @media (min-width: $sm-screen) {
    .sm-full {
    width: 100%;
    }

    .sm-half {
    width: calc(100% / 2);
    }

    .sm-three {
    width: calc(100% / 3);
    }

    .sm-four {
    width: calc(100% / 4);
    }
    }

    /* Medium (desktops) */
    @media (min-width: $md-screen) {
    .container {
    width: 60%;
    margin: 0 auto;
    }
    .md-full {
    width: 100%;
    }

    .md-half {
    width: calc(100% / 2);
    }

    .md-three {
    width: calc(100% / 3);
    }

    .md-four {
    width: calc(100% / 4);
    }
    }

    /* Large (large desktops) */
    @media (min-width: $lg-screen) {
    .lg-full {
    width: 100%;
    }

    .lg-half {
    width: calc(100% / 2);
    }

    .lg-three {
    width: calc(100% / 3);
    }

    .lg-four {
    width: calc(100% / 4);
    }
    .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    @extend .clearfix;
    }

    @each $breakpoint, $width in $grid-breakpoints {
    @media(min-width: $width) {
    @if map-has-key($container-max-widths, $breakpoint) {
    .container {
    max-width: map-get($container-max-widths, $breakpoint);
    }
    }
    @for $x from 1 through $columns {
    .#{$breakpoint}-#{$x} {
    width: calc(100% / 12 * #{$x});
    }
    .#{$breakpoint}-offset-#{$x} {
    margin-left: calc(100% / 12 * #{$x});
    }
    }
    }
    }
  5. ozziexsh revised this gist Dec 12, 2015. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions _grid.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -43,7 +43,7 @@ html {
    }

    /* Small (tablets) */
    @media (min-width: 768px) {
    @media (min-width: $sm-screen) {
    .sm-full {
    width: 100%;
    }
    @@ -62,7 +62,7 @@ html {
    }

    /* Medium (desktops) */
    @media (min-width: 992px) {
    @media (min-width: $md-screen) {
    .container {
    width: 60%;
    margin: 0 auto;
    @@ -85,7 +85,7 @@ html {
    }

    /* Large (large desktops) */
    @media (min-width: 1200px) {
    @media (min-width: $lg-screen) {
    .lg-full {
    width: 100%;
    }
  6. ozziexsh revised this gist Dec 12, 2015. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions _grid.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,7 @@
    $sm-screen: 768px;
    $md-screen: 992px;
    $lg-screen: 1200px;

    html {
    box-sizing: border-box;
    }
  7. ozziexsh created this gist Dec 12, 2015.
    100 changes: 100 additions & 0 deletions _grid.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,100 @@
    html {
    box-sizing: border-box;
    }

    *, *:before, *:after {
    box-sizing: inherit;
    }


    .row::before,
    .row::after {
    display: table;
    content: " ";
    clear: both;
    }

    .container {
    width: 100%;
    }

    .column, .columns {
    float: left;
    }

    .xs-full {
    width: 100%;
    }

    .xs-half {
    width: calc(100% / 2);
    }

    .xs-three {
    width: calc(100% / 3);
    }

    .xs-four {
    width: calc(100% / 4);
    }

    /* Small (tablets) */
    @media (min-width: 768px) {
    .sm-full {
    width: 100%;
    }

    .sm-half {
    width: calc(100% / 2);
    }

    .sm-three {
    width: calc(100% / 3);
    }

    .sm-four {
    width: calc(100% / 4);
    }
    }

    /* Medium (desktops) */
    @media (min-width: 992px) {
    .container {
    width: 60%;
    margin: 0 auto;
    }
    .md-full {
    width: 100%;
    }

    .md-half {
    width: calc(100% / 2);
    }

    .md-three {
    width: calc(100% / 3);
    }

    .md-four {
    width: calc(100% / 4);
    }
    }

    /* Large (large desktops) */
    @media (min-width: 1200px) {
    .lg-full {
    width: 100%;
    }

    .lg-half {
    width: calc(100% / 2);
    }

    .lg-three {
    width: calc(100% / 3);
    }

    .lg-four {
    width: calc(100% / 4);
    }
    }