briefscss

not minimal: Minimalism is not the goal of briefscss, clear design hierarchy is.

not batteries-included: You're most likely going to have to write your own css. briefscss is more meant to enforce a design system than it is to be a component framework.

Concepts

Spacing

In briefscss, spacing is a multiple of 4px, generally either 16px or 24px.

All "elements" are designed with a built-in top and bottom margin. These margins differ based on the element. Certain elements will have larger margins because they deserve more space. Margins also differ based on their position: first child elements do not get margin-tops, while last child elements do not get margin-bottoms.

Elements with class .is-inline do not establish vertical margins and instead establish horizontal margins.

Colors

Accents
Red
Orange
Yellow
Green
Turquoise
Cyan
Blue
Purple
Greyscale
Black
Dark
Grey
Light
White

Radius

Small
2px
Default
4px
Large
10px
Round
9999px

Typography

Text sizes
3rem
Size 1
2.5rem
Size 2
2rem
Size 3
1.5rem
Size 4
1.25rem
Size 5
1rem
Size 6
0.75rem
Size 7
Semantic styles
3rem
bold
Title
3rem
bold
Subtitle
3rem
paragraph
0.75rem
grey
label

Layout

Columns

column
column

Elements

Button

Input