Skip to content

Instantly share code, notes, and snippets.

@harryfk

harryfk/gist:2823191

Created May 29, 2012 07:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save harryfk/2823191 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save harryfk/2823191 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. harryfk revised this gist May 29, 2012. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions gistfile1.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -102,6 +102,8 @@
    +four_up
    @media only screen and (min-width: 1280px)
    +five_up


    /*
    inline-blocks have that nasty 4px margin problem;
    we work around it by removing all whitespace between
  2. harryfk revised this gist May 29, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions gistfile1.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -68,6 +68,7 @@
    &:nth-child(5n)
    +append(0)


    // usage:
    #page
  3. harryfk revised this gist May 29, 2012. 1 changed file with 45 additions and 0 deletions.
    45 changes: 45 additions & 0 deletions gistfile1.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -33,6 +33,41 @@
    $percent: 66.667
    margin-right: $percent * 1%


    // some helpers (use with selectivizr for legacy browsers):
    @mixin two_up
    +width(49)
    margin-right: 4px
    &:nth-child(2n+1)
    +append(2)
    &:nth-child(2n)
    +append(0)

    @mixin three_up
    +width(32)
    margin-right: 4px
    &:nth-child(3n+1), &:nth-child(3n+2)
    +append(2)
    &:nth-child(3n)
    +append(0)

    @mixin four_up
    +width(23.5)
    margin-right: 3px
    &:nth-child(4n+1), &:nth-child(4n+2), &:nth-child(4n+3)
    +append(2)
    &:nth-child(4n)
    +append(0)

    @mixin five_up
    +width(18.4)
    margin-right: 3px
    &:nth-child(5n+1), &:nth-child(5n+2), &:nth-child(5n+3), &:nth-child(5n+4)
    +append(2)
    &:nth-child(5n)
    +append(0)

    // usage:
    #page
    @@ -56,6 +91,16 @@
    +width(50)
    +append(20)

    #some_list > li
    +width(100)
    @media only screen and (min-width: 480px)
    +two_up
    @media only screen and (min-width: 768px)
    +three_up
    @media only screen and (min-width: 1024px)
    +four_up
    @media only screen and (min-width: 1280px)
    +five_up
    /*
    inline-blocks have that nasty 4px margin problem;
    we work around it by removing all whitespace between
  4. harryfk revised this gist May 29, 2012. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions gistfile1.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -58,6 +58,5 @@

    /*
    inline-blocks have that nasty 4px margin problem;
    work around it by either setting margin-right: -4px on
    the width-mixin or by removing all whitespace between
    we work around it by removing all whitespace between
    tags (e.g. in Django by using a spaceless block)
  5. harryfk revised this gist May 29, 2012. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion gistfile1.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -57,4 +57,7 @@
    +append(20)

    /*
    inline-blocks have that nasty 4px margin problem; work around it by either setting margin-right: -4px on the width-mixin or by removing all whitespace between tags (e.g. in Django by using a spaceless block)
    inline-blocks have that nasty 4px margin problem;
    work around it by either setting margin-right: -4px on
    the width-mixin or by removing all whitespace between
    tags (e.g. in Django by using a spaceless block)
  6. harryfk created this gist May 29, 2012.
    60 changes: 60 additions & 0 deletions gistfile1.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    // the basics
    *
    +box-sizing(border-box)

    @mixin width($percent, $alignment: null)
    @if $percent == 33
    $percent: 33.334
    @if $percent == 66
    $percent: 66.667
    @if $alignment == left
    +append(100 - $percent)
    @if $alignment == right
    +prepend(100 - $percent)
    @if $alignment == center
    +prepend((100 - $percent) / 2)
    +append((100 - $percent) / 2)
    width: $percent * 1%
    +inline-block
    vertical-align: top

    @mixin prepend($percent)
    @if $percent == 33
    $percent: 33.334
    @if $percent == 66
    $percent: 66.667
    margin-left: $percent * 1%

    @mixin append($percent)
    @if $percent == 33
    $percent: 33.334
    @if $percent == 66
    $percent: 66.667
    margin-right: $percent * 1%

    // usage:
    #page
    +width(100)

    #main
    +width(100)
    @media only screen and (min-width: 1024px)
    +width(66)

    #sidebar
    +width(100)
    @media only screen and (min-width: 1024px)
    +width(33)

    #footer
    +width(80, center)

    #some_box
    +prepend(30)
    +width(50)
    +append(20)

    /*
    inline-blocks have that nasty 4px margin problem; work around it by either setting margin-right: -4px on the width-mixin or by removing all whitespace between tags (e.g. in Django by using a spaceless block)