Docs

Core concept is ~atomic classes, that makes sense.
Learn more.

  • You can overwrite default building blocks by setting --box-(1-6) on :root.
  • Everything is border-box, no outlines.
  • Html y-scroll is always on, so pages won't jump.

Border

Border radius is important.

radius-0
radius-1
radius-2
radius-3
radius-max
radius-100
.radius-max is rounding border with a large pixel value. Creates tube.

Color

Basic monochrome color scheme from CSS defaults.
You can overwrite these, but don't.

bg-white
bg-smoke
bg-light
bg-silver
bg-dark
bg-gray
bg-black
white
smoke
light
silver
dark
gray
black

Display

CSS display properties.

block
clearfix*
flex
float-left
float-right
grid
inline-block
inline-flex
inline-table
inline
none
table*
table-cell
table-column
table-row
.clearfix is an after-before-content hack for clearing floats.
.table has an extra attribute, layout: fixed.

Flex

Flexbox related properties.

flex-wrap
flex-wrap-reverse
flex-reverse
flex-column
flex-around
flex-between
flex-right
flex-baseline
flex-end
flex-start
flex-gap-1
flex-gap-2
flex-gap-3
flex-gap-4
flex-gap-5
flex-gap-6
flex-center*
flex-xcenter*
flex-ycenter*
grow-1
grow-2
grow-3
grow-4
grow-5
grow-6
self-center
self-start
self-end
self-baseline
.flex-(x|y)center does what is say. x-y is axis.
.grow-x also resets flex-basis to 0. Should be used on flex children.
.self-x is align-self. Should be used on flex children.

Grid

WIP, expect non-breaking updates.

grid-gap-1
grid-gap-2
grid-gap-3
grid-gap-4
grid-gap-5
grid-gap-6
grid-gap-x-1
grid-gap-x-2
grid-gap-x-3
grid-gap-x-4
grid-gap-x-5
grid-gap-x-6
grid-gap-y-1
grid-gap-y-2
grid-gap-y-3
grid-gap-y-4
grid-gap-y-5
grid-gap-y-6
grid-cols
grid-cols-2
grid-cols-3
grid-cols-4
grid-cols-5
grid-cols-6
grid-cols-7
grid-cols-8
grid-rows
grid-rows-2
grid-rows-3
grid-rows-4
grid-rows-5
grid-rows-6
grid-rows-7
grid-rows-8
.grid-(rows|cols)-x are splitted with fr units.
.grid-(rows|cols)-x has a .dense class modifier

Height

Common height options.

h-1
h-2
h-3
h-4
h-5
h-6
h-25
h-33
h-50
h-66
h-75
h-100
minvh-25
minvh-33
minvh-50
minvh-66
minvh-75
minvh-100
.minvh-x is minimum height in viewport height percentage.

List

Common list styles for ul, ol.

list-circle
list-disc
list-square
list-none
list-lower-latin
list-lower-roman
list-upper-latin
list-upper-roman
list-comma*
.list-comma is turning its content into a comma separated inline list.

Margin

Margins based on overwriteable box sizes.

m-0
m-1
m-2
m-3
m-4
m-5
m-6
mb-0
mb-1
mb-2
mb-3
mb-4
mb-5
mb-6
ml-0
ml-1
ml-2
ml-3
ml-4
ml-5
ml-6
mr-0
mr-1
mr-2
mr-3
mr-4
mr-5
mr-6
mt-0
mt-1
mt-2
mt-3
mt-4
mt-5
mt-6
my-0
my-1
my-2
my-3
my-4
my-5
my-6
mx-0
mx-1
mx-2
mx-3
mx-4
mx-5
mx-6
mx-auto
.mx-x is margin on X axis.
.my-x is margin on Y axis.

Opacity

Opacity by decimal steps.

opacity-100
opacity-90
opacity-80
opacity-70
opacity-60
opacity-50
opacity-40
opacity-30
opacity-20
opacity-10
opacity-0

Padding

Paddings based on overwriteable box sizes.

p-0
p-1
p-2
p-3
p-4
p-5
p-6
pb-0
pb-1
pb-2
pb-3
pb-4
pb-5
pb-6
pl-0
pl-1
pl-2
pl-3
pl-4
pl-5
pl-6
pr-0
pr-1
pr-2
pr-3
pr-4
pr-5
pr-6
pt-0
pt-1
pt-2
pt-3
pt-4
pt-5
pt-6
py-0
py-1
py-2
py-3
py-4
py-5
py-6
px-0
px-1
px-2
px-3
px-4
px-5
px-6
.px-x is padding on X axis.
.py-x is padding on Y axis.

Position

Position related classes.

absolute
fixed
relative
sticky
bottom-0
left-0
right-0
top-0
z-0
z-1
z-2
z-3
z-4
z-5
z-6
z-7
z-9
z-10
.z-x is a z-index scale from 0-100, so it has some extra room.

Typo

Typescale is WIP, and most likely will change.

Sunt in culpa qui officia deserunt mollit anim id est laborum.

Sunt in culpa qui officia deserunt mollit anim id est laborum.

Sunt in culpa qui officia deserunt mollit anim id est laborum.

Sunt in culpa qui officia deserunt mollit anim id est laborum.

Sunt in culpa qui officia deserunt mollit anim id est laborum.
Sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ellipsis*
italic
normal
oblique
regular*
bold*
center
justify
left
right
line-through
overline
underline
capitalize
lowercase
uppercase
pre
pre-line
pre-wrap
nowrap
break-word
typescale are defined by em units (body, h1, h2, h3, h4, h5, p, h6, small). Body takes root variables --basefont and --baseline. Defaults are 16/1.6.
.regular takes a root variable, --regular. Default is 400.
.bold takes a root variable, --bold. Default is 700.
.ellipsis is non-atomic - makes text-overflow ellipsis possible.

Width

Common width options.

W-0
w-1
w-2
w-3
w-4
w-5
w-6
w-25
w-33
w-50
w-66
w-75
w-100
minvw-25
minvw-33
minvw-50
minvw-66
minvw-75
minvw-100
.minvw-x is minimum width in viewport width percentage.