Home | SPOT CSS

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

SASS
SCSS
SASS
SCSS
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                

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

+mode('strict')+component('my-button')  +register    +state(':hover')    +variant('.primary')    +context('my-modal')    +element('.icon')    +element('.text')  +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                

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

my-button {  display: inline-block;  line-height: 1.5;  padding: 0.5em 1.5em;  background: #AA5500;}my-button:hover {  background: #BB6600;}my-buton.primary {  background: #55AA00;}my-buton.primary:hover {  background: #66BB00;}my-modal my-button {  display: block;}my-button .icon {  display: inline-block;  width: 1.5em;  height: 1.5em;  opacity: 0.75;}my-button:hover .icon {  opacity: 1;}my-button .text {  font-size: 1.2em;}my-modal my-button .text {  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:

Terminal

$ npm i --save-dev spotcss

Usage

Import spotcss framework in your style:

SASS
SCSS

@import "~spotcss"

@import "~spotcss";

Let's try it!

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

Quick guide (15 min)

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

Tutorial (1 hour)

Explore the complete SPOT CSS
framework documentation:

Documentation