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-xs
hides elements when the window width is smaller than or equal to 480px.hide-sm
hides elements when the window width is smaller than or equal to 600px.hide-md
hides elements when the window width is smaller than or equal to 840px.hide-lg
hides elements when the window width is smaller than or equal to 960px.hide-xl
hides 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-xs
shows elements when the window width is smaller than or equal to 480px.show-sm
shows elements when the window width is smaller than or equal to 600px.show-md
shows elements when the window width is smaller than or equal to 840px.show-lg
shows elements when the window width is smaller than or equal to 960px.show-xl
shows 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.