From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/getting-started.html | 733 +++++++--------------------------------------- 1 file changed, 110 insertions(+), 623 deletions(-) (limited to 'docs/getting-started.html') diff --git a/docs/getting-started.html b/docs/getting-started.html index 3046848..6abaf65 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -23,7 +23,8 @@
@@ -31,11 +32,14 @@
@@ -44,14 +48,22 @@
@@ -60,9 +72,12 @@
@@ -71,25 +86,44 @@
@@ -98,14 +132,22 @@
@@ -114,17 +156,28 @@
@@ -135,574 +188,8 @@

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

-
-
- - - -
-
- - -
-
-

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

-

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.

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

- 
npm install spectre.css --save
-
-

Install with Yarn

- 
yarn add spectre.css
-
-

Install from Bower

- 
bower install spectre.css --save
-
-
-

Custom version

-
- -
-

You can customize your version of Spectre.css by editing Sass files in /src directory or removing unneeded components from .scss source files.

-

Sass Source Code

-

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

-

Less Branch

-

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. -
  2. Run npm install. NPM will install all dev dependencies as listed in package.json.
    3. -
  3. When completed, run gulp build task to compile Sass to CSS and minify files.
    4. -
  4. You can find compiled CSS files in /dist directory.
    5. -
-

All available Gulp tasks:

-
    -
  • gulp build - compile Sass to CSS and minify files (default)
    • -
  • gulp docs - compile Docs related files
    • -
  • gulp watch - watch file changes and re-compile CSS files
    • -
-

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.
    • -
  • Then create your project-name.scss file in the root folder. You can use project-name.scss to define your variables.
    • -
  • Compile the Sass file to CSS to get the custom version of Spectre.
    • -
- 
// Example of project-name.scss
-// Define variables to override default ones
-$primary-color: #2e5bec;
-$dark-color: #3e396b;
-
-// Import full Spectre source code
-@import "node_modules/spectre.css/src/spectre";
-
-

Alternatively, you can create custom _variables.scss and import it to project-name.scss.

- 
// Example of project-name.scss
-@import "variables";
-
-// Import only the needed components
-@import "node_modules/spectre.css/src/buttons";
-@import "node_modules/spectre.css/src/forms";
-
-

Folder structure

- 
spectre/
-├── dist/                           // Build folder
-│   ├── 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 files
-│   │   └── docs.css
-|   ├── src/
-│   │   ├── scss                    // Docs Sass files
-│   │   │   └── docs.scss
-│   │   ├── index.pug               // Docs Pug files
-│   │   └── ...
-│   ├── examples/                   // Example tempalte
-│   │   └── starter.html
-│   ├── ../
-│   ├── index.html
-│   └── ...
-│
-├── src/                            // Source Sass files
-│   ├── spectre.scss
-│   ├── spectre-icons.scss
-│   ├── spectre-exp.scss
-│   ├── _mixins.scss
-│   ├── _variables.scss
-│   └── ...
-│
-├── gulpfile.js
-├── package.json
-└── ...
-
-

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

-
-
-
-
#5755d9
-
Primary
-
-
-
-
-
#f1f1fc
-
Secondary
-
-
-
-
-
-
-
#32b643
-
Success
-
-
-
-
-
#ffb700
-
Warning
-
-
-
-
-
#e85600
-
Error
-
-
-
-
-
-
-
#303742
-
Dark
-
-
-
-
-
#66758c
-
Gray dark
-
-
-
-
-
#bcc3ce
-
Gray
-
-
-
-
-
#f7f8f9
-
Gray light
-
-
-
-
-
#bcc3ce
-
Border
-
-
-
-
-
#f7f8f9
-
Background
-
-
-
-
-
#fff
-
Light
-
-
-
-

Variables - Button mixins

-

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

-
    -
  • @mixin button-variant($color: $primary-color);
    • -
  • @mixin button-outline-variant($color: $primary-color);
    • -
- 
<!-- filled button with the success color -->
-.btn-success {
-  @include button-variant($success-color);
-}
-
-<!-- outlined button with the success color -->
-.btn-outline-success {
-  @include button-outline-variant($success-color);
-}
-
-

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

-

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.

-
-
-

Accessibility

-
-
- - - -
-
- - -
-
-
-
-

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 Extended Support Release
    • -
  • Safari LAST 4
    • -
  • Opera LAST 4
    • -
  • Internet Explorer 10+
    • -
-

Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.

-
-
-

What's new

-
-
- - - -
-
- - -
-

Spectre.css Changelog

