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
- 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:
Take a tour through the tutorial and
learn the basic principles in one hour:
Explore the complete SPOT CSS
framework documentation: