Media Queries

We have 3 media queries for the 3 standard screen sizes you can use in your custom Sass files. This also includes media query variables that will define the range.

Small screens are defined as having a max-width of 600px
Medium screens are defined as having a max-width of 992px
Large screen are defined as having a min-width of 992px

CSS


        // These classes can be added to HTML Elements to affect visibility on certain displays
        // They apply display:none;
        .hide-on-small-only
        .hide-on-small-and-down
        .hide-on-med-and-down
        .hide-on-med-and-up
        .hide-on-med-only
        .hide-on-large-only
            

Sass


        @media #{$small-and-down} {
          // styles for small screens and down
        }
        @media #{$medium-and-up} {
          // styles for medium screens and larger
        }
        @media #{$medium-and-down} {
          // styles for medium screens and down
        }
        @media #{$large-and-up} {
          // styles for large screens and up
        }
            

Prefixer

One major goal of this framework is to be as adaptable as possible which includes cross browser compatibility. We have adapted a prefixer script to Sass which will automatically add all browser prefixes for certain CSS properties.

For Example: Using this Sass mixin

      @include transition(.3s);
        
Will Output This

    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
        
Here is the full list of mixins

    animation($args)
    animation-delay($delay)
    animation-direction($direction)
    animation-duration($duration)
    animation-fill-mode($mode)
    animation-iteration-count($count)
    animation-name($name)
    animation-play-state($state)
    animation-timing-function($function)
    background-size($args)
    border-radius($args)
    box-shadow($args)
        inner-shadow($args)
    box-sizing($args)
        border-box()
        content-box()
    columns($args)
        column-count($count)
        column-gap($gap)
        column-rule($args)
        column-width($width)
    gradient($default,$start,$stop)
        linear-gradient-top($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])
        linear-gradient-left($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])
    opacity($factor)
    transform($args)
        transform-origin($args)
        transform-style($style)
        rotate($deg)
        scale($factor)
        translate($x,$y)
        translate3d($x,$y,$z)
        translateHardware($x,$y)
    text-shadow($args)
    transition($args)
        transition-delay($delay)
        transition-duration($duration)
        transition-property($property)
        transition-timing-function($function)