Installation - Getting started - Spectre.css CSS Framework
Author: Yan Zhu
Description: Spectre.css CSS Framework 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.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

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

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.