-
v0.5.4
-
    -
  • IMPORTANT: Change naming of position utilities to avoid conflicts
    • -
  • Update dark color variable
    • -
  • Fix sidebar hash link bug #482
    • -
  • Fix browser support typo #469
    • -
  • Fix code typo #460
    • -
  • Fix GitHub button z-index bug #458
    • -
  • Fix Bar background color issue by adding !important to color utilities
    • -
  • Fix chip bug when content is too long #506
    • -
  • Fix multiple select height bug #508
    • -
-
v0.5.3
-
    -
  • Add dark text color to utilities
    • -
  • Add error state to the indeterminate checkbox
    • -
  • Add inline forms
    • -
  • Add more code examples
    • -
  • Fix errors in the Docs
    • -
-
v0.5.2
-
    -
  • IMPORTANT: Move Docs to Pug templates
    • -
  • Add more Docs examples
    • -
  • Add visited link style
    • -
  • Add 100% modal height class #391
    • -
  • Fix off-canvas-overlay bug #392
    • -
  • Fix margin and padding values #431
    • -
  • Fix Accordion example #438
    • -
  • Fix a bug of input addons width on mobile devices #449
    • -
  • Separate Simplified Chinese (zh/zh-Hans) from Traditional (zh-Hant)
    • -
-
v0.5.1
-

IMPORTANT: Move Autocomplete to the Experimentals

-
    -
  • Add form checkbox, radio and switch support to Menus
    • -
  • Add responsive horizontal form support #375
    • -
  • Add Favicons in the docs #398
    • -
  • Fix Off-canvas z-index problem #361
    • -
  • Fix icons disappearing on group classes on focus
    • -
  • Fix Deprecation Warning #396 #356
    • -
  • Initial commit of RTL support (not finished)
    • -
-
v0.5.0
-
    -
  • IMPORTANT: Restore /dist folder
    • -
  • Add Grid nesting example #353
    • -
  • Add Form control sizes support
    • -
  • Update Off-canvas default behavior and new option available #347
    • -
  • Split Mixins
    • -
  • Fix Navbar last-child align right bug #346
    • -
  • Fix modal doc typo
    • -
  • Fix docs examples #348
    • -
-
v0.4.7
-
    -
  • Add new button colors (success and error) #227 #241 #342
    • -
  • Add overflow-scrolling: touch; CSS for better scrolling
    • -
  • Add touch support to Parallax image hover effect
    • -
  • Update the Modal example code
    • -
  • Fix form horizontal layout spacing
    • -
-
v0.4.6
-
    -
  • Add new Sliders example #328
    • -
  • Add Table with horizontal scroll support #333
    • -
  • Update Calendar event style which makes use of color utilities #326
    • -
  • Define $parallax-fade-color as default variable #332
    • -
  • Fix the Docs content mistake
    • -
  • Fix breadcrumb-item extra spacing #337
    • -
  • Fix comparison slider image responsive bug #338
    • -
-
v0.4.5
-
    -
  • Rewrite Off-canvas component
    • -
  • Add active support to the Off-canvas #308
    • -
  • Update the Docs pages
    • -
-
v0.4.4
-
    -
  • IMPORTANT: Increase default font sizes to 16px #271
    • -
  • Add version number to CSS #288 #289
    • -
-
v0.4.3
-
    -
  • Add Icon Sizes #284
    • -
  • Add Large Modals #293
    • -
  • Update primary color to #5755d9
    • -
  • Change Tooltips white-space to pre #292
    • -
  • Encode SVG Data URI (thanks to @mariodev) #297 #298
    • -
  • Improve Buttons and Forms small and large variables
    • -
  • Improve Filters code
    • -
  • Improve gulpfile and package
    • -
  • Add Importing Sass Docs
    • -
-
v0.4.2
-
    -
  • Add Off-screen experimental
    • -
  • Fix Docs rendering bug in Safari
    • -
-
v0.4.1
-
    -
  • Add default modifier to all variables
    • -
  • Add address reset which changes font-style to normal
    • -
  • Add Details and Summary Accordions support
    • -
  • Fix responsive video
    • -
  • Update the Docs
    • -
-
v0.4.0
-
    -
  • Switch from Less to Sass
    • -
  • Add Cursor utilities
    • -
-
v0.3.2
-
    -
  • Add label-rounded classes
    • -
  • Add Avatars presence status code
    • -
  • Add Typography Fonts Docs
    • -
  • Add Button variant mixins
    • -
  • Update Autocomplete style
    • -
  • Update Autoprefixer rules
    • -
  • Update label mixin and code mono font family
    • -
-
v0.3.1
-

IMPORTANT: The default root font-size has been changed to 20px, please update your rem numbers if you're using the custom sizes. Learn more.

-
    -
  • Fix margin and padding utilities bug
    • -
  • Add grid offset
    • -
  • Rename Display utilities class names
    • -
  • Move Panels and Empty states to Components from Layout
    • -
  • Fix Docs bugs and cleanup codes
    • -
