To make your website responsive you can use a grid. You can adjust breakpoints, gutter and column amount. When using SCSS you can choose between a flexbox grid or a normal grid. For default use the grid is flexbox. Both grids have their pros and cons. Both grids offer the same breakpoints, the biggest difference between them is for push and pull.
You can use
.row so that it's all in one line.
There are 5 breakpoints
to suit your needs.
In order to make the columns work you need to wrap it inside a
<div class="row"> <div class="col xs4 m6"> Example </div> </div>
You can also use the row and columns in SCSS by simply extending the class.
@extend .col, .s12, .m6;
To follow the Material Design
specifications as closely as possible some breakpoints have different settings.
.xs Only has 4 columns,
s has 8 to 12 columns depending on the width of the screen.
Push, pull and offset
You can also push, pull and offset which work the same as the columns.
.offset-s these examples are for small screen but they work with all sizes named before.
Note* the flexbox grid doesn't have a push pull class.
You have to set these manually with the
<div class="row"> <div class="col xs4 m6 offset-m6"> Example </div> </div> @extend .col, .s12, .m6, offset-m6; <div class="row"> <div class="col xs4 m6 push-m6"> Display 1 </div> <div class="col xs4 m6 pull-m6"> Display 2 </div> </div>
If you want an element to be hidden for a certain device you can use the following classes:
<div class="col s4 s-hidden"> Small hidden </div> <div class="col s4 s-hidden-down"> Hidden from all screens smaller than small </div> <div class="col s4 s-hidden-up"> Hidden from all screen bigger than small </div> <div class="col s4 m-hidden"> Medium hidden </div> <div class="col s4 l-hidden"> Large hidden </div>
There are also a couple of media queries you can use with SCSS. The media queries you can use are listed here.
You can use the media queries like the following example:
|$xsmall-screen||Variable /||Change the width of xsmall screens|
|$small-screen||Variable /||Change the width of small screens|
|$medium-screen||Variable / integer||Change the width of medium screens|
|$large-screen||Variable / integer||Change the width of large screens|
|$xlarge-screen||Variable / integer||Change width of xlarge screen|
|$gutter||Variable / integer||Change the width of the gutter (space between columns)|
|$large-gutter||Variable / integer||Change the width of the gutter for medium and up|
|$columns||Variable / integer||Change the amount of columns|