Settings

Variables to define colors, spacing, typographic scale, grid, etc.

Reset

Basic styles for Html tag, responsive images, constant margins on elements.

Typography

The typographic scale is generated with postcss-typescale.

.h0: Sample text

h1, .h1: Sample text

h2, .h2: Sample text

h3, .h3: Sample text

h4, .h4: Sample text

h5, .h5: Sample text

h6, .h6: Sample text

Paragraph: lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo.

Blockquote: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor.

Helper classes

One link

Bold text

Italic text

Center

Text-right

uppercase

capitalize

Pointer (mouse over)

Line-through

Underline

Truncate: Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna.

Lists

Standard list

Item one
Item two
Item three
Item four
Item five

Ordered list

Item one
Item two
Item three
Item four
Item five

List sans

Item one
Item two
Item three
Item four
Item five

List inline

Item one
Item two
Item three
Item four
Item five

Prefixed list

Item one
Item two
Item three
Item four
Item five

Postfixed list

Item one
Item two
Item three
Item four
Item five

Tables

Firstname	Name	Value
Jill	Smith	50
Eve	Jackson	94
John	Doe	80
Jill	Smith	50
Eve	Jackson	94
John	Doe	80

Buttons

Buttons styles are generated with postcss-button.

Combine with utility classes for padding and border radius to customize.

Example of buttons

Button Rounded corner buttons Pills buttons Alternate buttons Button m Button border Large button Small button small text pill shape border Small button small text rnd

Forms

Gender

Name

Email

Success

Error

Recipient

Message

Grid-system

The grid system of system.css relies on postcss-grid-system.

Current breakpoint

1 2 3 4 5 6 7 8

Blocs

bloc 1

bloc 2

bloc 3

bloc 4

bloc 5

bloc 6

bloc 7

Fractions

1/2

3/2

1/3

2/3

1/4

3/4

5/4

Grid-fluid

Fluid grids styles are generated with postcss-grid-fluid.

1/8

blob 1/4

blob 1/6

blob 1/3

blob 1/2

blob 1/3

blob 2/3

blob 1/4

blob 3/4

blob 2/5

blob 3/5

blob 1/6

blob 4/6

blob 1/7

blob 2/7

blob 4/7

1/8

blob 2/8

blob 3/8

blob 2/9

blob 4/9

Utils

A utility class for positionning: clearfix, hide, absolute, full size, etc.

Margins

A margin utility. Syntax: m[direction]-[size].

m (for margin)
Direction (optional): t (top), r (right), b (bottom), l (left), x (left and right), y (top and bottom)
Size (optional). Values for each size is defined in the settings: 0 (no margin), xxs, xs, s, m, (default), l, xl, xxl, auto.

Examples

Example

Paddings

A padding utility. Syntax: p[direction]-[size].

p (for padding)
Direction (optional): t (top), r (right), b (bottom), l (left), x (left and right), y (top and bottom)
Size (optional). Values for each size is defined in the settings: 0 (no padding), xxs, xs, s, m, (default), l, xl, xxl.

Examples

Example

Colors

color-brand

color-alt

color-inverse

color-neutral

bg-brand

bg-alt

bg-inverse

bg-neutral

Ui

Tooltip is better on mouseover. Tooltip text

Border radius Pill

This is an info alert

This is a success alert

This is an warning alert

This is an error alert

Tools

Classes for development and debuging:

grid: add to any element to display the baseline grid.
debug: add to any element to display block's outline.