Skip to content

Instantly share code, notes, and snippets.

@akolinski

akolinski/media-queries-b4.scss

Last active August 16, 2023 06:57
Show Gist options
  • Save akolinski/309407a5102cf7712c7c37c8bdbb667d to your computer and use it in GitHub Desktop.
Save akolinski/309407a5102cf7712c7c37c8bdbb667d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. akolinski revised this gist Aug 16, 2023. 1 changed file with 1 addition and 43 deletions.
    44 changes: 1 addition & 43 deletions media-queries-b4.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -18,46 +18,4 @@
    // Extra large devices (large desktops, 1200px and up)
    @include media-breakpoint-up(xl) {

    }

    // -- We occasionally use media queries that go in the other direction (the given screen size or smaller):

    // 575px and down
    @include media-breakpoint-down(xs) { ... }

    // 767px and down
    @include media-breakpoint-down(sm) { ... }

    // 991px and down
    @include media-breakpoint-down(md) { ... }

    // 1199px and down
    @include media-breakpoint-down(lg) { ... }

    // -- There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

    // Extra small devices (portrait phones, less than 576px)
    @include media-breakpoint-only(xs) { ... }

    // Small devices (landscape phones, 576px and up)
    @include media-breakpoint-only(sm) { ... }

    // Medium devices (tablets, 768px and up)
    @include media-breakpoint-only(md) { ... }

    // Large devices (desktops, 992px and up)
    @include media-breakpoint-only(lg) { ... }

    // Extra large devices (large desktops, 1200px and up)
    @include media-breakpoint-only(xl) { ... }

    // -- Similarly, media queries may span multiple breakpoint widths:
    // Apply styles starting from medium devices and up to extra large devices

    @include media-breakpoint-between(md, xl) { ... }

    // Further reading
    // Bootstrap media queries are built using sass maps. They are arrays with keys and values - https://webdesign.tutsplus.com/tutorials/an-introduction-to-sass-maps-usage-and-examples--cms-22184
    // http://saddamazad.com/2015/12/bootstrap-4-media-queries-using-sass/
    // All of the documenation here is avaliable and maintained on the getbootstrap documentation website.
    // https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
    }
  2. akolinski revised this gist Aug 16, 2023. 1 changed file with 12 additions and 7 deletions.
    19 changes: 12 additions & 7 deletions media-queries-b4.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,19 +1,24 @@
    // -- Default media queries

    // Extra small devices (Mobile phones, 0px and up)
    // No media query needed since this is the default in Bootstrap

    // Small devices (landscape phones, 576px and up)
    @include media-breakpoint-up(sm) { ... }
    @include media-breakpoint-up(sm) {

    }

    // Medium devices (tablets, 768px and up)
    @include media-breakpoint-up(md) { ... }
    @include media-breakpoint-up(md) {

    }

    // Large devices (desktops, 992px and up)
    @include media-breakpoint-up(lg) { ... }
    @include media-breakpoint-up(lg) {

    }

    // Extra large devices (large desktops, 1200px and up)
    @include media-breakpoint-up(xl) { ... }
    @include media-breakpoint-up(xl) {

    }

    // -- We occasionally use media queries that go in the other direction (the given screen size or smaller):

  3. akolinski renamed this gist Feb 28, 2018. 1 changed file with 0 additions and 0 deletions.
    0 media-queries-bootstrap-4.scss → media-queries-b4.scss
    View file
    File renamed without changes.
  4. akolinski revised this gist Aug 31, 2017. 1 changed file with 6 additions and 5 deletions.
    11 changes: 6 additions & 5 deletions media-queries-bootstrap-4.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    // -- Default media queries

    // Extra small devices (Mobile phones, 0px and up)
    // No media query needed since this is the default in Bootstrap

    @@ -13,7 +15,7 @@
    // Extra large devices (large desktops, 1200px and up)
    @include media-breakpoint-up(xl) { ... }

    // We occasionally use media queries that go in the other direction (the given screen size or smaller):
    // -- We occasionally use media queries that go in the other direction (the given screen size or smaller):

    // 575px and down
    @include media-breakpoint-down(xs) { ... }
    @@ -27,7 +29,7 @@
    // 1199px and down
    @include media-breakpoint-down(lg) { ... }

    // There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
    // -- There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

    // Extra small devices (portrait phones, less than 576px)
    @include media-breakpoint-only(xs) { ... }
    @@ -44,14 +46,13 @@
    // Extra large devices (large desktops, 1200px and up)
    @include media-breakpoint-only(xl) { ... }

    // Similarly, media queries may span multiple breakpoint widths:

    // -- Similarly, media queries may span multiple breakpoint widths:
    // Apply styles starting from medium devices and up to extra large devices

    @include media-breakpoint-between(md, xl) { ... }

    // Further reading
    // Bootstrap media queries are built using sass maps. They are arrays with keys and values - https://webdesign.tutsplus.com/tutorials/an-introduction-to-sass-maps-usage-and-examples--cms-22184
    // http://saddamazad.com/2015/12/bootstrap-4-media-queries-using-sass/

    // All of the documenation here is avaliable and maintained on the getbootstrap documentation website.
    // https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
  5. akolinski revised this gist Aug 31, 2017. 1 changed file with 17 additions and 12 deletions.
    29 changes: 17 additions & 12 deletions media-queries-bootstrap-4.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -15,33 +15,38 @@

    // We occasionally use media queries that go in the other direction (the given screen size or smaller):


    // 575px


    // 767px


    // 991px


    @media (max-width: 1199px) { ... }

    // 575px and down
    @include media-breakpoint-down(xs) { ... }

    // 767px and down
    @include media-breakpoint-down(sm) { ... }

    // 991px and down
    @include media-breakpoint-down(md) { ... }

    // 1199px and down
    @include media-breakpoint-down(lg) { ... }

    // There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

    // Extra small devices (portrait phones, less than 576px)
    @include media-breakpoint-only(xs) { ... }

    // Small devices (landscape phones, 576px and up)
    @include media-breakpoint-only(sm) { ... }

    // Medium devices (tablets, 768px and up)
    @include media-breakpoint-only(md) { ... }

    // Large devices (desktops, 992px and up)
    @include media-breakpoint-only(lg) { ... }

    // Extra large devices (large desktops, 1200px and up)
    @include media-breakpoint-only(xl) { ... }

    // Similarly, media queries may span multiple breakpoint widths:

    // Apply styles starting from medium devices and up to extra large devices
    @include media-breakpoint-between(md, xl) { ... }

    // Further reading
  6. akolinski created this gist Aug 31, 2017.
    52 changes: 52 additions & 0 deletions media-queries-bootstrap-4.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    // Extra small devices (Mobile phones, 0px and up)
    // No media query needed since this is the default in Bootstrap

    // Small devices (landscape phones, 576px and up)
    @include media-breakpoint-up(sm) { ... }

    // Medium devices (tablets, 768px and up)
    @include media-breakpoint-up(md) { ... }

    // Large devices (desktops, 992px and up)
    @include media-breakpoint-up(lg) { ... }

    // Extra large devices (large desktops, 1200px and up)
    @include media-breakpoint-up(xl) { ... }

    // We occasionally use media queries that go in the other direction (the given screen size or smaller):


    // 575px


    // 767px


    // 991px


    @media (max-width: 1199px) { ... }

    @include media-breakpoint-down(xs) { ... }
    @include media-breakpoint-down(sm) { ... }
    @include media-breakpoint-down(md) { ... }
    @include media-breakpoint-down(lg) { ... }

    // There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

    @include media-breakpoint-only(xs) { ... }
    @include media-breakpoint-only(sm) { ... }
    @include media-breakpoint-only(md) { ... }
    @include media-breakpoint-only(lg) { ... }
    @include media-breakpoint-only(xl) { ... }

    // Similarly, media queries may span multiple breakpoint widths:

    @include media-breakpoint-between(md, xl) { ... }

    // Further reading
    // Bootstrap media queries are built using sass maps. They are arrays with keys and values - https://webdesign.tutsplus.com/tutorials/an-introduction-to-sass-maps-usage-and-examples--cms-22184
    // http://saddamazad.com/2015/12/bootstrap-4-media-queries-using-sass/

    // All of the documenation here is avaliable and maintained on the getbootstrap documentation website.
    // https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints