From 1c439a3201df5b559b124940c8fcc2702c345631 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 10 Jun 2018 10:38:45 +0800 Subject: Update Docs anchor --- docs/getting-started.html | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) (limited to 'docs/getting-started.html') diff --git a/docs/getting-started.html b/docs/getting-started.html index e7a99a7..45c464e 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -130,13 +130,13 @@
-

Introduction

+

Introduction

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, pure CSS components and utilities with best practice coding and consistent design language.

-

Installation

+

Installation

@@ -149,7 +149,7 @@

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

-

Install manually

+

Install manually

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

Download Spectre.css

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

@@ -157,23 +157,23 @@ <link rel="stylesheet" href="spectre-exp.min.css"> <link rel="stylesheet" href="spectre-icons.min.css"> -

Install from CDN

+

Install from CDN

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

<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
 <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
 <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
-

Install with NPM

+

Install with NPM

npm install spectre.css --save
-

Install with Yarn

+

Install with Yarn

yarn add spectre.css
-

Install from Bower

+

Install from Bower

bower install spectre.css --save
-

Custom version

+

Custom version

@@ -181,7 +181,7 @@

Sass Source Code

If you are looking for Less version of Spectre.css, please switch to Less branch.

Less Branch

-

Compiling CSS

+

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:

    @@ -196,7 +196,7 @@
  1. gulp docs - compile Docs related files
  2. gulp watch - watch file changes and re-compile CSS files
    3. -

    Importing Sass

    +

    Importing Sass

    It is recommended to customize Spectre by importing Sass source files to your projects. In this way, you can keep Spectre up to date without conflicts, since Spectre code and your custom code are separate.

    • First, create your own project and install Spectre via NPM or other package managers.
      • @@ -219,7 +219,7 @@ @import "node_modules/spectre.css/src/buttons"; @import "node_modules/spectre.css/src/forms"; -

      Folder structure

      +

      Folder structure

      spectre/
 ├── dist/                           // Build folder
 │   ├── spectre-exp.css
@@ -262,9 +262,9 @@
 ├── package.json
 └── ...
      -

      Variables

      +

      Variables

      Spectre.css is designed with consistent design language. You can use your own variables to create your new or match existing design. All variables in _variables.scss include !default flag. You can redefine the variables to override the values.

      -

      Variables - Colors

      +

      Variables - Colors

      @@ -343,7 +343,7 @@
      -

      Variables - Button mixins

      +

      Variables - Button mixins

      There are 2 button variant mixins in _mixins.scss to generate different color variants.

      • @mixin button-variant($color: $primary-color);
        • @@ -359,11 +359,11 @@ @include button-outline-variant($success-color); } -

        Variables - Sizes

        +

        Variables - 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.

        -

        Variables - Custom prefix

        +

        Variables - 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.

        npm install gulp-css-prefix
        @@ -379,10 +379,10 @@ gulp.task('prefix', After you compile your version of Spectre in the /dist, run gulp prefix in the directory of Spectre.

-

Accessibility

+

Accessibility

-

Browser support

+

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
    • @@ -395,7 +395,7 @@ gulp.task('prefix', Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.

-

What's new

+

What's new

September 2017

  • Off-canvas: navigation layout that the sidebar can slide in and out of the viewport NEW
    • -- cgit v1.3.1-23-gd82d