Getting started - Spectre.css CSS Framework

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.

- -

- - - - -

- - - +

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 <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">
+          
+            #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 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 NPM
+            npm install spectre.css --save
 
-
-        
-          Install with Yarn
-        
-
-
-$yarn add spectre.css
+            #Install with Yarn
+            yarn add spectre.css
 
-
-        
-          Install with 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:
-          
-            Navigate to the root directory of Spectre.
-            Run npm install. NPM will install all dev dependencies as listed in package.json.
-            When completed, run gulp build task to compile Sass to CSS and minify files.
-            You can find compiled CSS files in /dist directory.
-          
-          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";
+            #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:
+            
+              Navigate to the root directory of Spectre.
+              Run npm install. NPM will install all dev dependencies as listed in package.json.
+              When completed, run gulp build task to compile Sass to CSS and minify files.
+              You can find compiled CSS files in /dist directory.
+            
+            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";
+            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
+            #Folder structure
+            
+            spectre/
+├── dist/                           // Build folder
+│   ├── spectre-exp.css
+│   ├── spectre-exp.min.css
 │   ├── spectre-icons.css
-│   ├── spectre-icons.min.css
+│   ├── spectre-icons.min.css
 │   ├── spectre.css
-│   └── spectre.min.css
+│   └── spectre.min.css
 │
 ├── docs/
-│   ├── dist/                       // Pre-built CSS folder
-│   │   ├── spectre-exp.css
-│   │   ├── spectre-exp.min.css
+│   ├── dist/                       // Pre-built CSS folder
+│   │   ├── spectre-exp.css
+│   │   ├── spectre-exp.min.css
 │   │   ├── spectre-icons.css
-│   │   ├── spectre-icons.min.css
+│   │   ├── spectre-icons.min.css
 │   │   ├── spectre.css
-│   │   └── spectre.min.css
-|   ├── css/                        // Docs CSS file
+│   │   └── spectre.min.css
+|   ├── css/                        // Docs CSS files
 │   │   └── docs.css
 |   ├── src/
-│   │   └── docs.scss
-│   ├── examples/                   // Example tempalte
+│   │   ├── scss                    // Docs Sass files
+│   │   │   └── docs.scss
+│   │   ├── index.pug               // Docs Pug files
+│   │   └── ...
+│   ├── examples/                   // Example tempalte
 │   │   └── starter.html
 │   ├── ../
 │   ├── index.html
 │   └── ...
 │
-├── src/                            // Source Sass files
+├── src/                            // Source Sass files
 │   ├── spectre.scss
 │   ├── spectre-icons.scss
-│   ├── spectre-exp.scss
+│   ├── spectre-exp.scss
 │   ├── _mixins.scss
 │   ├── _variables.scss
 │   └── ...
 │
 ├── gulpfile.js
-├── package.json
+├── 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.
-        
-        Colors
-        
-          
-            
-              #5755d9
-              Primary
-            
-          
-          
-            
-              #f1f1fc
-              Secondary
-            
-          
-        
-        
-          
-            
-              #32b643
-              Success
+            #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
+                
+              
             
-          
-          
-            
-              #ffb700
-              Warning
-            
-          
-          
-            
-              #e85600
-              Error
+            
+              
+                
+                  #32b643
+                  Success
+                
+              
+              
+                
+                  #ffb700
+                  Warning
+                
+              
+              
+                
+                  #e85600
+                  Error
+                
+              
             
-          
-        
-        
-          
-            
-              #454d5d
-              Dark
-            
-          
-          
-            
-              #727e96
-              Gray dark
+            
+              
+                
+                  #454d5d
+                  Dark
+                
+              
+              
+                
+                  #727e96
+                  Gray dark
+                
+              
+              
+                
+                  #acb3c2
+                  Gray
+                
+              
+              
+                
+                  #e7e9ed
+                  Gray light
+                
+              
+              
+                
+                  #f0f1f4
+                  Border
+                
+              
+              
+                
+                  #f8f9fa
+                  Background
+                
+              
+              
+                
+                  #fff
+                  Light
+                
+              
             
