Spectre.css

The lightweight, responsive and modern CSS framework

Lightweight
Lightweight (~10KB gzipped) starting point for your projects
Responsive
Flexbox-based, responsive and mobile-friendly layout
Modern
Carefully designed elements and components

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

There are 4 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM, Yarn and Bower.

Install manually

Download the compiled and minified Spectre CSS file (~10KB min+gzip):

Download Spectre.css

Install with NPM
$ npm install spectre.css --save
Install with Yarn
$ yarn add spectre.css
Install with Bower
$ bower install spectre.css --save

And include spectre.css in your website or Web app <head>. If you want the Spectre Experimentals components, you can add spectre-exp.css as well.

<link rel="stylesheet" href="dist/spectre.min.css" />
<link rel="stylesheet" href="dist/spectre-exp.min.css" />

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.

Then, you can build the CSS file from the command line:

  1. Navigate to the root directory of Spectre where you can find package.json file.
  2. Run npm install. NPM will install all dev dependencies as listed in package.json.
  3. When completed, run gulp build to compile LESS to CSS and minify files.
  4. You can find compiled CSS files in /dist directory.

You can watch file changes and rebuild CSS files by using gulp watch.

spectre/
├── dist/
│   ├── spectre-exp.css
│   ├── spectre-exp.min.css
│   ├── spectre.css
│   └── spectre.min.css
│
├── docs/
|   ├── css/
│   │   ├── docs.less
│   │   └── ...
│   ├── ../
│   ├── index.html
│   └── ...
│
├── src/
│   ├── mixins.less
│   ├── variables.less
│   └── ...
│
├── spectre-exp.less
└── spectre.less

Variables

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

Colors
#5764c6
Primary
#eff1fa
Secondary
#454d5d
Dark
#727e96
Gray dark
#acb3c2
Gray
#e7e9ed
Gray light
#f0f1f4
Border
#f8f9fa
Background
#fff
Light
#32b643
Success
#ffb700
Warning
#e85600
Danger

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 (last 4)
  • Safari (last 4)
  • Opera (last 4)
  • Internet Explorer 10+

What's new

March 2017

  • Panels: flexible view container layout with auto-expand content section NEW
  • Carousels: slideshows for cycling images NEW
  • Calendars: date or date range picker and events display NEW

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