From 38962f94d497a40435862d187f30b04f2b68205d Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 15 Aug 2017 12:16:53 +0800 Subject: Improve Docs homepage --- docs/layout.html | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) (limited to 'docs/layout.html') diff --git a/docs/layout.html b/docs/layout.html index c713b03..e1d1a31 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -6,7 +6,7 @@ - Layout - Spectre.css + Layout - Spectre.css CSS Framework @@ -15,8 +15,8 @@
-
@@ -253,7 +253,7 @@

Flexbox grid

-
+

Layout includes flexbox based responsive grid system with 12 columns.

@@ -316,7 +316,7 @@
-
+

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 have gapless columns.

@@ -330,7 +330,7 @@
-
+

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.

@@ -363,7 +363,7 @@

Responsive grid

-
+

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

@@ -387,7 +387,7 @@
-
+

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.
    • @@ -409,7 +409,7 @@

    Responsive container

    -
    +

    The responsive layout also provides fixed-width containers. Use grid-480, grid-960 or grid-1280 to container for a fixed-width container with the specific max-width.

    @@ -422,7 +422,7 @@

    Responsive visibility

    -
    +

    The responsive visibility utilities help show and hide elements on specific viewport sizes.

    @@ -480,7 +480,7 @@
    -
    +

    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.
      • @@ -546,7 +546,7 @@ -
      +

      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.
        • @@ -562,7 +562,7 @@ -
        +

        The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the navbar-section class will be evenly distributed in the container.

        @@ -602,7 +602,7 @@ </header> -
        +

        You can use navbar-center class to have a centered section.

        @@ -644,7 +644,7 @@

        Panels

        -
        +

        Panels are flexible view container layout with auto-expand content section.

        @@ -780,7 +780,7 @@
        -
        +

        Add a container element with the panel class. And add child elements with the panel-header, panel-nav, panel-body and/or panel-footer class. The panel-body can be auto expanded and vertically scrollable.

        @@ -805,7 +805,7 @@

        Empty states / blank slates

        -
        +

        Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.

        @@ -851,7 +851,7 @@
        -
        +

        An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add empty-icon, empty-title, empty-subtitle or empty-action to the elements. HTML structure is exampled below.

        -- cgit v1.3.1-23-gd82d