🎉 spectacular documentation

spectacular is a silent Sass library that when strapped accordingly can be used with pure CSS. The Sass implementation empowers your workflow with helpful silent classes, mixins, and variables. The CSS implementation consists of several strap files that accumulatively add 3.8kB to your CSS footprint.

Both implementations support CSS property based module styling that allow you to author semantic HTML, set some CSS Properties, and enjoy your new spectacularly styled content.

.my.spectacular.module {
  --module-background: rebeccapurple;
  --module-color: white;
}

Getting Started

spectacular can be installed with Bower.

bower install spectacular --save
ls bower_components/spectacular/app/assets/stylesheets/spec

We recommend adding an exportsOverride to your bower.json.

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

You'll find spectacular’s Sass files in app/assets/stylesheets/ and will want to load or copy them from there.

Straps

Sass usage

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";

Then get started with components, components, mixins, and variables.

CSS usage

Include the spectacular CSS in your page and start using spec tacular’s Strap classes.