From b56b14d2f4a5c30c9a3d106377b40d3a7f595b8a Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 16 Aug 2017 19:53:45 +0800 Subject: Move Panels and Empty states to Components from Layout --- docs/getting-started.html | 50 ++++++++++++++++++++++++++--------------------- 1 file changed, 28 insertions(+), 22 deletions(-) (limited to 'docs/getting-started.html') diff --git a/docs/getting-started.html b/docs/getting-started.html index 124890d..8f02226 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -104,12 +104,6 @@
  • Navbar
    • -
  • - Panels -
    • -
  • - Empty states -
    • @@ -144,6 +138,9 @@
  • Chips
    • +
  • + Empty states +
  • Menus
    • @@ -156,6 +153,9 @@
  • Pagination
    • +
  • + Panels +
  • Popovers
    • @@ -251,16 +251,16 @@
    -
    -

    Introduction

    +
    +

    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

    +
    +

    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.

    @@ -312,8 +312,8 @@
    -
    -

    Custom version

    +
    +

    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:

    @@ -366,7 +366,7 @@

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

    -
    Colors
    +
    Colors
    @@ -445,13 +445,13 @@
    -
    Sizes
    +
    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
    +
    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.

    @@ -479,12 +479,12 @@ gulp.task('prefix', function() {
    -
    -

    Accessibility coming soon

    +
    +

    Accessibility coming soon

    -
    -

    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:

      @@ -498,9 +498,15 @@ gulp.task('prefix', function() {
    -
    -

    What's new

    +
    +

    What's new

    +

    August 2017

    +

    April 2017

    • @@ -519,7 +525,7 @@ gulp.task('prefix', function() {

      March 2017

      • - Icons: single-element, responsive and pure CSS icons NEW + Icons: single-element, responsive and pure CSS icons
      • Popovers: small overlay content containers -- cgit v1.3.1-23-gd82d