From 3e837ba52cb27fbb34f3139ebc53faea5847a95c Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Thu, 17 Aug 2017 22:59:52 +0800 Subject: Add more Docs content --- docs/elements.html | 94 ++++++++++++++++++++++++++++++----------------- docs/getting-started.html | 27 ++++++++++---- docs/index.html | 6 +-- docs/layout.html | 5 +++ 4 files changed, 88 insertions(+), 44 deletions(-) (limited to 'docs') diff --git a/docs/elements.html b/docs/elements.html index d141b5e..f552950 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -564,41 +564,10 @@

Add the btn class to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons.

-
-

Add the disabled class or the disabled attribute for a disabled button.

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

A button with the loading class can show loading indicator.

-
- -
-
- - - -
-
- 
<button class="btn">default button</button>
 <button class="btn btn-primary">primary button</button>
 <button class="btn btn-link">link button</button>
-
-<!-- buttons with disabled state -->
-<button class="btn disabled" tabindex="-1">disabled button</button>
-<button class="btn" disabled tabindex="-1">disabled button</button>
-
-<!-- a button with loading state -->
-<button class="btn loading">button</button>

Button sizes

@@ -651,15 +620,72 @@ 
<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
 <button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
+
+ +

Button states

+ +
+

Add the active class for active button state style.

+
+ +
+
+ + + +
+
+ + +

+<!-- buttons with disabled state -->
+<button class="btn disabled" tabindex="-1">disabled button</button>
+<button class="btn" disabled tabindex="-1">disabled button</button>
+
+ +
+

Add the disabled class or the disabled attribute for disabled button state style.

+
+ +
+
+ + + +
+
+ + +

+<!-- buttons with disabled state -->
+<button class="btn disabled" tabindex="-1">disabled button</button>
+<button class="btn" disabled tabindex="-1">disabled button</button>
+
+ +
+

A button with the loading class can show loading indicator.

+
+ +
+
+ + + +
+
+ + +
<!-- a button with loading state -->
+<button class="btn loading">button</button>

Button groups

- - - + + +
diff --git a/docs/getting-started.html b/docs/getting-started.html index c74b0a2..0ae3376 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -254,7 +254,7 @@

Introduction

-

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

+

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

Spectre provides basic styles for typography and elements, flexbox based responsive layout system, CSS components and utilities with best practice coding and consistent design language.

@@ -266,8 +266,8 @@
Install manually
-

Download the compiled and minified Spectre CSS file (~10KB min+gzip):

-

Download Spectre.css

+

Download the compiled and minified Spectre CSS file (core ~10KB min+gzip):

+

Download Spectre.css

Include spectre.css located in /docs/dist in your website or Web app <head>. Also, you can add spectre-icons.css and spectre-exp.css accordingly.

@@ -315,18 +315,29 @@

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, spectre-exp.less and spectre-icons.less.

+

You can customize your version of Spectre.css by editing LESS files in /src directory or removing unneeded components from .less source files.

+

Spectre.css Source Code

+
+

Compiling CSS

+
+

Spectre uses Gulp for compiling CSS. Firstly you need to install NPM, which is used to manage Gulp and other dependencies.

Then, you can build the CSS file from the command line:

  1. Navigate to the root directory of Spectre.
  2. Run npm install. NPM will install all dev dependencies as listed in package.json.
    3. -
  3. When completed, run gulp build to compile LESS to CSS and minify files.
    4. +
  4. When completed, run gulp build task to compile LESS to CSS and minify files.
  5. You can find compiled CSS files in /dist directory.
-

You can watch file changes and rebuild CSS files by using gulp watch.

+

All available Gulp tasks:

+
    +
  • gulp build - compile LESS to CSS and minify files (default)
    • +
  • gulp docs - compile Docs related files
    • +
  • gulp watch - watch file changes and re-compile CSS files
    • +
- +

Folder Structure

+ 
spectre/
 ├── dist/                               // Build folder (Git ignored)
 │   ├── spectre-exp.css
@@ -445,12 +456,14 @@
+
Sizes

The default REM (root em) size in Spectre.css is 20px.

Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to 20px, which is relatively easy to calculate.

Spectre uses 4px as the unit size. Sizes of components are based on the unit size.

+
Custom prefix

There is also a way to add custom prefix to all CSS classes. You can use gulp-css-prefix plugin and add a new Gulp task to enable it.

diff --git a/docs/index.html b/docs/index.html index 2629b7b..5ce7572 100644 --- a/docs/index.html +++ b/docs/index.html @@ -67,11 +67,11 @@

Installation

-
+

There are 5 ways to get started with Spectre.css CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.

-
- Get started +
+ Install Spectre.css
diff --git a/docs/layout.html b/docs/layout.html index d4c99da..15a9dec 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -409,6 +409,11 @@
col-2
+
+
+
col-4 col-mx-auto
+
+ 
<div class="container">
-- 
cgit v1.3.1-23-gd82d