Skip to content

Instantly share code, notes, and snippets.

@danieltorscho

danieltorscho/queries.less

Last active November 23, 2015 00:06
Download ZIP

Revisions

  1. danieltorscho revised this gist Nov 23, 2015. 1 changed file with 1 addition and 5 deletions.
    6 changes: 1 addition & 5 deletions queries.less
    View file
    Original file line number Diff line number Diff line change
    @@ -16,13 +16,9 @@
    /* -------------------------------------------------------------- */
    /**** MEDIA QUERIES FOR RESPONSIVE ****/
    /* -------------------------------------------------------------- */
    @media (max-width: 767px) {

    }

    // Media queries
    /* Extra small devices (phones, less than 768px) */
    /* No media query since this is the default in Bootstrap */

    /* Small devices (tablets, 768px and up) */
    @media (min-width: @screen-sm-min) {

  2. danieltorscho revised this gist Nov 22, 2015. 1 changed file with 2 additions and 15 deletions.
    17 changes: 2 additions & 15 deletions queries.less
    View file
    Original file line number Diff line number Diff line change
    @@ -25,25 +25,12 @@
    /* No media query since this is the default in Bootstrap */
    /* Small devices (tablets, 768px and up) */
    @media (min-width: @screen-sm-min) {
    .header {
    .logo {
    float: none;
    text-align: center;
    a {
    margin: 0 auto;
    }
    }
    }

    }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: @screen-md-min) {
    .header {
    .logo {
    float: left;
    text-align: left;
    }
    }

    }

    /* Large devices (large desktops, 1200px and up) */
  3. danieltorscho created this gist Nov 22, 2015.
    68 changes: 68 additions & 0 deletions queries.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@

    // Media Queries Mixins
    @xs: ~'max-width: @{screen-xs-max}';
    // @media(@xs){}
    @smmin: ~'min-width: @{screen-sm-min}';
    // @media(@smmin) and (@smmax){}
    @smmax: ~'max-width: @{screen-sm-max}';
    // @media(@smmin){}
    @mdmin: ~'min-width: @{screen-md-min}';
    // @media(@mdmin) and (@mdmax){}
    @mdmax: ~'max-width: @{screen-md-max}';
    // @media(@mdmin){}
    @lg: ~'min-width: @{screen-lg-min}';
    // @media(@lg){}

    /* -------------------------------------------------------------- */
    /**** MEDIA QUERIES FOR RESPONSIVE ****/
    /* -------------------------------------------------------------- */
    @media (max-width: 767px) {

    }

    // Media queries
    /* Extra small devices (phones, less than 768px) */
    /* No media query since this is the default in Bootstrap */
    /* Small devices (tablets, 768px and up) */
    @media (min-width: @screen-sm-min) {
    .header {
    .logo {
    float: none;
    text-align: center;
    a {
    margin: 0 auto;
    }
    }
    }
    }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: @screen-md-min) {
    .header {
    .logo {
    float: left;
    text-align: left;
    }
    }
    }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: @screen-lg-min) {

    }

    // Occasionally expanded media queries
    @media (max-width: @screen-xs-max) {

    }

    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

    }

    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    }

    @media (min-width: @screen-lg-min) {

    }