From 99c7ca56f6921515f03a306f772cd35d9fe47a7d Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Thu, 5 May 2016 13:41:52 +0800 Subject: code cleanup --- index.html | 433 +++++++++++++++++++++++++++++++++++-------------------------- 1 file changed, 246 insertions(+), 187 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index 0ddb033..f74a9f6 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,12 @@ - Spectre.css: a lightweight, responsive and modern CSS framework + Spectre.css - a lightweight, responsive and modern CSS framework -
-
+
+

Spectre.css

Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.

@@ -83,8 +82,8 @@
-
-
+
+

getting started

There are 3 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM and Bower.

@@ -110,7 +109,7 @@
-
+

compiling custom version

Spectre uses Gulp for compiling CSS. You can customize your version of Spectre.css by editing LESS files in /src directory or removing unneeded components from spectre.less.

@@ -125,7 +124,7 @@
-
+
-
+

typography

Typography sets default styles for headings, paragraphs, blockquote, lists and code elements.

@@ -273,158 +276,7 @@
-
-

flexbox layout

-
-

Layout includes flexbox based responsive grid system with 12 columns.

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
col-12 (100%)
-
-
-
-
-
col-9 (75%)
-
-
-
-
-
col-6 (50%)
-
-
-
-
-
col-3 (25%)
-
-
- -
-

Add the class columns to a container with the class container. And add any element you want with classname column 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].

-
- - -
-<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>
-
- -
-
-
col-md-6
-
-
-
col-md-3
-
-
-
col-md-3
-
-
- -
-
-
col-sm-6
-
-
-
col-sm-3
-
-
-
col-sm-3
-
-
- -
-
-
col-xs-6
-
-
-
col-xs-3
-
-
-
col-xs-3
-
-
- -
-

Spectre also provides a neat responsive layout grid system. There are .col-xs-[1-12], .col-sm-[1-12] and .col-md-[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 greater than or equal to 481px.
    • -
  • col-sm-[1-12] apply to window width greater than or equal to 601px.
    • -
  • col-md-[1-12] apply to window width greater than or equal to 841px.
    • -
-
- - -
-<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>
-
- -
-

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 viewport is smaller than or equal to 480px.
    • -
  • hide-sm hides elements when the viewport is smaller than or equal to 600px.
    • -
  • hide-md hides elements when the viewport is smaller than or equal to 840px.
    • -
  • hide-lg hides elements when the viewport is smaller than or equal to 960px.
    • -
  • hide-xl hides elements when the viewport is smaller than or equal to 1280px.
    • -
-
- -
- -
+

tables

Tables include default styles for tables and data sets.

@@ -440,7 +292,7 @@ - + The Shawshank Redemption 2h 22min Crime, Drama @@ -495,7 +347,7 @@
-
+

buttons

Buttons include simple button styles for actions in different types and sizes.

@@ -588,6 +440,15 @@ +
+
+
+ + + +
+
+

If you want to use buttons as a group, add the class btn-group to the container. You can add the class btn-group-block for a full-width button group.

@@ -603,7 +464,7 @@
-
+

forms

Forms provide the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch.

@@ -876,7 +737,7 @@
-
+

media

Media include responsive image and video class.

@@ -911,7 +772,195 @@
-
+
+
+ +
+
+
+ flexbox grid + responsive +
+
+
+ +
+

flexbox grid

+
+

Layout includes flexbox based responsive grid system with 12 columns.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
col-12 (100%)
+
+
+
+
+
col-9 (75%)
+
+
+
+
+
col-6 (50%)
+
+
+
+
+
col-3 (25%)
+
+
+ +
+

Add the class columns to a container with the class container. And add any element you want with classname column 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].

+
+ + +
+<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>
+
+ +
+ +
+

responsive grid

+
+
+
col-md-6
+
+
+
col-md-3
+
+
+
col-md-3
+
+
+ +
+
+
col-sm-6
+
+
+
col-sm-3
+
+
+
col-sm-3
+
+
+ +
+
+
col-xs-6
+
+
+
col-xs-3
+
+
+
col-xs-3
+
+
+ +
+

Spectre also provides a neat responsive layout grid system. There are .col-xs-[1-12], .col-sm-[1-12] and .col-md-[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 greater than or equal to 481px.
    • +
  • col-sm-[1-12] apply to window width greater than or equal to 601px.
    • +
  • col-md-[1-12] apply to window width greater than or equal to 841px.
    • +
+
+ + +
+<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>
+
+ +
+

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 viewport is smaller than or equal to 480px.
    • +
  • hide-sm hides elements when the viewport is smaller than or equal to 600px.
    • +
  • hide-md hides elements when the viewport is smaller than or equal to 840px.
    • +
  • hide-lg hides elements when the viewport is smaller than or equal to 960px.
    • +
  • hide-xl hides elements when the viewport is smaller than or equal to 1280px.
    • +
+
+ +
+ +
-
+

avatars

Avatars are user profile pictures.

@@ -1024,7 +1078,7 @@
-
+

chips

Chips are complex entities in small blocks.

@@ -1094,7 +1148,7 @@
-
+

autocomplete

Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

@@ -1255,7 +1309,7 @@
-
+

tooltips

Tooltips provide context information labels that appear on hover and focus.

@@ -1287,7 +1341,7 @@
-
+

labels

Labels are formatted text tags for highlighted, informative information.

@@ -1310,7 +1364,7 @@
-
+

badges

Badges are often used as unread number indicators.

@@ -1350,7 +1404,7 @@
-
+

toasts

Toasts are used to show alert or information to users.

@@ -1404,7 +1458,7 @@
-