📦
getting started

spectacular can be installed with Bower.

Read the Docs

bower install spectacular --save
More info

You'll then find spectacular in your bower_components folder.

    ls bower_components/spec/app/assets/stylesheets

We recommend adding an exportsOverride to your bower.json.

"exportsOverride": {
  "spectacular": {
    "": "app/assets/stylesheets/"
  },
}

That way if you are using something like grunt-bower you'll find just the spectacular Sass source files in your ./lib directory.

😶
silent

spectacular bites its tongue and refrains from adding unneccesary bloat to your CSS footprint.

For example, the below code efficiently adds only the module code to your CSS footprint.

@import "spec/tacular";

.my-module {
  @extend %module;
  --background: lighten(rebeccapurple, 72%);
  --color: rebeccapurple;
  --padding: 1em 2em;
}

With Sass usage, spectacular is silent, and does not implicitly add an weight to your CSS footprint.

With CSS usage and all included straps, a spectacular 3.861kB of weight will be added to your CSS output.

👢
bootstraps

a spectacular 3.861kB

spectacular, shy as it is, remains initially silent but it will speak up when you ask it to. Import one or more bootstraps to begin designing without having to write any styling code.

@import "spec/tacular";

@import "spec/bootstraps/aria";
@import "spec/bootstraps/base";
@import "spec/bootstraps/contrast";
@import "spec/bootstraps/effects";
@import "spec/bootstraps/heading";
@import "spec/bootstraps/layout";
@import "spec/bootstraps/module";
@import "spec/bootstraps/typography";
@import "spec/bootstraps/visibility";

💅
themable

spectacular allows you to theme pages with CSS Properties, making your styles fully themable. 

@import "spec/tacular";

/* bootstrap your layouts */
@import "spec/bootstraps/layout";

body {
  --layout-thin-max-width: 42ch;
}

/* is analagous to: */

.layout {
  &.thin {
    --max-width: 42ch;
  }
}

♿️
accessible

Accessibility is water.
We are all in need and deserving of it.

With helpers for things like reduce-motion and ms-high-contrast media queries, spectacular makes it easy for you to bake accessibility into your styles. 

@import "spec/tacular";

* {
  @include reduced-motion() {
    transition-duration: 0 !important;
  }
}

.my-component {
  @extend %module;
  @include high-contrast(white-on-black) {
    --black: rgb(8, 8, 8); /* almost solid black */
    --white: rgb(253, 253, 253); /* almost pure white */

    --background: var(--black, black);
    --color: var(--white, white);
  }
}

🐣
lightweight

spectacular groups selectors together to keep your CSS files compact.

@import "spec/tacular";

@include each-heading(h1, h2, h3) {
  @extend %capitalized;
}

.capitalized {
  @extend %capitalized;
}

/* will output:
h1, h2, h3, .capitalized {
  text-transform: uppercase;
}
*/