-          
-          
-            
-              #acb3c2
-              Gray
-            
-          
-          
-            
-              #e7e9ed
-              Gray light
-            
-          
-          
-            
-              #f0f1f4
-              Border
-            
-          
-          
-            
-              #f8f9fa
-              Background
-            
-          
-          
-            
-              #fff
-              Light
-            
-          
-        
-
-        Buttons
-        
-          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);
+            #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);
+<!-- outlined button with the success color -->
+.btn-outline-success {
+  @include button-outline-variant($success-color);
 }
 
-
-        

-        
-        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
-        
-          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
+            #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'))
+            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 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 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
-        
-          September 2017
-          
-            
-              Off-canvas: navigation layout that the sidebar can slide in and out of the viewport NEW
-            
-          
-          August 2017
-          
-            
-              Switch to Sass NEW
-            
-            
-              New Docs Experience NEW
-            
-          
-          April 2017
-          
-            
-              Accordions: used to toggle sections of content 
-            
-            
-              Filters: CSS only content filters 
-            
-            
-              Comparison Sliders: sliders for comparing two images
-            
-            
-              Timelines: ordered sequences of activities
-            
-          
-          March 2017
-          
-            
-              Icons: single-element, responsive and pure CSS icons
-            
-            
-              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
-          
-          Releases
+            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
+            September 2017
+            
+              Off-canvas: navigation layout that the sidebar can slide in and out of the viewport NEW
+            
+            August 2017
+            
+              Switch to Sass NEW
+              New Docs Experience NEW
+            
+            April 2017
+            
+              Accordions: used to toggle sections of content
+              Filters: CSS only content filters
+              Comparison Sliders: sliders for comparing two images
+              Timelines: ordered sequences of activities
+            
+            March 2017
+            
+              Icons: single-element, responsive and pure CSS icons
+              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
+            
+            Releases
+          
         
       

-
-      
-        GitHub | Twitter | PayPal Donate | Version 
-        Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.
-      
-
     

-  

-
-  
-
-
+    
+  
+
\ No newline at end of file
-- 
cgit v1.3.1-23-gd82d

SPECTRE

SPECTRE

Introduction

Introduction

Installation

Installation

Install manually

Install from CDN

Install with NPM

Install with Yarn

Custom version

Compiling CSS

Importing Sass

Install from Bower

Custom version

Compiling CSS

Importing Sass

Folder structure

Folder structure

Variables

Colors

Variables

Variables - Colors

Buttons

Variables - Button mixins

Sizes

Custom prefix

Variables - Sizes

Variables - Custom prefix

Accessibility coming soon

Browser support

What's new

Accessibility

Browser support

What's new

SPECTRE

SPECTRE

#Introduction

#Introduction

#Installation

#Installation

#Install manually

#Install from CDN

#Install with NPM

#Install with Yarn

#Custom version

Compiling CSS

Importing Sass

#Install from Bower

#Custom version

#Compiling CSS

#Importing Sass

Folder structure

#Folder structure

#Variables

Colors

#Variables

#Variables - Colors

Buttons

#Variables - Button mixins

Sizes

Custom prefix

#Variables - Sizes

#Variables - Custom prefix

#Accessibility coming soon

#Browser support

#What's new

#Accessibility

#Browser support

#What's new

Introduction

Introduction

Installation

Installation

Install manually

Install from CDN

Install with NPM

Install with Yarn

Custom version

Install from Bower

Custom version

Compiling CSS

Importing Sass

Folder structure

Variables

Variables

Variables - Colors

Variables - Button mixins

Variables - Sizes

Variables - Custom prefix

Accessibility coming soon

Browser support

What's new

Accessibility

Browser support

What's new