Spectreswatch https://spectreswatch.acmion.com
Themes for Spectre.css, inspired by Bulmaswatch and Bootswatch. See previews at https://spectreswatch.acmion.com.
Note: Only one customized theme has been created at this time.
The repository for Spectre.css contains lots of useful information on building and customizing your copy of Spectre. Use that as a reference.
- Introduced the class
content
, which acts like the container in, for example, Bulma. - Changed colors.
- Changed size variables.
- Changed HTML font size from 20px to 10px, to make rem calculations more natural.
- Doubled all rem units (due to the halving of HTML font size), except the units of the
<select>
elementbackground
property. - Created CSS variable declarations of some SCSS variables.
- Clone Spectreswatch.
- Choose a theme.
- Copy the files:
theme-name/src/_variables.scss
theme-name/src/_x-overrides.scss
theme-name/src/_x-overrides-exp.scss
- Clone Spectre (or get the source in some other way).
- In your Spectre do the following:
- Paste the copied files in the
src/
directory. - In
src/spectre.scss
, on the last row, import the changes with:@import "x-overrides";
- In
src/spectre-exp.scss
, on the last row, import the changes with:@import "x-overrides-exp";
- Replace all instances of
rem
withrem * 2
in all.scss
files.
- Paste the copied files in the
- Compile Spectre according to the instructions in the main Spectre repository.
- Done.
You might also want to change some CSS that affects the Spectre docs pages (not necessary):
- Copy
Spectreswatch/theme-name/docs/src/_x-docs.scss
and paste it in yourpath-to-your-spectre/docs/src/_x-docs.scss
. - In
path-to-your-spectre/docs/src/docs.scss
, on the last row, import the changes with:@import "x-docs";
. - Done.
- picturepan2 for Spectre
- thomaspark for Bootswatch
- jenil for Bulmaswatch
MIT