Skip to content

Instantly share code, notes, and snippets.

@webinfinita
Last active February 27, 2024 17:23

Revisions

  1. webinfinita revised this gist May 10, 2015. 1 changed file with 5 additions and 3 deletions.
    8 changes: 5 additions & 3 deletions bootstrap-breakpoints.scss
    Original file line number Diff line number Diff line change
    @@ -23,6 +23,8 @@
    @media (max-width: 480px){ @content }
    }
    }
    //.class
    // @include breakpoint(sm)
    // width: 60%
    //.class {
    // @include breakpoint(sm){
    // width: 60%;
    // }
    //}
  2. @jgarciac87 jgarciac87 renamed this gist Mar 13, 2015. 1 changed file with 10 additions and 9 deletions.
    19 changes: 10 additions & 9 deletions bootstrap-breakpoints → bootstrap-breakpoints.scss
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    @mixin breakpoint($point){

    @if ($point == lg){
    @media (min-width: 1200px){ @content }
    }
    @@ -10,17 +11,17 @@
    @media (min-width: 768px) and (max-width: 991px){ @content }
    }

    @else if ($point == xs
    @media (max-width: 767px) and (min-width: 641px)
    @content
    @else if ($point == xs){
    @media (max-width: 767px) and (min-width: 641px){ @content }
    }

    @else if $point == xxs
    @media (max-width: 640px) and (min-width: 481px)
    @content
    @else if ($point == xxs){
    @media (max-width: 640px) and (min-width: 481px){ @content }
    }

    @else if $point == xxxs
    @media (max-width: 480px)
    @content
    @else if ($point == xxxs){
    @media (max-width: 480px){ @content }
    }
    }
    //.class
    // @include breakpoint(sm)
  3. @jgarciac87 jgarciac87 revised this gist Mar 13, 2015. 1 changed file with 27 additions and 0 deletions.
    27 changes: 27 additions & 0 deletions bootstrap-breakpoints
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    @mixin breakpoint($point){
    @if ($point == lg){
    @media (min-width: 1200px){ @content }
    }
    @else if ($point == md){
    @media (min-width: 992px) and (max-width: 1199px){ @content }
    }

    @else if ($point == sm){
    @media (min-width: 768px) and (max-width: 991px){ @content }
    }

    @else if ($point == xs
    @media (max-width: 767px) and (min-width: 641px)
    @content

    @else if $point == xxs
    @media (max-width: 640px) and (min-width: 481px)
    @content

    @else if $point == xxxs
    @media (max-width: 480px)
    @content
    }
    //.class
    // @include breakpoint(sm)
    // width: 60%
  4. @jgarciac87 jgarciac87 revised this gist Oct 27, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions bootstrap-breakpoints.sass
    Original file line number Diff line number Diff line change
    @@ -24,5 +24,5 @@
    @content

    //.class
    // @include breakpoint(sm) { width: 60%; }
    //
    // @include breakpoint(sm)
    // width: 60%
  5. @jgarciac87 jgarciac87 revised this gist Oct 27, 2014. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion bootstrap-breakpoints.sass
    Original file line number Diff line number Diff line change
    @@ -21,4 +21,8 @@

    @else if $point == xxxs
    @media (max-width: 480px)
    @content
    @content

    //.class
    // @include breakpoint(sm) { width: 60%; }
    //
  6. @jgarciac87 jgarciac87 revised this gist May 7, 2014. 1 changed file with 17 additions and 9 deletions.
    26 changes: 17 additions & 9 deletions bootstrap-breakpoints.sass
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,24 @@
    @mixin breakpoint($point)
    @if $point == lg
    @mixin breakpoint($point)
    @if $point == lg
    @media (min-width: 1200px)
    @content

    @else if $point == md
    @media (min-width: 992px)
    @else if $point == md
    @media (min-width: 992px) and (max-width: 1199px)
    @content

    @else if $point == sm
    @media (min-width: 768px)

    @else if $point == sm
    @media (min-width: 768px) and (max-width: 991px)
    @content

    @else if $point == xs
    @media (max-width: 767px) and (min-width: 641px)
    @content

    @else if $point == xs
    @media (max-width: 768px)
    @else if $point == xxs
    @media (max-width: 640px) and (min-width: 481px)
    @content

    @else if $point == xxxs
    @media (max-width: 480px)
    @content
  7. @jgarciac87 jgarciac87 created this gist Apr 29, 2014.
    16 changes: 16 additions & 0 deletions bootstrap-breakpoints.sass
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    @mixin breakpoint($point)
    @if $point == lg
    @media (min-width: 1200px)
    @content

    @else if $point == md
    @media (min-width: 992px)
    @content

    @else if $point == sm
    @media (min-width: 768px)
    @content

    @else if $point == xs
    @media (max-width: 768px)
    @content