Documentation

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

Customization

fractures is CSS only, meaning you can customize it by using CSS variables.

Overwrite the default building blocks by setting --box-(1-6).This will affect every utility where there is a box-scale. :root {	--box-1: 8px;	--box-2: 16px;	--box-3: 24px;	--box-4: 32px;	--box-5: 64px;	--box-6: 128px;}
  1. Keep in mind that you have to include the unminified fractures.css version in order to have access to :root.
  2. You also have to handle browser prefixes and possible fallbacks. CSS variables are supported by only 86.73% of current browsers.

Opinionated reset

  1. Every element is set to border-box.
  2. Html y-scroll is always on, so pages won't jump.
  3. Change my mind—open an issue.

Border radius

Border radius is important.

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

Colors

Basic monochrome color scheme from CSS defaults.

bg-white
bg-smoke
bg-light
bg-silver
bg-dark
bg-gray
bg-dim
bg-black
black
dim
gray
dark
silver
light
smoke
white
You can overwrite these, but probably shouldn't. --white: white;--whitesmoke: whitesmoke;--lightgray: lightgray;--silver: silver;--darkgray: darkgray;--gray: gray;--dimgray: dimgray;--black: black;

Cursor

Most common cursors.

cursor-grab
cursor-grabbing
cursor-help
cursor-move
cursor-pointer
cursor-progress
cursor-row-resize
cursor-text
cursor-zoom-in
cursor-zoom-out

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
  1. .clearfix: is an after-before-content hack for clearing floats.
  2. .table: has an extra attribute, layout: fixed.

Flex

Flexbox related properties.

flex-wrap
flex-wrap-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
  1. .flex-(x|y)center: does what is say. x-y is axis.
  2. .grow-x: also resets flex-basis to 0. Should be used on flex children.
  3. .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
  1. .grid-(rows|cols)-x: are splitted with fr units.
  2. .grid-(rows|cols)-x: has a .dense class modifier

Height

Common height options.

h-0
h-1
h-2
h-3
h-4
h-5
h-6
h-10
h-20
h-25
h-30
h-33
h-40
h-50
h-60
h-66
h-70
h-75
h-80
h-90
h-100
maxh-10
maxh-20
maxh-25
maxh-30
maxh-33
maxh-40
maxh-50
maxh-60
maxh-66
maxh-70
maxh-75
maxh-80
maxh-90
maxh-100
maxh-viewport
minh-10
minh-20
minh-25
minh-30
minh-33
minh-40
minh-50
minh-60
minh-66
minh-70
minh-75
minh-80
minh-90
minh-100
minh-viewport
  1. .minh-x: is minimum height as percentage.
  2. .maxh-x: is maximum height as percentage.
  3. .maxh-viewport: is maximum height set to current viewport height.
  4. .minh-viewport: is mininum height set to current viewport height.

List

Common list styles for ul, ol.

list-circle
list-decimal-leading-zero
list-decimal
list-disc
list-greek
list-lower-latin
list-lower-roman
list-none
list-square
list-upper-latin
list-upper-roman
list-comma*
  1. .list-comma: is turning its content into a comma separated inline list.

Margin

Common margin options.

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
mr-0
mr-1
mr-2
mr-3
mr-4
mr-5
mr-6
ml-0
ml-1
ml-2
ml-3
ml-4
ml-5
ml-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
  1. .mx-x: is margin on X axis.
  2. .mx-y: 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

Overflow

Content overflows.

opacity-visible
opacity-hidden
opacity-scroll

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
pr-0
pr-1
pr-2
pr-3
pr-4
pr-5
pr-6
pl-0
pl-1
pl-2
pl-3
pl-4
pl-5
pl-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
  1. .py-x: is padding on X axis.
  2. .py-y: is padding on Y axis.

Position

Position related classes.

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

Typography

Helper classes for typography.

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
Overwriteable font-weight options on :root..regular class uses --normal, as it is more descriptive and could conflict with font-style. --normal: normal;--bold: bold;
  1. .ellipsis: is non-atomic - makes text-overflow ellipsis possible.
  2. .unselectable: makes the element unselectable with user-select: none.
  3. .no-events: makes the element <em>uneventable</em> with pointer-events: none.

Width

Common width options.

w-0
w-1
w-2
w-3
w-4
w-5
w-6
w-10
w-20
w-25
w-30
w-33
w-40
w-50
w-60
w-66
w-70
w-75
w-80
w-90
w-100
maxw-10
maxw-20
maxw-25
maxw-30
maxw-33
maxw-40
maxw-50
maxw-60
maxw-66
maxw-70
maxw-75
maxw-80
maxw-90
maxw-100
maxw-viewport
minw-10
minw-20
minw-25
minw-30
minw-33
minw-40
minw-50
minw-60
minw-66
minw-70
minw-75
minw-80
minw-90
minw-100
minw-viewport