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.
There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.
Download the compiled and minified Spectre CSS file (~10KB min+gzip):
Include spectre.css
located in /docs/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" />
Alternatively, you can use the unpkg CDN to load compiled Spectre.css.
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css" />
$ npm install spectre.css --save
$ yarn add spectre.css
$ bower install spectre.css --save
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
, spectre-exp.less
and spectre-icons.less
.
Then, you can build the CSS file from the command line:
npm install
. NPM will install all dev dependencies as listed in package.json.gulp build
to compile LESS to CSS and minify files./dist
directory.You can watch file changes and rebuild CSS files by using gulp watch
.
spectre/
├── dist/ // Build folder (Git ignored)
│ ├── 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 file
│ │ └── docs.css
| ├── src/
│ │ └── docs.less
│ ├── ../
│ ├── index.html
│ └── ...
│
├── src/ // Source LESS files
│ ├── mixins.less
│ ├── variables.less
│ └── ...
│
├── spectre-exp.less
├── spectre-icons.less
└── spectre.less
Spectre.css is designed with consistent design language. You can modify variables.less
to create your new or match existing design.
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:
April 2017
March 2017
February 2017
March 2016