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/getting-started.html | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) (limited to 'docs/getting-started.html') 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.

-- cgit v1.3.1-23-gd82d