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 at a max width of 480px
Medium screens are defined at a max width of 768px
Large screen are defined at a max width of 992px


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

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)
        

Colors

Here is a color palette based on the material design base colors. Each of these colors are defined with a base color class and an optional lighten or darken class. To use these classes in a custom Sass file you can extend these classes.

For background colors, you can apply the color simply by extending the classes like the example below.


    .ilike-blue-container {
      @extend .blue, .lighten-4;
    }
        

For changing text color, you can apply the color simply by extending the classes like the example below.


    .ilike-blue-container {
      @extend .blue-text, .lighten-4;
    }
        

Color Palette

Icons

We are using Icons from Entypo

The Entypo Social Extention. Note the difference in License

Shadows

In material design, everything should have a certain z-depth that determines how far raised or close to the page the element is.

You can easily apply this shadow effect by adding a class="z-depth-2" to an HTML tag. Alternatively you can extend any of these shadows with Sass using @extend .z-depth-2.

      
  <div class="col s12 m2">
    <p class="z-depth-1"></p>
  </div>
  <div class="col s12 m2">
    <p class="z-depth-2"></p>
  </div>
  <div class="col s12 m2">
    <p class="z-depth-3"></p>
  </div>
  <div class="col s12 m2">
    <p class="z-depth-4"></p>
  </div>
  <div class="col s12 m2">
    <p class="z-depth-5"></p>
  </div>