GitHubSponsor

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. Run npm install. NPM will install all dev dependencies as listed in package.json.
  3. When completed, run gulp build task to compile Sass to CSS and minify files.
  4. 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";

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