From 408ea5b6b0c9874b7b74601259239271b253d554 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Fri, 24 Feb 2017 18:02:05 +0800 Subject: ADD: New docs mobile experience --- docs/layout.html | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) (limited to 'docs/layout.html') diff --git a/docs/layout.html b/docs/layout.html index 09e584d..722a1f4 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -12,13 +12,16 @@ -
+
@@ -26,7 +29,7 @@
-
+ + +

Flexbox grid

@@ -210,7 +215,7 @@
-

Spectre provides a neat responsive layout grid system. 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.

+

Spectre provides a neat responsive layout grid system. 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.

  • For window width less than 480px, all columns will show as a single row.
  • col-xs-[1-12] apply to window width smaller than or equal to 480px.
    • @@ -233,7 +238,7 @@
    -

    For hiding elements on specific viewport sizes, there are classes .hide-xs, .hide-sm, .hide-md, .hide-lg and .hide-xl available.

    +

    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.
      • -- cgit v1.3.1-23-gd82d