From 17423a6156ba7cdc4de6744b0098d61702111101 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 3 Jun 2018 21:48:19 +0800 Subject: Update responsive and navbar to new Pug templates --- docs/layout.html | 332 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 332 insertions(+) (limited to 'docs/layout.html') diff --git a/docs/layout.html b/docs/layout.html index 7878690..95f95f2 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -327,9 +327,341 @@

Responsive

+

Spectre provides a neat responsive layout grid system and responsive visibility utilities.

+
+
+
col-10
col-lg-8
col-md-6
col-sm-4
+
+
+
col-2
col-lg-4
col-md-6
col-sm-8
+
+
+

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.

+ + 
<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-xssize-smsize-mdsize-lgsize-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.

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
size-xssize-smsize-mdsize-lgsize-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.

+ +

+ Spectre also has a responsive web test tool Responsive Resizer. + You can clone the GitHub Repo to use it locally or use it online. +

+

Responsive Resizer

-- cgit v1.3.1-23-gd82d