Skip to main content

SPOT CSS

{Single Place Of Truth Methodology}

The ultimate SASS framework and CSS methodology for sustainable styling.

Aspiring Industry Standard for Writing Styles

A clear and semantic way to write CSS

Imagine the most readable and simplest SASS code possible.
Imagine that everyone writes the same code, because the framework will not allow otherwise.
Imagine finding everything in a straight line, even blindfolded.
Imagine maintaining control even when a project or team scales.

You can just stop imagining it ;)

---Johnny Seyd, author of SPOT CSS

+mode('draft')+component('my-button')  +default    display: inline-block    line-height: 1.5    padding: 0.5em 1.5em    background: $color-btn-bg  +state(':hover')    background: $color-btn-bg-hover  +variant('.primary')    +default      background: $color-btn-bg-prim          +state(':hover')      background: $color-btn-bg-hover-prim  +context('my-modal')    display: block  +__________________________  +element('.icon')    +default      display: inline-block      width: 1.5em      height: 1.5em      opacity: 0.75         +state(':hover')      opacity: 1  +__________________________  +element('.text')    +default      font-size: 1.2em    +context('my-modal')      font-weight: bold                

Clear to read

Even those who are not familiar with our methodology and framework understand the written code, because it has an intuitive syntax.

Easy to write

Because every line has a clear meaning and context, you can learn syntax very quickly and parser will help you not to break the rules.

Natural to think that way

You are already thinking in term of components, elements, state, variants an contexts. Just write and read it just like that.

Just SASS

Pure SASS framework with no other dependencies, javascript, or pre/post processor.

Installation

Install spotcss via npm in your project:

$ npm i --save-dev spotcss

Usage

Import spotcss framework in your style:

@import "~spotcss"

Let's try it!

Fly through the quick start guide and
see what it is about in a few minutes:

Take a tour through the tutorial and
learn the basic principles in one hour:

Explore the complete SPOT CSS
framework documentation: