Custom - Getting started - Spectre.css CSS Framework

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

Skeleton

Spectre.css is a part of a bigger project, it's an angular library, and it was generated by the skeleton workspace with an Angular CLI version 13.0.0.

Download the skeleton workspace, and copy the spectre.css package into the packages/spectre.css folder then run the commands below.

Compiling CSS

Spectre.css uses Sass for compiling CSS. Firstly you need to install NPM, which is used to manage dependencies.

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

Navigate to the root directory of Skeleton.
Run npm install to install all dependencies as listed in package.json.
When completed, navigate to the root directory of Spectre.css package packages/spectre.css.
Run npm installto install dev dependencies as listed in package.json.
When completed, run npm run sass:prod script to compile Sass to CSS and minify files.
You can find compiled CSS files in /dist directory.

All available scripts:

npm run sass:dev - compile Sass to CSS without minify files
npm run sass:prod - compile Sass to CSS and minify the files
npm run build:docs - compile Docs related files with pug
npm run build - runs scripts in ordernpm run sass:prod, npm run sass:dev, ng build spectre.css, npm run build:docs

Importing Sass

It is recommended to customize Spectre.css by importing Sass source files to your projects. In this way, you can keep Spectre.css up to date without conflicts, since Spectre.css code and your custom code are separate.

First, create your own project and install Spectre.css 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.css.

// Example of project-name.scss

// Import Spectre core source code
@use 'node_modules/@angular-package/spectre.css/spectre' as *;

// Import Spectre icons source code 
@use 'node_modules/@angular-package/spectre.css/spectre-icons' as *;

// Import Spectre experimental source code 
@use 'node_modules/@angular-package/spectre.css/spectre-exp' as *;

Alternatively, you can create custom _variables.scss and import it to project-name.scss.

// Example of project-name.scss
@use 'variables' as *;

// Import only the needed components
@use 'node_modules/@angular-package/spectre.css/src/buttons';
@use 'node_modules/@angular-package/spectre.css/src/forms';

Custom - Hex colors

To override the default hex colors import by using the @use Sass variables and then load spectre styles.

The following colors are used in both dark and light themes.

// Example of project-name.scss
@use 'node_modules/@angular-package/spectre.css/variables' as *;

// Define variables to override default ones
$accent-color: #9932CC;
$code-color: #d73e48;
$error-color: #e85600;
$highlight-color: #ffe9b3;
$info-color: #d9edf7;
$primary-color: #5755d9;
$success-color: #32b643;
$warning-color: #ffb700;

// Import Spectre core source code
@use 'node_modules/@angular-package/spectre.css/spectre' as *;

// Import Spectre icons source code 
@use 'node_modules/@angular-package/spectre.css/spectre-icons' as *;

// Import Spectre experimental source code 
@use 'node_modules/@angular-package/spectre.css/spectre-exp' as *;

Watch on YouTube

Custom - Derived colors

To override the default derived colors import by using the @use Sass variables and then load spectre styles.

Derived colors are not used in the themes.

// Example of project-name.scss
@use 'node_modules/@angular-package/spectre.css/variables' as *;

// Define variables to override default ones
$bg-color: darken($dark-color, 55%); // original lighten($dark-color, 75%);
$bg-color-dark: darken($bg-color, 3%);
$bg-color-light: $light-color;
$body-bg-color: $bg-color-light;
$body-font-color: lighten($dark-color, 5%);
$border-color: lighten($dark-color, 65%);
$border-color-dark: darken($border-color, 10%);
$border-color-light: lighten($border-color, 8%);
$disabled-color: $bg-color-dark;
$gray-color: lighten($dark-color, 55%);

// Import Spectre core source code
@use 'node_modules/@angular-package/spectre.css/spectre' as *;

// Import Spectre icons source code 
@use 'node_modules/@angular-package/spectre.css/' as *;

// Import Spectre experimental source code 
@use 'node_modules/@angular-package/spectre.css/spectre-exp' as *;

Watch on YouTube

Custom - Theme

There are dark and light themes, that can be overridden to customize Spectre.css version.

Before you start the customization, find out what properties you can customize and what type of these properties can be in both dark and light themes.

Custom - Theme property types

CSS color variables are being defined based on given properties of the $theme-dark and $theme-light and they can take the values as follows:

The hex color, setting a base color.

$theme-dark: (
  ...
  'dark-color': #020202,
  ...
);

The hex color from the other Sass variable, setting a base color.

$dark-color: #020202;

$theme-dark: (
  ...
  'dark-color': $dark-color,
  ...
);

The hex color from the other Sass variable adjusted by lighten() or darken() Sass function, variable setting a base color.

$dark-color: #020202;