-
v0.2.15
-
    -
  • BIG Update to the Docs experience, completely rewritten and improved #240
    • -
  • Add Text and Background colors utilities #205 #219
    • -
  • Add Install from CDN option #191
    • -
  • Add unit size (4px) and unit size variables
    • -
  • Add Responsive container (max width container) #222
    • -
  • Add error and success states to checkbox, radio and switch #246
    • -
  • Fix Rem unit issue in East Asian Chrome #110
    • -
  • Fix icon direction bug #218
    • -
  • Fix Dropdown menu max items/height #226
    • -
-
v0.2.14
-
    -
  • Add vertical divider
    • -
  • Add Form icon support
    • -
  • Add Accordions
    • -
  • Add anchor links to Docs
    • -
  • Add new container grid size
    • -
  • Fix link error and typo
    • -
-
v0.2.13
-
    -
  • Add Timelines code
    • -
  • Add input readonly style
    • -
  • Change Gulp building process and ignore /dist
    • -
  • Change naming danger to error
    • -
  • Change label-variant mixin
    • -
  • Fix dropdown-toggle border radius in button groups
    • -
  • Fix Calendars date item width bug under Firefox
    • -
-
v0.2.12
-
    -
  • Add pure CSS Comparison Sliders
    • -
  • Add pure CSS content Filters
    • -
  • Add Avatars badge support
    • -
  • Add more icons
    • -
  • Change :focus support
    • -
  • Change Docs image sizes and add object-fit support
    • -
  • Update Navbar code
    • -
  • Fix typos, Modals bugs
    • -
-
v0.2.11
-
    -
  • Add pure CSS Popovers
    • -
  • Add pure CSS Icons
    • -
  • Add Slider bars
    • -
  • Add tvOS Parallax effect text layer
    • -
  • Update shadow mixin
    • -
-
v0.2.10
-
    -
  • Add Shadows and Z-index variables
    • -
  • Add Divider text
    • -
  • Improve color variables
    • -
  • Cleanup components code
    • -
  • Remove the Responsive Resizer tool (Moved to https://github.com/picturepan2/responsive-resizer)
    • -
-
v0.2.9
-
    -
  • Add Panels layout: flexible view container layout with auto-expand content section
    • -
  • Update Navbar layout
    • -
  • Update docs and examples
    • -
-
v0.2.8
-
    -
  • Add Carousels previous and next buttons
    • -
  • Improve disabled state for forms
    • -
  • Improve calendar events style
    • -
  • Improve Sliders disabled style
    • -
  • Improve Autocomplete menu position
    • -
  • Merge Menus and Dropdowns
    • -
-
v0.2.7
-
    -
  • Add Calendars experimental support
    • -
  • Add tabindex note to the dropdowns docs
    • -
  • Add shrink-to-fit=no to head meta
    • -
  • Add Colors docs and update colors
    • -
  • Fix wrong shadow colors with form-select
    • -
  • Fix grid-480
    • -
-
v0.2.6
-
    -
  • Add Carousels initial experimental version
    • -
  • Add Spectre.css Twitter account (@spectrecss) link
    • -
  • Improve Docs experience and navbar
    • -
  • Fix the bug of form input focus colors
    • -
-
v0.2.5
-
    -
  • Improve color variables completely
    • -
  • Add Menu badges
    • -
  • Add Responsive visibility (show-x)
    • -
  • Add Parallax effect (pure CSS)
    • -
  • Fix elements and components
    • -
  • Update empty state layout code
    • -
-
v0.2.4
-
    -
  • ADD: Meters element experimental support
    • -
  • ADD: Progress indeterminate animation
    • -
  • ADD: Text-decoration-skip support
    • -
  • CHG: Split Codes and improve docs codes
    • -
  • FIX: Steps with tooltips z-index bug
    • -
-
v0.2.3
-
    -
  • Bars component
    • -
  • Badges for buttons
    • -
  • Experimentals CSS and docs
    • -
  • Sliders experimental component
    • -
  • A number of fixes as usual
    • -
-
v0.2.1
-

I have updated the whole Spectre.css documents experience and bumped the version to v0.2.x. The new Docs can be viewed at https://picturepan2.github.io/spectre/. Here are the new things added:

-
    -
  • New Docs experience with better navigations and better mobile off-canvas menu
    • -
  • New components: Tiles, Steps and Navs (part of Navigation)
    • -
  • Improvements: Action button, Autocomplete, Pagination, Tabs, Breadcrumbs, Badges, Cards, new Progress experimental support and better focus style
    • -
  • Fixes
    • -
-
v0.0.1 - March 2016
-

Initial commit

-

Thank you. ♥

- -

Releases

+

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.