Methdology : BEM

BEM is an abbreviation of three entities: a Block, an Element and a Modifier. BEM is a methodology of web projects development, that allows you to divide an interface into logically independent blocks. More info here

We use the postprocessor "Myth". File includes all the variables : here. Variables are used like this: .Myclass {color: var (--nameOfvariable))

Container

Use .wc-content for a responsive fixed width container.

Typography

H1 title

font-size: 3.5em;font-weight: 700;

H2 title

font-size: 2em;font-weight: 600;

H3 title

font-size: 1.5em;

h4 title

font-size: 1.25em;

p paragraph

font-size:1em

Font

Default font : --base-font: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

Button

.Button .Button--default
.Button .Button--action
.Button .Button--default .is-disabled
.Button .Button--action .is-disabled

Color

Basic color

.MyClass {background-color : var(--wc-background-dark);

.MyClass {background-color : var(--wc-background-light);

.MyClass {background-color : var(--wc-variant-background-dark);

.MyClass {background-color : var(--wc-background-light:);

.MyClass {background-color : var(--wc-background-dark:);

State issue

.MyClass {background-color : var(--wc-state-need);

.MyClass {background-color : var(--wc-state-ready);

.MyClass {background-color : var(--wc-state-sitewait);

.MyClass {background-color : var(--wc-stat-close);

Utilities

Bold .wc-bold

Utilities Layout

.wc-float-left

.wc-float-right

Pattern-Portfolio