From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/layout.html | 720 +++++++++---------------------------------------------- 1 file changed, 108 insertions(+), 612 deletions(-) (limited to 'docs/layout.html') diff --git a/docs/layout.html b/docs/layout.html index 11f9ab6..d5f1322 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -23,7 +23,8 @@
@@ -31,11 +32,14 @@
@@ -44,14 +48,22 @@
@@ -60,9 +72,12 @@
@@ -71,25 +86,44 @@
@@ -98,14 +132,22 @@
@@ -114,17 +156,28 @@
@@ -133,563 +186,6 @@
-
-

Flexbox grid

-
-
- - - -
-
- - -
-
-

Layout includes flexbox based responsive grid system with 12 columns.

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
col-12 (100%)
-
-
-
-
-
col-9 (75%)
-
-
-
-
-
col-6 (50%)
-
-
-
-
-
col-3 (25%)
-
-
- 
<!-- flexbox grid example -->
-<div class="container">
-  <div class="columns">
-    <div class="column col-6">col-6</div>
-    <div class="column col-3">col-3</div>
-    <div class="column col-2">col-2</div>
-    <div class="column col-1">col-1</div>
-  </div>
-</div>
-
-

Add the columns class to a container with the container class. - And add any element you want with the column class inside the container. These columns will take up the space equally. - You can specific the width of each column by adding class col-<1-12>. -

-

And you can add the col-gapless class to the columns to have gapless columns.

-
-
-
col-6 (gapless)
-
-
-
col-6 (gapless)
-
-
- 
<!-- gapless columns -->
-<div class="columns col-gapless">
-  <div class="column col-6">col-6</div>
-  <div class="column col-6">col-6</div>
-</div>
-
-

By default, Spectre grid has multi-line flexbox enabled. You can add the col-oneline class to columns to make all its child columns positioned in the same single row.

-
-
-
col-8
-
-
-
col-8
-
-
- 
<!-- one line columns -->
-<div class="columns col-oneline">
-  <div class="column col-8">col-8</div>
-  <div class="column col-8">col-8</div>
-</div>
-
-

Grid offset

-

- The Flexbox grid provides margin auto utilities to set offset. - There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns. -

-
-
-
col-2
-
-
-
col-4 col-mx-auto
-
-
-
-
-
col-2
-
-
-
col-4 col-ml-auto
-
-
-
-
-
col-4 col-ml-auto
-
-
-
col-2
-
-
-
-
-
col-4 col-mx-auto
-
-
-
col-2
-
-
-
-
-
col-4 col-mr-auto
-
-
-
col-2
-
-
-
-
-
col-4 col-mx-auto
-
-
- 
<!-- grid offset example -->
-<div class="container">
-  <div class="columns">
-    <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div>
-    <div class="column col-2">col-2</div>
-  </div>
-</div>
-
-

Grid nesting

-

To nest grids, add the new columns and column structure within an existing column.

-
-
-
col-6
-
-
-
col-6
-
-
-
col-6
-
-
-
-
-
col-6
-
-
- 
<!-- grid nesting example -->
-<div class="container">
-  <div class="columns">
-    <div class="column col-6">col-6
-      <div class="columns">
-        <div class="column col-6">col-6</div>
-        <div class="column col-6">col-6</div>
-      </div>
-    </div>
-    <div class="column col-6">col-6</div>
-  </div>
-</div>
-
-
-

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.

-
    -
  • 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-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.

-
    -
  • 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-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.

-
    -
  • 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.
    • -
-

- 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

-
-