From b15b0cee1110e83a26326dacdbc995364dd07cdb Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 13 Aug 2017 16:47:13 +0800 Subject: Completely rewritten Docs experience --- docs/getting-started.html | 547 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 547 insertions(+) create mode 100644 docs/getting-started.html (limited to 'docs/getting-started.html') diff --git a/docs/getting-started.html b/docs/getting-started.html new file mode 100644 index 0000000..d955983 --- /dev/null +++ b/docs/getting-started.html @@ -0,0 +1,547 @@ + + + + + + + + + Getting started - Spectre.css + + + + + +
+
+ + + +
+
+

Introduction

+
+

Spectre.css is a lightweight and 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.

+
+
+ +
+

Installation

+
+

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

+
+
+
Install manually
+

Download the compiled and minified Spectre CSS file (~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.

+
+ + +
<link rel="stylesheet" href="spectre.min.css" />
+<link rel="stylesheet" href="spectre-exp.min.css" />
+<link rel="stylesheet" href="spectre-icons.min.css" />
+
+ +
+
Install from CDN
+

Alternatively, you can use the unpkg CDN to load compiled Spectre.css.

+
+ + +
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css" />
+
+ +
+
Install with NPM
+ + +
$ npm install spectre.css --save
+
+ +
+
+
Install with Yarn
+ + +
$ yarn add spectre.css
+
+ +
+
+
Install with Bower
+ + +
$ bower install spectre.css --save
+
+ +
+
+ +
+

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.

+

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

+
    +
  1. Navigate to the root directory of Spectre.
    2. +
  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. You can find compiled CSS files in /dist directory.
    5. +
+

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

+
+ + +
spectre/
+├── dist/                               // Build folder (Git ignored)
+│   ├── spectre-exp.css
+│   ├── spectre-exp.min.css
+│   ├── spectre-icons.css
+│   ├── spectre-icons.min.css
+│   ├── spectre.css
+│   └── spectre.min.css
+│
+├── docs/
+│   ├── dist/                           // Pre-built CSS folder
+│   │   ├── spectre-exp.css
+│   │   ├── spectre-exp.min.css
+│   │   ├── spectre-icons.css
+│   │   ├── spectre-icons.min.css
+│   │   ├── spectre.css
+│   │   └── spectre.min.css
+|   ├── css/                            // Docs CSS file
+│   │   └── docs.css
+|   ├── src/
+│   │   └── docs.less
+│   ├── ../
+│   ├── index.html
+│   └── ...
+│
+├── src/                                // Source LESS files
+│   ├── mixins.less
+│   ├── variables.less
+│   └── ...
+│
+├── spectre-exp.less
+├── spectre-icons.less
+└── spectre.less
+
+ +

Variables

+
+

Spectre.css is designed with consistent design language. You can modify variables.less to create your new or match existing design. +

Colors
+
+
+
+
#5764c6
+
Primary
+
+
+
+
+
#eff1fa
+
Secondary
+
+
+
+
+
+
+
#454d5d
+
Dark
+
+
+
+
+
#727e96
+
Gray dark
+
+
+
+
+
#acb3c2
+
Gray
+
+
+
+
+
#e7e9ed
+
Gray light
+
+
+
+
+
#f0f1f4
+
Border
+
+
+
+
+
#f8f9fa
+
Background
+
+
+
+
+
#fff
+
Light
+
+
+
+
+
+
+
#32b643
+
Success
+
+
+
+
+
#ffb700
+
Warning
+
+
+
+
+
#e85600
+
Error
+
+
+
+
+
+ +
+

Accessibility coming soon

+
+ +
+

Browser support

+
+

Spectre uses Autoprefixer to make most styles compatible with earlier browsers and Normalize.css for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:

+
    +
  • Chrome LAST 4
    • +
  • Microsoft Edge LAST 4
    • +
  • Firefox LAST 4
    • +
  • Safari LAST 4
    • +
  • Opera LAST 4
    • +
  • Internet Explorer 10+
    • +
+
+
+ +
+

What's new

+
+

April 2017

+
    +
  • + Accordions: used to toggle sections of content NEW +
    • +
  • + Filters: CSS only content filters NEW +
    • +
  • + Comparison Sliders: sliders for comparing two images NEW +
    • +
  • + Timelines: ordered sequences of activities NEW +
    • +
+

March 2017

+
    +
  • + Icons: single-element, responsive and pure CSS icons NEW +
    • +
  • + Popovers: small overlay content containers +
    • +
  • + Panels: flexible view container layout with auto-expand content section +
    • +
  • + Carousels: slideshows for cycling images +
    • +
  • + Calendars: date or date range picker and events display +
    • +
+

February 2017

+
    +
  • New Documents experience
    • +
  • + Bars: represent the progress of a task or the value within the known range +
    • +
  • + Steps: progress indicators of a sequence of task steps +
    • +
  • + Tiles: repeatable or embeddable information blocks +
    • +
  • + Experimentals: experimental elements and features +
    • +
  • + Meters, Parallax, Progress and Sliders +
    • +
+

March 2016

+
    +
  • Initial commit
    • +
+
+
+ + + +
+
+
+ + + + -- cgit v1.3.1-23-gd82d