Skip to content

Instantly share code, notes, and snippets.

@weimeng

weimeng/gist:4527826

Last active December 11, 2015 02:08
Show Gist options
  • Save weimeng/4527826 to your computer and use it in GitHub Desktop.
Save weimeng/4527826 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. weimeng revised this gist Jan 22, 2013. 1 changed file with 0 additions and 15 deletions.
    15 changes: 0 additions & 15 deletions gistfile1.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,3 @@
    @mixin respond-to($media) {
    @if $media == phone {
    @media (max-width: 767px) { @content; }
    }
    @if $media == except-phone {
    @media (min-width: 768px) { @content; }
    }
    @if $media == tablet {
    @media (min-width: 768px) and (max-width: 979px) { @content; }
    }
    @if $media == desktop {
    @media (min-width: 1200px) { @content; }
    }
    }

    @mixin row() {
    margin-left: $gridGutterWidth * -1;
    @media (max-width: 767px) { margin-left: 0; }
  2. weimeng renamed this gist Jan 14, 2013. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.sass → gistfile1.scss
    View file
    File renamed without changes.
  3. weimeng created this gist Jan 14, 2013.
    43 changes: 43 additions & 0 deletions gistfile1.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    @mixin respond-to($media) {
    @if $media == phone {
    @media (max-width: 767px) { @content; }
    }
    @if $media == except-phone {
    @media (min-width: 768px) { @content; }
    }
    @if $media == tablet {
    @media (min-width: 768px) and (max-width: 979px) { @content; }
    }
    @if $media == desktop {
    @media (min-width: 1200px) { @content; }
    }
    }

    @mixin row() {
    margin-left: $gridGutterWidth * -1;
    @media (max-width: 767px) { margin-left: 0; }
    @media (min-width: 768px) and (max-width: 979px) { margin-left: $gridGutterWidth768 * -1; }
    @media (min-width: 1200px) { margin-left: $gridGutterWidth1200 * -1; }
    @include clearfix();
    }

    @mixin column($columns: 1, $offset: 0) {
    float: left;
    margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
    width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
    @media (max-width: 767px) {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
    @include box-sizing(border-box);
    }
    @media (min-width: 768px) and (max-width: 979px) {
    margin-left: ($gridColumnWidth768 * $offset) + ($gridGutterWidth768 * ($offset - 1)) + ($gridGutterWidth768 * 2);
    width: ($gridColumnWidth768 * $columns) + ($gridGutterWidth768 * ($columns - 1));
    }
    @media (min-width: 1200px) {
    margin-left: ($gridColumnWidth1200 * $offset) + ($gridGutterWidth1200 * ($offset - 1)) + ($gridGutterWidth1200 * 2);
    width: ($gridColumnWidth1200 * $columns) + ($gridGutterWidth1200 * ($columns - 1));
    }
    }