Cardinal
hsla(349, 73%, 44%, 1)
Colors
Sunray
hsla(37, 31%, 34%, 1)
Violet Web
hsla(176, 56%, 55%, 1)
Indigo
hsla(266, 100%, 26%, 1)
Independence
hsla(242, 16%, 35%, 1)
Fonts
Raleway light + Open Sans
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Merriweather + Muli light
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Work Sans light + Open Sans
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Layout Snippets
Even Columns
.even-columns { display: flex; }
.even-columns > * { flex-basis: 100%; }
Super Centered
.parent { display: grid; place-items: center; }
The Deconstructed Pancake
.parent { display: flex; flex-wrap: wrap; justify-content:
center; }
.box { flex: 1 1 150px /* stretching */; flex: 0 1 150px /* no
stretching */; margin: 5px; }
Sidebar Says
.parent { display: grid; grid-template-columns: minmax(150px,
25%) 1fr; }
Pancake Stack
.parent { display: grid; grid-template-rows: auto 1fr auto }
RAM (Repeat, Auto, Minmax)
display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit,
minmax(150px, 1fr));