$theme-dark: (
  ...
  'dark-color': lighten($dark-color, 5%),
  ...
);

The color name or color code of string type, setting a derived color.

$dark-color: lighten(#020202, 15%);

$theme-dark: (
  ...
  'dark-color': $dark-color,
  'gray-color': 'dark-color',
  'gray-color-second': 'dark',
  ...
);

The Sass list, setting the derived color, where the first parameter is the color name or color code, the second is color lightness base plus/minus, and third is the plus/minus transparency.

$theme-dark: (
  ...
  'dark-color': #020202,
  'dark-color-darker': ('dark', -15%),

  'light-color': $light-color,
  'light-color-lighter': ('light-color', +15%),
  ...
);

Custom - Color scheme

To override the $color-scheme import by using the @use file node_modules/@angular-package/spectre.css/variables, override the $color-scheme, and then load spectre styles.

// Example of project-name.scss
@use 'node_modules/@angular-package/spectre.css/variables' as *;

// Override the $color-scheme
$color-scheme: light;

// Import Spectre core source code
@use 'node_modules/@angular-package/spectre.css/spectre' as *;

// Import Spectre icons source code 
@use 'node_modules/@angular-package/spectre.css/spectre-icons' as *;

// Import Spectre experimental source code 
@use 'node_modules/@angular-package/spectre.css/spectre-exp' as *;

Watch on YouTube

Custom - Theme light

To override the default theme light colors import by using the @use Sass $theme-light map variable, Sass module sass:map, set specific property in the $theme-light by using the map.set(), override the $theme-light with updated value, and then load spectre styles.

// Example of project-name.scss
@use 'sass:map';
@use 'node_modules/@angular-package/spectre.css/variables' as *;

// Define the new $theme-light to override default ones
$theme-light: map.set($theme-light, 'primary-color-dark', ('gray-dark', +5%));

// Import Spectre core source code
@use 'node_modules/@angular-package/spectre.css/spectre' as *;

// Import Spectre icons source code 
@use 'node_modules/@angular-package/spectre.css/spectre-icons' as *;

// Import Spectre experimental source code 
@use 'node_modules/@angular-package/spectre.css/spectre-exp' as *;

Watch on YouTube

Custom - Theme dark

To override the default theme dark colors import by using the @use Sass $theme-dark map variable from the node_modules/@angular-package/spectre.css/variables, Sass module sass:map, set specific property in the $theme-dark by using the map.set(), override the $theme-dark with updated value, and then load spectre styles.

// Example of project-name.scss
@use 'sass:map';
@use 'node_modules/@angular-package/spectre.css/variables' as *;

// Define the new $theme-dark to override default ones
$theme-dark: map.set($theme-dark, 'primary-color-light', ('gray-light', -5%));

// Import Spectre core source code
@use 'node_modules/@angular-package/spectre.css/spectre' as *;

// Import Spectre icons source code 
@use 'node_modules/@angular-package/spectre.css/spectre-icons' as *;

// Import Spectre experimental source code 
@use 'node_modules/@angular-package/spectre.css/spectre-exp' as *;

Watch on YouTube

Custom - Prefix

You can have CSS variable names with a different prefix by changing the sass $var-prefix variable.

// Get variables.
@use 'node_modules/@angular-package/spectre.css/variables' as *;

// Change the $var-prefix
$var-prefix: 'spectre';

// Use the spectre.
@use 'node_modules/@angular-package/spectre.css/spectre' as *;

Then, for example, the $border-color sass variable has CSS variable name related to saturation defined as follows:

--spectre-border-color-s: var(--spectre-dark-color-s);

Custom - Class prefix

You can customize the CSS class name by adding the prefix through the sass $class-prefix variable.

// Get variables.
@use 'node_modules/@angular-package/spectre.css/variables' as *;

// Change the $class-prefix
$class-prefix: 'spectre-';

// Use the spectre.
@use 'node_modules/@angular-package/spectre.css/spectre' as *;

Then, for example, the .avatar class CSS variable name is compiled as follows:

.spectre-avatar { ... }

Custom - Color name

You can have a CSS variable color name with a different prefix, as above, and different hue, saturation, lightness and alpha by changing the related sass variables.

Custom - Color name hue

To have a different name of the CSS variable related to the color hue change the $var-hue sass variable.

// Get variables.
@use 'node_modules/@angular-package/spectre.css/variables' as *;

// Change the $var-prefix
$var-prefix: 'spectre';

// Change the $var-hue
$var-hue: 'hue';

// Use the spectre.
@use 'node_modules/@angular-package/spectre.css/spectre' as *;

Then, for example, the $accent-color sass variable has the CSS variable name related to saturation set as follows:

--spectre-accent-color-hue: 280.1298701299deg;

Custom - Color name saturation

To have a different name of the CSS variable related to the color saturation change the $var-saturation sass variable.

// Get variables.
@use 'node_modules/@angular-package/spectre.css/variables' as *;

// Change the $var-prefix
$var-prefix: 'spectre';

// Change the $var-saturation
$var-saturation: 'saturation';

// Use the spectre.
@use 'node_modules/@angular-package/spectre.css/spectre' as *;

Then, for example, the $accent-color sass variable has the CSS variable name related to saturation set as follows:

--spectre-accent-color-saturation: 60.6299212598%;

Custom - Color name lightness

To have a different name of the CSS variable related to the color lightness change the $var-lightness sass variable.

// Get variables.
@use 'node_modules/@angular-package/spectre.css/variables' as *;

// Change the $var-prefix
$var-prefix: 'spectre';

// Change the $var-lightness
$var-lightness: 'lightness';

// Use the spectre.
@use 'node_modules/@angular-package/spectre.css/spectre' as *;

Then, for example, the $accent-color sass variable has the CSS variable name related to lightness set as follows:

--spectre-accent-color-lightness: 49.8039215686%;

Custom - Color name alpha

To have a different name of the CSS variable related to the color alpha change the $var-alpha sass variable.

// Get variables.
@use 'node_modules/@angular-package/spectre.css/variables' as *;

// Change the $var-prefix
$var-prefix: 'spectre';

// Change the $var-alpha
$var-alpha: 'alpha';

// Use the spectre.
@use 'node_modules/@angular-package/spectre.css/spectre' as *;

Then, for example, the $accent-color sass variable has the CSS variable name related to alpha set as follows:

--spectre-accent-color-alpha: 1;

Custom - Color name summary

All changed CSS variables above:

// Get variables.
@use 'node_modules/@angular-package/spectre.css/variables' as *;

// Change the $var-prefix
$var-prefix: 'spectre';

// Change the $var-hue
$var-hue: 'hue';

// Change the $var-saturation
$var-saturation: 'saturation';

// Change the $var-lightness
$var-lightness: 'lightness';

// Change the $var-alpha
$var-alpha: 'alpha';

// Use the spectre.
@use 'node_modules/@angular-package/spectre.css/spectre' as *;

Give the result of the CSS variables being set for the sass $accent-color as follows:

--spectre-accent-color-hue: 280.1298701299deg;
--spectre-accent-color-saturation: 60.6299212598%;
--spectre-accent-color-lightness: 49.8039215686%;
--spectre-accent-color-alpha: 1;

Custom - Borders

Section is not ready.

Custom - Buttons

Instead of passing the Sass variable $primary-color there is a need to provide CSS variable color name 'primary-color' cause button-variant() and button-outline-variant() mixins are modified to use color() function.

There are 2 button variant mixins in src/mixins/_button.scss to generate different color variants.

~~@mixin button-variant($color: $primary-color);~~
@mixin button-variant($color: 'primary-color');
~~@mixin button-outline-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');
}

