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
}
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);
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
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)
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;
}
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>