From 82e0eef89b185eddbdee9b43beab76d3effa7501 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 16 Aug 2017 18:33:44 +0800 Subject: Rename display utilities and add custom prefix --- docs/getting-started.html | 34 ++++++++++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) (limited to 'docs/getting-started.html') diff --git a/docs/getting-started.html b/docs/getting-started.html index 5a1afc1..124890d 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -364,9 +364,9 @@

Variables

-

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

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

-
Colors
+
Colors
@@ -448,8 +448,34 @@
Sizes

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

-

Please note in Chinese/Japanese/Korean Chrome, 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 also use 4px as the unit size. Sizes of components are based on the unit size.

+

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.

+
+ + +
$ npm install gulp-css-prefix
+
+ +
+

To add spectre- to all classes, you can add the Gulp task to gulpfile.js file.

+
+ + +
var cssPrefix = require('gulp-css-prefix');
+  
+gulp.task('prefix', function() {
+  gulp.src('./dist/*.css')
+      .pipe(cssPrefix('spectre-'))
+      .pipe(gulp.dest('./dist'))
+});
+
+ +
+

After you compile your version of Spectre in the /dist, run gulp prefix in the directory of Spectre.

-- cgit v1.3.1-26-gb76a 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 --- README.md | 4 +- docs/components.html | 334 ++++++++++++++++++++++++++++++++++++++-------- docs/css/docs.css | 1 + docs/elements.html | 84 ++++++------ docs/experimentals.html | 54 ++++---- docs/getting-started.html | 50 ++++--- docs/layout.html | 256 ++--------------------------------- docs/src/docs.less | 1 + docs/utilities.html | 48 +++---- 9 files changed, 420 insertions(+), 412 deletions(-) (limited to 'docs/getting-started.html') diff --git a/README.md b/README.md index 65b957a..483884f 100644 --- a/README.md +++ b/README.md @@ -55,8 +55,6 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [Flexbox grid](https://picturepan2.github.io/spectre/layout.html#grid) - flexbox based responsive grid system - [Responsive](https://picturepan2.github.io/spectre/layout.html#responsive) - responsive grid and utilities - [Navbar](https://picturepan2.github.io/spectre/layout.html#navbar) - layout container that appears in the header of apps and websites -- [Panels](https://picturepan2.github.io/spectre/layout.html#panels) - flexible view container layout with auto-expand content section -- [Empty states](https://picturepan2.github.io/spectre/layout.html#empty) - empty states/blank slates for first time use, empty data and error screens #### Components - [Accordions](https://picturepan2.github.io/spectre/components.html#accordions) - used to toggle sections of content @@ -67,10 +65,12 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [Bars](https://picturepan2.github.io/spectre/components.html#bars) - progress of a task or the value within the known range - [Cards](https://picturepan2.github.io/spectre/components.html#cards) - flexible content containers - [Chips](https://picturepan2.github.io/spectre/components.html#chips) - complex entities in small blocks +- [Empty states](https://picturepan2.github.io/spectre/components.html#empty) - empty states/blank slates for first time use, empty data and error screens - [Menus](https://picturepan2.github.io/spectre/components.html#menus) - list of links or buttons for actions and navigation - [Navs](https://picturepan2.github.io/spectre/components.html#navs) - navigational list of links - [Modals](https://picturepan2.github.io/spectre/components.html#modals) - flexible dialog prompts - [Pagination](https://picturepan2.github.io/spectre/components.html#pagination) - navigational links for multiple pages +- [Panels](https://picturepan2.github.io/spectre/components.html#panels) - flexible view container with auto-expand content section - [Popovers](https://picturepan2.github.io/spectre/components.html#popovers) - small overlay content containers - [Steps](https://picturepan2.github.io/spectre/components.html#steps) - progress indicators of a sequence of task steps - [Tabs](https://picturepan2.github.io/spectre/components.html#tabs) - toggle for different views diff --git a/docs/components.html b/docs/components.html index 3143683..c87bd8e 100644 --- a/docs/components.html +++ b/docs/components.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,8 +251,8 @@
    -
    -

    Accordions

    +
    +

    Accordions

    Accordions are used to toggle sections of content.

    @@ -402,8 +402,8 @@
    -
    -

    Autocomplete

    +
    +

    Autocomplete

    Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

    @@ -529,8 +529,8 @@
    -
    -

    Avatars

    +
    +

    Avatars

    Avatars are user profile pictures.

    @@ -610,8 +610,8 @@
    -
    -

    Badges

    +
    +

    Badges

    Badges are often used as unread number indicators.

    @@ -686,8 +686,8 @@
    -
    -

    Bars

    +
    +

    Bars

    Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 progress, meter and input range elements.

    @@ -732,7 +732,7 @@ </div> -

    Slider bars

    +

    Slider bars

    @@ -781,8 +781,8 @@
    -