Responsive
Spectre provides a neat responsive layout grid system and responsive visibility utilities.
There are col-xs-<1-12>, col-sm-<1-12>, col-md-<1-12>, col-lg-<1-12> and col-xl-<1-12> available for flexible grid across mobile, tablet and desktop viewport usage.
col-xs-<1-12>apply to window width smaller than or equal to 480px.col-sm-<1-12>apply to window width smaller than or equal to 600px.col-md-<1-12>apply to window width smaller than or equal to 840px.col-lg-<1-12>apply to window width smaller than or equal to 960px.col-xl-<1-12>apply to window width smaller than or equal to 1280px.col-<1-12>apply to all window width, including the width wider than 1280px.
<div class="container">
<div class="columns">
<div class="column col-xs-6">col-xs-6</div>
<div class="column col-xs-3">col-xs-3</div>
<div class="column col-xs-3">col-xs-3</div>
</div>
</div>
Responsive container
The responsive layout also provides fixed-width containers.
Use grid-xs(480px), grid-sm(600px), grid-md(840px), grid-lg(960px) or grid-xl(1280px) to the container for a fixed-width container with the specific max-width.
<!-- 100% width container with max-width set to grid-lg (960px) -->
<div class="container grid-lg">
<div class="columns">
...
</div>
</div>
Responsive visibility
The responsive visibility utilities help show and hide elements on specific viewport sizes.
| size-xs | size-sm | size-md | size-lg | size-xl | |
|---|---|---|---|---|---|
| hide-xs | |||||
| hide-sm | |||||
| hide-md | |||||
| hide-lg | |||||
| hide-xl |
For hiding elements on specific viewport sizes, there are classes hide-xs, hide-sm, hide-md, hide-lg and hide-xl available.
hide-xshides elements when the window width is smaller than or equal to 480px.hide-smhides elements when the window width is smaller than or equal to 600px.hide-mdhides elements when the window width is smaller than or equal to 840px.hide-lghides elements when the window width is smaller than or equal to 960px.hide-xlhides elements when the window width is smaller than or equal to 1280px.
| size-xs | size-sm | size-md | size-lg | size-xl | |
|---|---|---|---|---|---|
| show-xs | |||||
| show-sm | |||||
| show-md | |||||
| show-lg | |||||
| show-xl |
For showing elements on specific viewport sizes, there are classes show-xs, show-sm, show-md, show-lg and show-xl available.
show-xsshows elements when the window width is smaller than or equal to 480px.show-smshows elements when the window width is smaller than or equal to 600px.show-mdshows elements when the window width is smaller than or equal to 840px.show-lgshows elements when the window width is smaller than or equal to 960px.show-xlshows elements when the window width is smaller than or equal to 1280px.
Responsive Resizer
Spectre also has a responsive web test tool Responsive Resizer. You can clone the GitHub Repo to use it locally or use it online.