Custom - Hero

Section is not ready.

Custom - Labels

Section is not ready.

Custom - Toasts

Section is not ready.

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 template
│   │   └── starter.html
│   ├── ../
│   ├── index.html
│   └── ...
│
├── src/                            // Source Sass files
│   ├── spectre.scss
│   ├── spectre-icons.scss
│   ├── spectre-exp.scss
│   ├── _mixins.scss
│   ├── _variables.scss
│   └── ...
│
├── gulpfile.js (no gulp)
├── package.json
└── ...

SPECTRE

Custom version#

Custom version

Skeleton#

Compiling CSS#

Importing Sass#

Custom - Hex colors#

Custom - Derived colors#

Custom - Theme#

Custom - Theme property types#

Custom - Color scheme#

Custom - Theme light#

Custom - Theme dark#

Custom - Prefix#

Custom - Class prefix#

Custom - Color name#

Custom - Color name hue#

Custom - Color name saturation#

Custom - Color name lightness#

Custom - Color name alpha#

Custom - Color name summary#

Custom - Borders#

Custom - Buttons#

Custom - Hero#

Custom - Labels#

Custom - Toasts#

Folder structure#

Custom version

Skeleton

Compiling CSS

Importing Sass

Custom - Hex colors

Custom - Derived colors

Custom - Theme

Custom - Theme property types

Custom - Color scheme

Custom - Theme light

Custom - Theme dark

Custom - Prefix

Custom - Class prefix

Custom - Color name

Custom - Color name hue

Custom - Color name saturation

Custom - Color name lightness

Custom - Color name alpha

Custom - Color name summary

Custom - Borders

Custom - Buttons

Custom - Hero

Custom - Labels

Custom - Toasts

Folder structure