Media can be styled in different ways using Materialize.

Variables

When using Sass, you can change the color scheme of your site extremely quickly. Below is a very small sample of what you can change through sass in _variables.scss.

$primary-color: color("materialize-red", "lighten-2") !default;$primary-color-light: false !default;$primary-color-dark: false !default;@if not $primary-color-light {  $primary-color-light: lighten($primary-color, 15%);}@if not $primary-color-dark {  $primary-color-dark: darken($primary-color, 15%);}$secondary-color: color("teal", "lighten-1") !default;$success-color: color("green", "base") !default;$error-color: color("red", "base") !default;$link-color: color("light-blue", "darken-1") !default;/*** More variables not shown here.. ***/

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.

CSS

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

  /* These classes can be added to HTML Elements   * to affect visibility on certain displays.   */  .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  .show-on-large  .show-on-medium  .show-on-small  .show-on-medium-and-up  .show-on-medium-and-down

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)