Relative Font Sizes (fs-)

These font size classes help adjust font sizes relative to their current size. The larger end of the scale dampens itself in smaller viewports. Naming is derived from arguments with designers who could never be satisified. There are more sizes than you really need, until you start stacking them and need the most small one as a subtext in a most large one.

fs-normal
C22H30O4
fs-most-small
C22H30O4
fs-most-large
C22H30O4
fs-mostest-small
fs-most-small
fs-smallerest
fs-smallerer
fs-smallest
fs-smaller
fs-small
fs-normal
fs-large
fs-larger
fs-largest
fs-largerer
fs-largerest
fs-most-large
fs-mostest-large

Relative Letter Spacing (ls-)

A little letter space often makes large blobs of text easier to read. Adding lots of space make it artistic or something. The larger end of the scale dampens itself in smaller viewports.

ls-literally-nothing
ls-mostest-tight
ls-most-tight
ls-tighterest
ls-tighterer
ls-tightest
ls-tighter
ls-tight
ls-normal
ls-loose
ls-looser
ls-loosest
ls-looserer
ls-looserest
ls-most-loose
ls-mostest-loose
ls-literally-space

Opacity (o-)

I like to use opacity as a way to mute things and I needed better opacity classes with values that made sense. It is accepted these days but at one point I was the biggest idiot on the internet forcing your phone to work too hard since it would kick in GPU to layer things.

10
20
25
30
40
50
60
70
75
80
90
100

Line Clamping

line-clamp line-clamp-<key>

Uses that weird line clamping stuff that somehow made it into the standard and implemented by all browsers with the -webkit prefix intact. The line clamp terminator by default always positions itself at the end of the last line. The fade effect here has to be customised a little for your use, in this case a background gradient that is covering the last third of the last line using the background colour of the box it is in.

1 line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Adipiscing tristique risus nec feugiat in fermentum posuere. Vitae congue eu consequat ac felis donec. Cursus sit amet dictum sit. Et netus et malesuada fames ac turpis egestas. Dignissim suspendisse in est ante. Egestas pretium aenean pharetra magna ac placerat. Nullam vehicula ipsum a arcu cursus vitae congue. Augue lacus viverra vitae congue. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Est lorem ipsum dolor sit.
 

2 lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Adipiscing tristique risus nec feugiat in fermentum posuere. Vitae congue eu consequat ac felis donec. Cursus sit amet dictum sit. Et netus et malesuada fames ac turpis egestas. Dignissim suspendisse in est ante. Egestas pretium aenean pharetra magna ac placerat. Nullam vehicula ipsum a arcu cursus vitae congue. Augue lacus viverra vitae congue. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Est lorem ipsum dolor sit.
 

4 lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Adipiscing tristique risus nec feugiat in fermentum posuere. Vitae congue eu consequat ac felis donec. Cursus sit amet dictum sit. Et netus et malesuada fames ac turpis egestas. Dignissim suspendisse in est ante. Egestas pretium aenean pharetra magna ac placerat. Nullam vehicula ipsum a arcu cursus vitae congue. Augue lacus viverra vitae congue. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Est lorem ipsum dolor sit.
 

Ratioboxes

ratiobox <size>

Boxes that keep their ratios while scaling to fit their parent.

twentyone-x-nine
(ultrawide)
two-x-one
(univisium)
nineteen-x-one
(imax)
sixteen-x-nine
(widescreen)
sixteen-x-ten
(widemeh)
four-x-three
(tv)
one-x-one
(square)

Positioning

position-<key>

Throw things around quickly without them exploding into weird places on the page.

Docked Absolute

top
h-center
bottom
h-center
left
v-center
right
v-center
top-left
bottom-left
top-right
bottom-right
h-center
v-center

As An Overlay

HERP
DERP

Gradient Overlays

grad-<key>

Some gradient fills we use commonly.

focus-normal
focus-dark
focus-darker
tunnel-normal
tunnel-dark
tunnel-darker
bottom-normal
bottom-dark
bottom-darker

Quick Light/Dark Inversion

on-dark-invert, on-light-invert

These will likely only be useful for things that are black and white since blue turns to yellow and whatnot.

Normal
on-light-invert
on-dark-invert