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

### 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
#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');

    function prefix() {
      return gulp
        .src('./dist/*.css')
        .pipe(cssPrefix('spectre-'))
        .pipe(gulp.dest('./dist'));
    }

    exports.prefix = prefix;

After you compile your version of Spectre in the /dist, run `gulp prefix` in the directory of Spectre.

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

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