Specification

The primary documentation for Brevis is this specification file, that can be read online here. It's also included in the package downloads. This page lists all the classes and their modifiers used in Brevis. There are also information about the naming convention, scale pattern and colour palette.

Class Reference Naming Convention Scale Pattern Colour Palette

Class Reference

Box-sizing box-sizing
Position display, position, top, right, bottom, left
Float float, clear
Justify-content justify-content, justify-items, justify-self
Align-content align-content, align-items, align-self
Flex flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap
Transitions transition-property, transition-duration, transition-timing-function, transition-delay
Order order
Visibility visibility, opacity, z-index
Margin margin, margin-top, margin-right, margin-bottom, margin-left, margin-y, margin-x
Outline outline
Border border-width, border-style, border-radius, border-color
Box-shadow box-shadow
Background background-color, background-color:hover, background-position, background-repeat, background-size
Cursor cursor
Padding padding, padding-top, padding-right, padding-bottom, padding-left
Width width, min-width, max-width
Height height, min-height, max-height
Overflow overflow, resize
List-style list-style
Table table-layout, border-collapse, border-spacing
Vertical-algin vertical-align
Text-alignment & Decoration direction, text-align, text-indent, text-transform, text-decoration
Text-spacing & Color line height, word-spacing, letter-spacing, white-space, word-wrap, color, color:hover
Font font-family, font-size, font-weight, font-style
Pointer-events pointer-events
Miscellaneous hide content (a11y)

BOX-SIZING

BOX-SIZING

SYNTAX
# Base
	bxs = box-sizing

# Modifiers
	--brbx = border-box
	--ctbx = content-box

# Note
	You don't need to box-sizing everything - https://aastudio.fr/box-sizing.html

	When you DON’T need it:
		- for element without width or height or min/max-width or min/max-height
		- for inline elements
	
	When you MAY need it:
		- when the element is a column’s grid
		- when you have width and padding or borders
		- when a form field needs a full-width
CLASSES
.bxs--brbx { box-sizing: border-box }
.bxs--ctbx { box-sizing: content-box }

top↑


POSITION

DISPLAY

SYNTAX
# Base
	d = display

# Modifiers
	--blk = block
	--fx = flex
	--ie = inline
	--ieblk = inline-block
	--iefx = inline-flex
	--ietbl = inline-table
	--n = none
	--tbl = table
	--tblcl = table-cell
	--tblrw = table-row
	--tblrwgrp = table-row-group
	--tblcol = table-column
	--tblcolgrp = table-column-group
CLASSES
.d--blk { display: block }
.d--fx { display: flex }
.d--ie { display: inline }
.d--ieblk { display: inline-block }
.d--ietbl { display: inline-table }
.d--iefx { display: inline-flex }
.d--n { display: none }
.d--tbl { display: table }
.d--tblcl { display: table-cell }
.d--tblrw { display: table-row }
.d--tblrwgrp { display: table-row-group }
.d--tblcol { display: table-column }
.d--tblcolgrp { display: table-column-group }

top↑

POSITION

SYNTAX
# Base
	pos = position

# Modifiers
	--sta = static
	--rel = relative 
	--abs = absolute 
	--fix = fixed
CLASSES
.pos--sta { position: static }
.pos--rel { position: relative }
.pos--abs { position: absolute }
.pos--fix { position: fixed }

top↑

TOP

SYNTAX
# Base
	t = top

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
	--50p = 50%
	--100p = 100%
	--n1 = -8px
	--n2 = -16px
	--n3 = -24px
	--n4 = -32px
	--n5 = -40px
	--n6 = -48px
	--n7 = -56px
	--n8 = -64px
CLASSES
.t--0 { top: 0 }
.t--1 { top: 8px }
.t--2 { top: 16px }
.t--3 { top: 24px }
.t--4 { top: 32px }
.t--5 { top: 40px }
.t--6 { top: 48px }
.t--7 { top: 56px }
.t--8 { top: 64px }
.t--50p { top: 50% }
.t--100p { top: 100% }
.t--n1 { top: -8px }
.t--n2 { top: -16px }
.t--n3 { top: -24px }
.t--n4 { top: -32px }
.t--n5 { top: -40px }
.t--n6 { top: -48px }
.t--n7 { top: -56px }
.t--n8 { top: -64px }

top↑

SYNTAX
# Base
	r = right

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
	--50p = 50%
	--100p = 100%
	--n1 = -8px
	--n2 = -16px
	--n3 = -24px
	--n4 = -32px
	--n5 = -40px
	--n6 = -48px
	--n7 = -56px
	--n8 = -64px
CLASSES
.r--0 { right: 0 }
.r--1 { right: 8px }
.r--2 { right: 16px }
.r--3 { right: 24px }
.r--4 { right: 32px }
.r--5 { right: 40px }
.r--6 { right: 48px }
.r--7 { right: 56px }
.r--8 { right: 64px }
.r--50p { right: 50% }
.r--100p { right: 100% }
.r--n1 { right: -8px }
.r--n2 { right: -16px }
.r--n3 { right: -24px }
.r--n4 { right: -32px }
.r--n5 { right: -40px }
.r--n6 { right: -48px }
.r--n7 { right: -56px }
.r--n8 { right: -64px }

top↑

BOTTOM

SYNTAX
# Base
	b = bottom

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
	--50p = 50%
	--100p = 100%
	--n1 = -8px
	--n2 = -16px
	--n3 = -24px
	--n4 = -32px
	--n5 = -40px
	--n6 = -48px
	--n7 = -56px
	--n8 = -64px
CLASSES
.b--0 { bottom: 0 }
.b--1 { bottom: 8px }
.b--2 { bottom: 16px }
.b--3 { bottom: 24px }
.b--4 { bottom: 32px }
.b--5 { bottom: 40px }
.b--6 { bottom: 48px }
.b--7 { bottom: 56px }
.b--8 { bottom: 64px }
.b--50p { bottom: 50% }
.b--100p { bottom: 100% }
.b--n1 { bottom: -8px }
.b--n2 { bottom: -16px }
.b--n3 { bottom: -24px }
.b--n4 { bottom: -32px }
.b--n5 { bottom: -40px }
.b--n6 { bottom: -48px }
.b--n7 { bottom: -56px }
.b--n8 { bottom: -64px }

top↑

LEFT

SYNTAX
# Base
	l = left

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
	--50p = 50%
	--100p = 100%
	--n1 = -8px
	--n2 = -16px
	--n3 = -24px
	--n4 = -32px
	--n5 = -40px
	--n6 = -48px
	--n7 = -56px
	--n8 = -64px
CLASSES
.l--0 { left: 0 }
.l--1 { left: 8px }
.l--2 { left: 16px }
.l--3 { left: 24px }
.l--4 { left: 32px }
.l--5 { left: 40px }
.l--6 { left: 48px }
.l--7 { left: 56px }
.l--8 { left: 64px }
.l--50p { left: 50% }
.l--100p { left: 100% }
.l--n1 { left: -8px }
.l--n2 { left: -16px }
.l--n3 { left: -24px }
.l--n4 { left: -32px }
.l--n5 { left: -40px }
.l--n6 { left: -48px }
.l--n7 { left: -56px }
.l--n8 { left: -64px }

top↑


FLOAT

FLOAT

SYNTAX
# Base
	f = float

# Modifiers
	--r = right
	--l = left
	--n = none
CLASSES
.f--r { float: right }
.f--l { float: left }
.f--n { float: none }

top↑

CLEAR

SYNTAX
# Base
	clr = clear

# Modifiers
	--r = right
	--l = left
	--bh = both
	--n = none
CLASSES
.clr--r { clear: right }
.clr--l { clear: left }
.clr--bh { clear: both }
.clr--n { clear: none }

top↑


JUSTIFY-CONTENT

JUSTIFY-CONTENT

SYNTAX
# Base
	jct = justify-content

# Modifiers
	--ctr = center
	--fxe = flex-end
	--fxst = flex-start
	--spard = space-around
	--spbtw = space-between
CLASSES
.jct--ctr { justify-content: center }
.jct--fxe { justify-content: flex-end }
.jct--fxst { justify-content: flex-start }
.jct--spard { justify-content: space-around }
.jct--spbtw { justify-content: space-between }

top↑

JUSTIFY-ITEMS

SYNTAX
# Base
	jis = justify-items

# Modifiers
	--ctr = center
	--fxe = flex-end
	--fxst = flex-start
	--sfst = self-start
	--sfe = self-end
	--str = stretch
CLASSES
.jis--ctr { justify-items: center }
.jis--fxe { justify-items: flex-end }
.jis--fxst { justify-items: flex-start }
.jis--sfst { justify-items: self-start }
.jis--sfe { justify-items: self-end }
.jis--str { justify-items: stretch }

top↑

JUSTIFY-SELF

SYNTAX
# Base
	jsf = justify-self

# Modifiers
	--ctr = center
	--fxe = flex-end
	--fxst = flex-start
	--sfst = self-start
	--sfe = self-end
CLASSES
.jsf--ctr { justify-self: center }
.jsf--fxe { justify-self: flex-end }
.jsf--fxst { justify-self: flex-start }
.jsf--sfst { justify-self: self-start }
.jsf--sfe { justify-self: self-end }

top↑


ALIGN-CONTENT

ALIGN-CONTENT

SYNTAX
# Base
	anct = align-content

# Modifiers
	--ctr = center
	--fxe = flex-end
	--fxst = flex-start
	--spard = space-around
	--spbtw = space-between
CLASSES
.anct--ctr { align-content: center }
.anct--fxe { align-content: flex-end }
.anct--fxst { align-content: flex-start }
.anct--spard { align-content: space-around }
.anct--spbtw { align-content: space-between }

top↑

ALIGN-ITEMS

SYNTAX
# Base
	anis = align-items

# Modifiers
	--bln = baseline
	--ctr = center
	--fxe = flex-end
	--fxst = flex-start
	--str = stretch
CLASSES
.anis--bln { align-items: baseline }
.anis--ctr { align-items: center }
.anis--fxe { align-items: flex-end }
.anis--fxst { align-items: flex-start }
.anis--str { align-items: stretch }

top↑

ALIGN-SELF

SYNTAX
# Base
	ansf = align-self

# Modifiers
	--a = auto
	--ctr = center
	--fxe = flex-end
	--fxst = flex-start
	--str = stretch
CLASSES
.ansf--a { align-self: auto }
.ansf--ctr { align-self: center }
.ansf--fxe { align-self: flex-end }
.ansf--fxst { align-self: flex-start }
.ansf--str { align-self: stretch }

top↑


FLEX

FLEX

SYNTAX
# Base
	fx = flex

# Modifiers
	--1 = 1 | this is equivalent to setting "flex: 1 1 0%"
	--a = auto | this is equivalent to setting "flex: 1 1 auto"
	--ini = initial | this is equivalent to setting "flex: 0 1 auto"
	--n = none | this is equivalent to setting "flex: 0 0 auto"

# Note
	See why 0% at https://github.com/philipwalton/flexbugs#flexbug-4
CLASSES
.fx--1 { flex: 1 1 0% }
.fx--a { flex: 1 1 auto }
.fx--ini { flex: 0 1 auto }
.fx--n { flex: 0 0 auto }

top↑

FLEX BASIS

SYNTAX
# Base
	fxbs = flex-basis

# Modifiers
	--0 = 0%
	--1 = 1px
	--2 = 8px
	--3 = 16px
	--4 = 32px
	--5 = 64px
	--6 = 128px
	--7 = 256px
	--8 = 512px
	--10p = 10%
	--20p = 20%
	--25p = 25%
	--30p = 30%
	--33p = 33.33333%
	--40p = 40%
	--50p = 50%
	--60p = 60%
	--66p = 66.66667%
	--70p = 70%
	--75p = 75%
	--80p = 80%
	--90p = 90%
	--100p = 100%
	--a = auto

# Note
	See why "0%" at https://github.com/philipwalton/flexbugs#flexbug-4
CLASSES
.fxbs--0 { flex-basis: 0% }
.fxbs--1 { flex-basis: 1px }
.fxbs--2 { flex-basis: 8px }
.fxbs--3 { flex-basis: 16px }
.fxbs--4 { flex-basis: 32px }
.fxbs--5 { flex-basis: 64px }
.fxbs--6 { flex-basis: 128px }
.fxbs--7 { flex-basis: 256px }
.fxbs--8 { flex-basis: 512px }
.fxbs--10p { flex-basis: 10% }
.fxbs--20p { flex-basis: 20% }
.fxbs--25p { flex-basis: 25% }
.fxbs--30p { flex-basis: 30% }
.fxbs--33p { flex-basis: 33.33333% }
.fxbs--40p { flex-basis: 40% }
.fxbs--50p { flex-basis: 50% }
.fxbs--60p { flex-basis: 60% }
.fxbs--66p { flex-basis: 66.66667% }
.fxbs--70p { flex-basis: 70% }
.fxbs--75p { flex-basis: 75% }
.fxbs--80p { flex-basis: 80% }
.fxbs--90p { flex-basis: 90% }
.fxbs--100p { flex-basis: 100% }
.fxbs--a { flex-basis: auto }

top↑

FLEX-DIRECTION

SYNTAX
# Base
	fxdn = flex-direction

# Modifiers
	--rw = row
	--rwrvs = row-reverse
	--col = column
	--colrvs = column-reverse
CLASSES
.fxdn--rw { flex-direction: row }
.fxdn--rwrvs { flex-direction: row-reverse }
.fxdn--col { flex-direction: column }
.fxdn--colrvs { flex-direction: column-reverse }

top↑

FLEX-FLOW

SYNTAX
# Base
	fxfw = flex-flow (shorthand for flex-direction and flex-wrap properties)

# Modifiers
	--rwwp = row wrap
	--rwrvsn = row-reverse nowrap
	--colwprvs = column wrap-reverse
	--colwp = column wrap
CLASSES
.fxfw--rwwp { flex-flow: row wrap }
.fxfw--rwrvsn { flex-flow: row-reverse nowrap }
.fxfw--colwprvs { flex-flow: column wrap-reverse }
.fxfw--colwp { flex-flow: column wrap }

top↑

FLEX-GROW

SYNTAX
# Base
	fxgw = flex-grow

# Modifiers
	--0 = no grow
	--1 = grow
CLASSES
.fxgw--0 { flex-grow: 0 }
.fxgw--1 { flex-grow: 1 }

top↑

FLEX-SHRINK

SYNTAX
# Base
	fxsk = flex-shrink

# Modifiers
	--0 = no shrink
	--1 = shrink
CLASSES
.fxsk--0 { flex-shrink: 0 }
.fxsk--1 { flex-shrink: 1 }

top↑

FLEX-WRAP

SYNTAX
# Base
	fxwp = flex-wrap

# Modifiers
	--n = nowrap
	--wp = wrap
	--wprvs = wrap-reverse
CLASSES
.fxwp--n { flex-wrap: nowrap }
.fxwp--wp { flex-wrap: wrap }
.fxwp--wprvs { flex-wrap: wrap-reverse }

top↑


TRANSITIONS

TRANSITION-PROPERTY

SYNTAX
# Base
	tnprop = transition-property

# Modifiers
	--o = opacity
	--mr = margin-right
	--ml = margin-left
	--bgc = background-color
	--w = width
	--h = height
	--c = color

# Note
	Just some common CSS animated properties here.
CLASSES
.tnprop--o { transition-property: opacity }
.tnprop--mr { transition-property: margin-right }
.tnprop--ml { transition-property: margin-left }
.tnprop--bgc { transition-property: background-color }
.tnprop--w { transition-property: width }
.tnprop--h { transition-property: height }
.tnprop--c { transition-property: color }

top↑

TRANSITION-DURATION

SYNTAX
# Base
	tndu = transition-duration

# Modifiers
	--0 = time value of 0s
	--1 = time value of 100ms 
	--2 = time value of 200ms 
	--3 = time value of 400ms 
	--4 = time value of 800ms 
	--5 = time value of 1200ms
	--6 = time value of 1600ms
	--7 = time value of 2000ms
	--8	= time value of 2400ms
CLASSES
.tndu--0 { transition-duration: 0s }
.tndu--1 { transition-duration: 100ms }
.tndu--2 { transition-duration: 200ms }
.tndu--3 { transition-duration: 400ms }
.tndu--4 { transition-duration: 800ms }
.tndu--5 { transition-duration: 1200ms }
.tndu--6 { transition-duration: 1600ms }
.tndu--7 { transition-duration: 2000ms }
.tndu--8 { transition-duration: 2400ms }

top↑

TRANSITION-TIMING-FUNCTION

SYNTAX
# Base
	tntgfn = transition-timing-function

# Modifiers
	--e = ease
	--ein = ease-in
	--eot = ease-out
	--einot = ease-in-out
	--lnr = linear
CLASSES
.tntgfn--e { transition-timing-function: ease }
.tntgfn--ein { transition-timing-function: ease-in }
.tntgfn--eot { transition-timing-function: ease-out }
.tntgfn--einot { transition-timing-function: ease-in-out }
.tntgfn--lnr { transition-timing-function: linear }

top↑

TRANSITION-DELAY

SYNTAX
# Base
	tndy = transition-delay

# Modifiers
	--0 = time value of 0s
	--1 = time value of 100ms 
	--2 = time value of 200ms 
	--3 = time value of 400ms 
	--4 = time value of 800ms 
	--5 = time value of 1200ms
	--6 = time value of 1600ms
	--7 = time value of 2000ms
	--8	= time value of 2400ms
CLASSES
.tndy--0 { transition-delay: 0s }
.tndy--1 { transition-delay: 100ms }
.tndy--2 { transition-delay: 200ms }
.tndy--3 { transition-delay: 400ms }
.tndy--4 { transition-delay: 800ms }
.tndy--5 { transition-delay: 1200ms }
.tndy--6 { transition-delay: 1600ms }
.tndy--7 { transition-delay: 2000ms }
.tndy--8 { transition-delay: 2400ms }

top↑


ORDER

ORDER

SYNTAX
# Base
	or = order

# Modifiers
	--0 = ordinal value of 0
	--1 = ordinal value of 1
	--2 = ordinal value of 2
	--3 = ordinal value of 3
	--4 = ordinal value of 4
	--5 = ordinal value of 5
	--6 = ordinal value of 6
	--7 = ordinal value of 7
	--8	= ordinal value of 8

# Note
	https://developer.mozilla.org/en-US/docs/Web/CSS/order#Accessibility_concerns
CLASSES
.or--0 { order: 0 }
.or--1 { order: 1 }
.or--2 { order: 2 }
.or--3 { order: 3 }
.or--4 { order: 4 }
.or--5 { order: 5 }
.or--6 { order: 6 }
.or--7 { order: 7 }
.or--8 { order: 8 }

top↑


VISIBILITY

VISIBILITY

SYNTAX
# Base
	v = visibility

# Modifiers

	--hid = hidden
	--v = visible
	--i = inherit
CLASSES
.v--hid { visibility: hidden }
.v--v { visibility: visible }
.v--i { visibility: inherit }

top↑

OPACITY

SYNTAX
# Base
	o = opacity

# Modifiers

	--0 = cardinal value of 0
	--1 = cardinal value of .1
	--2 = cardinal value of .2
	--3 = cardinal value of .3
	--4 = cardinal value of .5
	--5 = cardinal value of .7
	--6 = cardinal value of .8
	--7 = cardinal value of .9
	--8	= cardinal value of 1
CLASSES
.o--0 { opacity: 0 }
.o--1 { opacity: .1 }
.o--2 { opacity: .2 }
.o--3 { opacity: .3 }
.o--4 { opacity: .5 }
.o--5 { opacity: .7 }
.o--6 { opacity: .8 }
.o--7 { opacity: .9 }
.o--8 { opacity: 1 }

top↑

Z-INDEX

SYNTAX
# Base
	z = z-index

# Modifiers
	--1 = ordinal value of 1
	--2 = ordinal value of 2
	--3 = ordinal value of 3
	--4 = ordinal value of 4
	--5 = ordinal value of 5
	--6 = ordinal value of 6
	--7 = ordinal value of 7
	--8 = ordinal value of 8
	--a = auto

# Note
	Any element with 'z-index: auto' can be treated as 'z-index: 0'.

top↑

CLASSES
.z--1 { z-index: 1 }
.z--2 { z-index: 2 }
.z--3 { z-index: 3 }
.z--4 { z-index: 4 }
.z--5 { z-index: 5 }
.z--6 { z-index: 6 }
.z--7 { z-index: 7 }
.z--8 { z-index: 8 }
.z--a { z-index: auto }

top↑


MARGIN

MARGIN

SYNTAX
# Base
	m = margin (shorthand for all the margin-* properties)

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
	--n1 = -8px
	--n2 = -16px
	--n3 = -24px
	--n4 = -32px
	--n5 = -40px
	--n6 = -48px
	--n7 = -56px
	--n8 = -64px
	--a = auto
CLASSES
.m--0 { margin: 0 }
.m--1 { margin: 8px }
.m--2 { margin: 16px }
.m--3 { margin: 24px }
.m--4 { margin: 32px }
.m--5 { margin: 40px }
.m--6 { margin: 48px }
.m--7 { margin: 56px }
.m--8 { margin: 64px }
.m--n1 { margin: -8px }
.m--n2 { margin: -16px }
.m--n3 { margin: -24px }
.m--n4 { margin: -32px }
.m--n5 { margin: -40px }
.m--n6 { margin: -48px }
.m--n7 { margin: -56px }
.m--n8 { margin: -64px }
.m--a { margin: auto }

top↑

MARGIN-TOP

SYNTAX
# Base
	mt = margin-top

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
	--n1 = -8px
	--n2 = -16px
	--n3 = -24px
	--n4 = -32px
	--n5 = -40px
	--n6 = -48px
	--n7 = -56px
	--n8 = -64px
CLASSES
.mt--0 { margin-top: 0 }
.mt--1 { margin-top: 8px }
.mt--2 { margin-top: 16px }
.mt--3 { margin-top: 24px }
.mt--4 { margin-top: 32px }
.mt--5 { margin-top: 40px }
.mt--6 { margin-top: 48px }
.mt--7 { margin-top: 56px }
.mt--8 { margin-top: 64px }
.mt--n1 { margin-top: -8px }
.mt--n2 { margin-top: -16px }
.mt--n3 { margin-top: -24px }
.mt--n4 { margin-top: -32px }
.mt--n5 { margin-top: -40px }
.mt--n6 { margin-top: -48px }
.mt--n7 { margin-top: -56px }
.mt--n8 { margin-top: -64px }

top↑

MARGIN-RIGHT

SYNTAX
# Base
	mr = margin-right

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
	--n1 = -8px
	--n2 = -16px
	--n3 = -24px
	--n4 = -32px
	--n5 = -40px
	--n6 = -48px
	--n7 = -56px
	--n8 = -64px	
	--a = auto
CLASSES
.mr--0 { margin-right: 0 }
.mr--1 { margin-right: 8px }
.mr--2 { margin-right: 16px }
.mr--3 { margin-right: 24px }
.mr--4 { margin-right: 32px }
.mr--5 { margin-right: 40px }
.mr--6 { margin-right: 48px }
.mr--7 { margin-right: 56px }
.mr--8 { margin-right: 64px }
.mr--n1 { margin-right: -8px }
.mr--n2 { margin-right: -16px }
.mr--n3 { margin-right: -24px }
.mr--n4 { margin-right: -32px }
.mr--n5 { margin-right: -40px }
.mr--n6 { margin-right: -48px }
.mr--n7 { margin-right: -56px }
.mr--n8 { margin-right: -64px }
.mr--a { margin-right: auto }

top↑

MARGIN-BOTTOM

SYNTAX
# Base
	mb = margin-bottom

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
	--n1 = -8px
	--n2 = -16px
	--n3 = -24px
	--n4 = -32px
	--n5 = -40px
	--n6 = -48px
	--n7 = -56px
	--n8 = -64px
CLASSES
.mb--0 { margin-bottom: 0 }
.mb--1 { margin-bottom: 8px }
.mb--2 { margin-bottom: 16px }
.mb--3 { margin-bottom: 24px }
.mb--4 { margin-bottom: 32px }
.mb--5 { margin-bottom: 40px }
.mb--6 { margin-bottom: 48px }
.mb--7 { margin-bottom: 56px }
.mb--8 { margin-bottom: 64px }
.mb--n1 { margin-bottom: -8px }
.mb--n2 { margin-bottom: -16px }
.mb--n3 { margin-bottom: -24px }
.mb--n4 { margin-bottom: -32px }
.mb--n5 { margin-bottom: -40px }
.mb--n6 { margin-bottom: -48px }
.mb--n7 { margin-bottom: -56px }
.mb--n8 { margin-bottom: -64px }

top↑

MARGIN-LEFT

SYNTAX
# Base
	ml = margin-left

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
	--n1 = -8px
	--n2 = -16px
	--n3 = -24px
	--n4 = -32px
	--n5 = -40px
	--n6 = -48px
	--n7 = -56px
	--n8 = -64px
	--a = auto
CLASSES
.ml--0 { margin-left: 0 }
.ml--1 { margin-left: 8px }
.ml--2 { margin-left: 16px }
.ml--3 { margin-left: 24px }
.ml--4 { margin-left: 32px }
.ml--5 { margin-left: 40px }
.ml--6 { margin-left: 48px }
.ml--7 { margin-left: 56px }
.ml--8 { margin-left: 64px }
.ml--n1 { margin-left: -8px }
.ml--n2 { margin-left: -16px }
.ml--n3 { margin-left: -24px }
.ml--n4 { margin-left: -32px }
.ml--n5 { margin-left: -40px }
.ml--n6 { margin-left: -48px }
.ml--n7 { margin-left: -56px }
.ml--n8 { margin-left: -64px }
.ml--a { margin-left: auto }

top↑

MARGIN-Y

SYNTAX
# Base
	my = margin-top; margin-bottom

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
	--n1 = -8px
	--n2 = -16px
	--n3 = -24px
	--n4 = -32px
	--n5 = -40px
	--n6 = -48px
	--n7 = -56px
	--n8 = -64px
CLASSES
.my--0 { margin-top: 0; margin-bottom: 0 }
.my--1 { margin-top: 8px; margin-bottom: 8px }
.my--2 { margin-top: 16px; margin-bottom: 16px }
.my--3 { margin-top: 24px; margin-bottom: 24px }
.my--4 { margin-top: 32px; margin-bottom: 32px }
.my--5 { margin-top: 40px; margin-bottom: 40px }
.my--6 { margin-top: 48px; margin-bottom: 48px }
.my--7 { margin-top: 56px; margin-bottom: 56px }
.my--8 { margin-top: 64px; margin-bottom: 64px }
.my--n1 { margin-top: -8px; margin-bottom: -8px }
.my--n2 { margin-top: -16px; margin-bottom: -16px }
.my--n3 { margin-top: -24px; margin-bottom: -24px }
.my--n4 { margin-top: -32px; margin-bottom: -32px }
.my--n5 { margin-top: -40px; margin-bottom: -40px }
.my--n6 { margin-top: -48px; margin-bottom: -48px }
.my--n7 { margin-top: -56px; margin-bottom: -56px }
.my--n8 { margin-top: -64px; margin-bottom: -64px }

top↑

MARGIN-X

SYNTAX
# Base
	mx = margin-right; margin-left

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
	--n1 = -8px
	--n2 = -16px
	--n3 = -24px
	--n4 = -32px
	--n5 = -40px
	--n6 = -48px
	--n7 = -56px
	--n8 = -64px
	--a = auto
CLASSES
.mx--0 { margin-right: 0; margin-left: 0 }
.mx--1 { margin-right: 8px; margin-left: 8px }
.mx--2 { margin-right: 16px; margin-left: 16px }
.mx--3 { margin-right: 24px; margin-left: 24px }
.mx--4 { margin-right: 32px; margin-left: 32px }
.mx--5 { margin-right: 40px; margin-left: 40px }
.mx--6 { margin-right: 48px; margin-left: 48px }
.mx--7 { margin-right: 56px; margin-left: 56px }
.mx--8 { margin-right: 64px; margin-left: 64px }
.mx--n1 { margin-right: -8px; margin-left: -8px }
.mx--n2 { margin-right: -16px; margin-left: -16px }
.mx--n3 { margin-right: -24px; margin-left: -24px }
.mx--n4 { margin-right: -32px; margin-left: -32px }
.mx--n5 { margin-right: -40px; margin-left: -40px }
.mx--n6 { margin-right: -48px; margin-left: -48px }
.mx--n7 { margin-right: -56px; margin-left: -56px }
.mx--n8 { margin-right: -64px; margin-left: -64px }
.mx--a { margin-right: auto; margin-left: auto }

top↑


OUTLINE

OUTLINE

SYNTAX
# Base
	oe = outline (shorthand for various outline-* properties)

# Modifiers
	--0 = 0

# Note
	Don't forget this, ok?
	https://developer.mozilla.org/en-US/docs/Web/CSS/outline#Accessibility_concerns
CLASSES
.oe--0 { outline: 0 }

top↑


BORDER

BORDER-WIDTH

SYNTAX
# Base
	brw = border-width (shorthand for the border-*-width properties)
	brtw = border-top-width
	brrw = border-right-width
	brbw = border-bottom-width
	brlw = border-left-width
	bryw = border-top-width; border-bottom-width
	brxw = border-right-width; border-left-width

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px
CLASSES
.brw--0 { border-width: 0 }
.brw--1 { border-width: 1px }
.brw--2 { border-width: 2px }
.brw--3 { border-width: 4px }
.brw--4 { border-width: 8px }
.brw--5 { border-width: 16px }
.brw--6 { border-width: 32px }
.brw--7 { border-width: 64px }
.brw--8 { border-width: 128px }

.brtw--0 { border-top-width: 0 }
.brtw--1 { border-top-width: 1px }
.brtw--2 { border-top-width: 2px }
.brtw--3 { border-top-width: 4px }
.brtw--4 { border-top-width: 8px }
.brtw--5 { border-top-width: 16px }
.brtw--6 { border-top-width: 32px }
.brtw--7 { border-top-width: 64px }
.brtw--8 { border-top-width: 128px }

.brrw--0 { border-right-width: 0 }
.brrw--1 { border-right-width: 1px }
.brrw--2 { border-right-width: 2px }
.brrw--3 { border-right-width: 4px }
.brrw--4 { border-right-width: 8px }
.brrw--5 { border-right-width: 16px }
.brrw--6 { border-right-width: 32px }
.brrw--7 { border-right-width: 64px }
.brrw--8 { border-right-width: 128px }

.brbw--0 { border-bottom-width: 0 }
.brbw--1 { border-bottom-width: 1px }
.brbw--2 { border-bottom-width: 2px }
.brbw--3 { border-bottom-width: 4px }
.brbw--4 { border-bottom-width: 8px }
.brbw--5 { border-bottom-width: 16px }
.brbw--6 { border-bottom-width: 32px }
.brbw--7 { border-bottom-width: 64px }
.brbw--8 { border-bottom-width: 128px }

.brlw--0 { border-left-width: 0 }
.brlw--1 { border-left-width: 1px }
.brlw--2 { border-left-width: 2px }
.brlw--3 { border-left-width: 4px }
.brlw--4 { border-left-width: 8px }
.brlw--5 { border-left-width: 16px }
.brlw--6 { border-left-width: 32px }
.brlw--7 { border-left-width: 64px }
.brlw--8 { border-left-width: 128px }

.bryw--0 { border-top-width: 0; border-bottom-width: 0 }
.bryw--1 { border-top-width: 1px; border-bottom-width: 1px }
.bryw--2 { border-top-width: 2px; border-bottom-width: 2px }
.bryw--3 { border-top-width: 4px; border-bottom-width: 4px }
.bryw--4 { border-top-width: 8px; border-bottom-width: 8px }
.bryw--5 { border-top-width: 16px; border-bottom-width: 16px }
.bryw--6 { border-top-width: 32px; border-bottom-width: 32px }
.bryw--7 { border-top-width: 64px; border-bottom-width: 64px }
.bryw--8 { border-top-width: 128px; border-bottom-width: 128px }

.brxw--0 { border-right-width: 0; border-left-width: 0 }
.brxw--1 { border-right-width: 1px; border-left-width: 1px }
.brxw--2 { border-right-width: 2px; border-left-width: 2px }
.brxw--3 { border-right-width: 4px; border-left-width: 4px }
.brxw--4 { border-right-width: 8px; border-left-width: 8px }
.brxw--5 { border-right-width: 16px; border-left-width: 16px }
.brxw--6 { border-right-width: 32px; border-left-width: 32px }
.brxw--7 { border-right-width: 64px; border-left-width: 64px }
.brxw--8 { border-right-width: 128px; border-left-width: 128px }

top↑

BORDER-STYLE

SYNTAX
# Base
	brst = border-style (shorthand for the border-*-style properties)
	brtsty = border-top-style
	brrsty = border-right-style
	brbsty = border-bottom-style
	brlsty = border-left-style

# Modifiers
	--das = dashed
	--dot = dotted
	--n = none
	--sol = solid
CLASSES
.brst--das { border-style: dashed }
.brst--dot { border-style: dotted }
.brst--n { border-style: none }
.brst--sol { border-style: solid }

.brtsty--das { border-top-style: dashed }
.brtsty--dot { border-top-style: dotted }
.brtsty--n { border-top-style: none }
.brtsty--sol { border-top-style: solid }

.brrsty--das { border-right-style: dashed }
.brrsty--dot { border-right-style: dotted }
.brrsty--n { border-right-style: none }
.brrsty--sol { border-right-style: solid }

.brbsty--das { border-bottom-style: dashed }
.brbsty--dot { border-bottom-style: dotted }
.brbsty--n { border-bottom-style: none }
.brbsty--sol { border-bottom-style: solid }

.brlsty--das { border-left-style: dashed }
.brlsty--dot { border-left-style: dotted }
.brlsty--n { border-left-style: none }
.brlsty--sol { border-left-style: solid }

.brysty--das { border-top-style: dashed; border-bottom-style: dashed }
.brysty--dot { border-top-style: dotted; border-bottom-style: dotted }
.brysty--n { border-top-style: none; border-bottom-style: none }
.brysty--sol { border-top-style: solid; border-bottom-style: solid }

.brxsty--das { border-right-style: dashed; border-left-style: dashed }
.brxsty--dot { border-right-style: dotted; border-left-style: dotted }
.brxsty--n { border-right-style: none; border-left-style: none }
.brxsty--sol { border-right-style: solid; border-left-style: solid }

top↑

BORDER-RADIUS

SYNTAX
# Base
	brrad = border-radius (shorthand for the border-*-radius properties)
	brtrrad = border-top-right-radius
	brtlrad = border-top-left-radius
	brbrrad = border-bottom-right-radius
	brblrad = border-bottom-left-radius

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px
	--100p = 100% (only for border-radius shorthand)
CLASSES
.brrad--0 { border-radius: 0 }
.brrad--1 { border-radius: 1px }
.brrad--2 { border-radius: 2px }
.brrad--3 { border-radius: 4px }
.brrad--4 { border-radius: 8px }
.brrad--5 { border-radius: 16px }
.brrad--6 { border-radius: 32px }
.brrad--7 { border-radius: 64px }
.brrad--8 { border-radius: 128px }
.brrad--100p { border-radius: 100% }

.brtrrad--0 { border-top-right-radius: 0 }
.brtlrad--0 { border-top-left-radius: 0 }
.brbrrad--0 { border-bottom-right-radius: 0 }
.brblrad--0 { border-bottom-left-radius: 0 }

.brtrrad--1 { border-top-right-radius: 1px }
.brtlrad--1 { border-top-left-radius: 1px }
.brbrrad--1 { border-bottom-right-radius: 1px }
.brblrad--1 { border-bottom-left-radius: 1px }

.brtrrad--2 { border-top-right-radius: 2px }
.brtlrad--2 { border-top-left-radius: 2px }
.brbrrad--2 { border-bottom-right-radius: 2px }
.brblrad--2 { border-bottom-left-radius: 2px }

.brtrrad--3 { border-top-right-radius: 4px }
.brtlrad--3 { border-top-left-radius: 4px }
.brbrrad--3 { border-bottom-right-radius: 4px }
.brblrad--3 { border-bottom-left-radius: 4px }

.brtrrad--4 { border-top-right-radius: 8px }
.brtlrad--4 { border-top-left-radius: 8px }
.brbrrad--4 { border-bottom-right-radius: 8px }
.brblrad--4 { border-bottom-left-radius: 8px }

.brtrrad--5 { border-top-right-radius: 16px }
.brtlrad--5 { border-top-left-radius: 16px }
.brbrrad--5 { border-bottom-right-radius: 16px }
.brblrad--5 { border-bottom-left-radius: 16px }

.brtrrad--6 { border-top-right-radius: 32px }
.brtlrad--6 { border-top-left-radius: 32px }
.brbrrad--6 { border-bottom-right-radius: 32px }
.brblrad--6 { border-bottom-left-radius: 32px }

.brtrrad--7 { border-top-right-radius: 64px }
.brtlrad--7 { border-top-left-radius: 64px }
.brbrrad--7 { border-bottom-right-radius: 64px }
.brblrad--7 { border-bottom-left-radius: 64px }

.brtrrad--8 { border-top-right-radius: 128px }
.brtlrad--8 { border-top-left-radius: 128px }
.brbrrad--8 { border-bottom-right-radius: 128px }
.brblrad--8 { border-bottom-left-radius: 128px }

top↑

BORDER-COLOR

SYNTAX
# Base
	brc = border-color (shorthand for the border-*-color properties)
	brtc = border-top-color
	brrc = border-right-color
	brbc = border-bottom-color
	brlc = border-left-color

	brchvr = border-color:hover
	brtchvr = border-top-color:hover
	brrchvr = border-right-color:hover
	brbchvr = border-bottom-color:hover
	brlchvr = border-left-color:hover

# Modifiers
	--gy1 = #fafafa (grey)
	--gy2 = #ededed (grey)
	--gy3 = #dddddd (grey)
	--gy4 = #b1b1b1 (grey)
	--gy5 = #878787 (grey)
	--gy6 = #6a6a6a (grey)
	--gy7 = #4d4d4d (grey)
	--gy8 = #303030 (grey)
	--rd1 = #c6262e (red)
	--gn1 = #68b723 (green)
	--bl1 = #3689e6 (blue)
	--yl1 = #f9c440 (yellow)
	--bk1 = #000000 (black)
	--wh1 = #ffffff (white)
	--tp = transparent

top↑

CLASSES
.brc--gy1 { border-color: #fafafa }
.brc--gy2 { border-color: #ededed }
.brc--gy3 { border-color: #dddddd }
.brc--gy4 { border-color: #b1b1b1 }
.brc--gy5 { border-color: #878787 }
.brc--gy6 { border-color: #6a6a6a }
.brc--gy7 { border-color: #4d4d4d }
.brc--gy8 { border-color: #303030 }
.brc--rd1 { border-color: #c6262e }
.brc--gn1 { border-color: #68b723 }
.brc--bl1 { border-color: #3689e6 }
.brc--yl1 { border-color: #f9c440 }
.brc--bk1 { border-color: #000000 }
.brc--wh1 { border-color: #ffffff }
.brc--tp { border-color: transparent }

.brtc--gy1 { border-top-color: #fafafa }
.brtc--gy2 { border-top-color: #ededed }
.brtc--gy3 { border-top-color: #dddddd }
.brtc--gy4 { border-top-color: #b1b1b1 }
.brtc--gy5 { border-top-color: #878787 }
.brtc--gy6 { border-top-color: #6a6a6a }
.brtc--gy7 { border-top-color: #4d4d4d }
.brtc--gy8 { border-top-color: #303030 }
.brtc--rd1 { border-top-color: #c6262e }
.brtc--gn1 { border-top-color: #68b723 }
.brtc--bl1 { border-top-color: #3689e6 }
.brtc--yl1 { border-top-color: #f9c440 }
.brtc--bk1 { border-top-color: #000000 }
.brtc--wh1 { border-top-color: #ffffff }
.brtc--tp { border-top-color: transparent }

.brrc--gy1 { border-right-color: #fafafa }
.brrc--gy2 { border-right-color: #ededed }
.brrc--gy3 { border-right-color: #dddddd }
.brrc--gy4 { border-right-color: #b1b1b1 }
.brrc--gy5 { border-right-color: #878787 }
.brrc--gy6 { border-right-color: #6a6a6a }
.brrc--gy7 { border-right-color: #4d4d4d }
.brrc--gy8 { border-right-color: #303030 }
.brrc--rd1 { border-right-color: #c6262e }
.brrc--gn1 { border-right-color: #68b723 }
.brrc--bl1 { border-right-color: #3689e6 }
.brrc--yl1 { border-right-color: #f9c440 }
.brrc--bk1 { border-right-color: #000000 }
.brrc--wh1 { border-right-color: #ffffff }
.brrc--tp { border-right-color: transparent }

.brbc--gy1 { border-bottom-color: #fafafa }
.brbc--gy2 { border-bottom-color: #ededed }
.brbc--gy3 { border-bottom-color: #dddddd }
.brbc--gy4 { border-bottom-color: #b1b1b1 }
.brbc--gy5 { border-bottom-color: #878787 }
.brbc--gy6 { border-bottom-color: #6a6a6a }
.brbc--gy7 { border-bottom-color: #4d4d4d }
.brbc--gy8 { border-bottom-color: #303030 }
.brbc--rd1 { border-bottom-color: #c6262e }
.brbc--gn1 { border-bottom-color: #68b723 }
.brbc--bl1 { border-bottom-color: #3689e6 }
.brbc--yl1 { border-bottom-color: #f9c440 }
.brbc--bk1 { border-bottom-color: #000000 }
.brbc--wh1 { border-bottom-color: #ffffff }
.brbc--tp { border-bottom-color: transparent }

.brlc--gy1 { border-left-color: #fafafa }
.brlc--gy2 { border-left-color: #ededed }
.brlc--gy3 { border-left-color: #dddddd }
.brlc--gy4 { border-left-color: #b1b1b1 }
.brlc--gy5 { border-left-color: #878787 }
.brlc--gy6 { border-left-color: #6a6a6a }
.brlc--gy7 { border-left-color: #4d4d4d }
.brlc--gy8 { border-left-color: #303030 }
.brlc--rd1 { border-left-color: #c6262e }
.brlc--gn1 { border-left-color: #68b723 }
.brlc--bl1 { border-left-color: #3689e6 }
.brlc--yl1 { border-left-color: #f9c440 }
.brlc--bk1 { border-left-color: #000000 }
.brlc--wh1 { border-left-color: #ffffff }
.brlc--tp { border-left-color: transparent }

.brchvr--gy1:hover { border-color: #fafafa }
.brchvr--gy2:hover { border-color: #ededed }
.brchvr--gy3:hover { border-color: #dddddd }
.brchvr--gy4:hover { border-color: #b1b1b1 }
.brchvr--gy5:hover { border-color: #878787 }
.brchvr--gy6:hover { border-color: #6a6a6a }
.brchvr--gy7:hover { border-color: #4d4d4d }
.brchvr--gy8:hover { border-color: #303030 }
.brchvr--rd1:hover { border-color: #c6262e }
.brchvr--gn1:hover { border-color: #68b723 }
.brchvr--bl1:hover { border-color: #3689e6 }
.brchvr--yl1:hover { border-color: #f9c440 }
.brchvr--bk1:hover { border-color: #000000 }
.brchvr--wh1:hover { border-color: #ffffff }
.brchvr--tp:hover { border-color: transparent }

.brtchvr--gy1:hover { border-top-color: #fafafa }
.brtchvr--gy2:hover { border-top-color: #ededed }
.brtchvr--gy3:hover { border-top-color: #dddddd }
.brtchvr--gy4:hover { border-top-color: #b1b1b1 }
.brtchvr--gy5:hover { border-top-color: #878787 }
.brtchvr--gy6:hover { border-top-color: #6a6a6a }
.brtchvr--gy7:hover { border-top-color: #4d4d4d }
.brtchvr--gy8:hover { border-top-color: #303030 }
.brtchvr--rd1:hover { border-top-color: #c6262e }
.brtchvr--gn1:hover { border-top-color: #68b723 }
.brtchvr--bl1:hover { border-top-color: #3689e6 }
.brtchvr--yl1:hover { border-top-color: #f9c440 }
.brtchvr--bk1:hover { border-top-color: #000000 }
.brtchvr--wh1:hover { border-top-color: #ffffff }
.brtchvr--tp:hover{ border-top-color: transparent }

.brrchvr--gy1:hover { border-right-color: #fafafa }
.brrchvr--gy2:hover { border-right-color: #ededed }
.brrchvr--gy3:hover { border-right-color: #dddddd }
.brrchvr--gy4:hover { border-right-color: #b1b1b1 }
.brrchvr--gy5:hover { border-right-color: #878787 }
.brrchvr--gy6:hover { border-right-color: #6a6a6a }
.brrchvr--gy7:hover { border-right-color: #4d4d4d }
.brrchvr--gy8:hover { border-right-color: #303030 }
.brrchvr--rd1:hover { border-right-color: #c6262e }
.brrchvr--gn1:hover { border-right-color: #68b723 }
.brrchvr--bl1:hover { border-right-color: #3689e6 }
.brrchvr--yl1:hover { border-right-color: #f9c440 }
.brrchvr--bk1:hover { border-right-color: #000000 }
.brrchvr--wh1:hover { border-right-color: #ffffff }
.brrchvr--tp:hover { border-right-color: transparent }

.brbchvr--gy1:hover { border-bottom-color: #fafafa }
.brbchvr--gy2:hover { border-bottom-color: #ededed }
.brbchvr--gy3:hover { border-bottom-color: #dddddd }
.brbchvr--gy4:hover { border-bottom-color: #b1b1b1 }
.brbchvr--gy5:hover { border-bottom-color: #878787 }
.brbchvr--gy6:hover { border-bottom-color: #6a6a6a }
.brbchvr--gy7:hover { border-bottom-color: #4d4d4d }
.brbchvr--gy8:hover { border-bottom-color: #303030 }
.brbchvr--rd1:hover { border-bottom-color: #c6262e }
.brbchvr--gn1:hover { border-bottom-color: #68b723 }
.brbchvr--bl1:hover { border-bottom-color: #3689e6 }
.brbchvr--yl1:hover { border-bottom-color: #f9c440 }
.brbchvr--bk1:hover { border-bottom-color: #000000 }
.brbchvr--wh1:hover { border-bottom-color: #ffffff }
.brbchvr--tp:hover { border-bottom-color: transparent }

.brlchvr--gy1:hover { border-left-color: #fafafa }
.brlchvr--gy2:hover { border-left-color: #ededed }
.brlchvr--gy3:hover { border-left-color: #dddddd }
.brlchvr--gy4:hover { border-left-color: #b1b1b1 }
.brlchvr--gy5:hover { border-left-color: #878787 }
.brlchvr--gy6:hover { border-left-color: #6a6a6a }
.brlchvr--gy7:hover { border-left-color: #4d4d4d }
.brlchvr--gy8:hover { border-left-color: #303030 }
.brlchvr--rd1:hover { border-left-color: #c6262e }
.brlchvr--gn1:hover { border-left-color: #68b723 }
.brlchvr--bl1:hover { border-left-color: #3689e6 }
.brlchvr--yl1:hover { border-left-color: #f9c440 }
.brlchvr--bk1:hover { border-left-color: #000000 }
.brlchvr--wh1:hover { border-left-color: #ffffff }
.brlchvr--tp:hover { border-left-color: transparent }

top↑


BOX-SHADOW

BOX-SHADOW

SYNTAX
# Base
	bxsw = box-shadow

# Modifiers
	--0 = none
	--1 = offset all 0 1px 2px
	--2 = offset all 0 4px 8px
	--3 = offset all 0 8px 16px 
	--4 = offset all 0 16px 32px
	
	--t1 = offset top 0 -4px 4px -4px
	--t2 = offset top 0 -8px 8px -8px
	--t3 = offset top 0 -16px 16px -16px
	--t4 = offset top 0 -32px 32px -32px
	
	--r1 = offset right 4px 0 4px -4px
	--r2 = offset right 8px 0 8px -8px
	--r3 = offset right 16px 0 16px -16px
	--r4 = offset right 32px 0 32px -32px
	
	--b1 = offset bottom 0 4px 4px -4px
	--b2 = offset bottom 0 8px 8px -8px
	--b3 = offset bottom 0 16px 16px -16px
	--b4 = offset bottom 0 32px 32px -32px
	
	--l1 = offset left -4px 0 4px -4px
	--l2 = offset left -8px 0 8px -8px
	--l3 = offset left -16px 0 16px -16px
	--l4 = offset left -32px 0 32px -32px
CLASSES
.bxsw--0 { box-shadow: none }
.bxsw--1 { box-shadow: 0 1px 2px rgba( 0, 0, 0, .4 ) }
.bxsw--2 { box-shadow: 0 4px 8px rgba( 0, 0, 0, .4 ) }
.bxsw--3 { box-shadow: 0 8px 16px rgba( 0, 0, 0, .4 ) }
.bxsw--4 { box-shadow: 0 16px 32px rgba( 0, 0, 0, .4 ) }

.bxsw--t1 { box-shadow: 0 -4px 4px -4px rgba( 0, 0, 0, .4 ) }
.bxsw--t2 { box-shadow: 0 -8px 8px -8px rgba( 0, 0, 0, .4 ) }
.bxsw--t3 { box-shadow: 0 -16px 16px -16px rgba( 0, 0, 0, .4 ) }
.bxsw--t4 { box-shadow: 0 -32px 32px -32px rgba( 0, 0, 0, .4 ) }

.bxsw--r1 { box-shadow: 4px 0 4px -4px rgba( 0, 0, 0, .4 ) }
.bxsw--r2 { box-shadow: 8px 0 8px -8px rgba( 0, 0, 0, .4 ) }
.bxsw--r3 { box-shadow: 16px 0 16px -16px rgba( 0, 0, 0, .4 ) }
.bxsw--r4 { box-shadow: 32px 0 32px -32px rgba( 0, 0, 0, .4 ) }

.bxsw--b1 { box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, .4 ) }
.bxsw--b2 { box-shadow: 0 8px 8px -8px rgba( 0, 0, 0, .4 ) }
.bxsw--b3 { box-shadow: 0 16px 16px -16px rgba( 0, 0, 0, .4 ) }
.bxsw--b4 { box-shadow: 0 32px 32px -32px rgba( 0, 0, 0, .4 ) }

.bxsw--l1 { box-shadow: -4px 0 4px -4px rgba( 0, 0, 0, .4 ) }
.bxsw--l2 { box-shadow: -8px 0 8px -8px rgba( 0, 0, 0, .4 ) }
.bxsw--l3 { box-shadow: -16px 0 16px -16px rgba( 0, 0, 0, .4 ) }
.bxsw--l4 { box-shadow: -32px 0 32px -32px rgba( 0, 0, 0, .4 ) }

top↑


BACKGROUND

BACKGROUND-COLOR

SYNTAX
# Base
	bgc = background-color
	bgchvr = background-color:hover

# Modifiers
	--gy1 = #fafafa (grey)
	--gy2 = #ededed (grey)
	--gy3 = #dddddd (grey)
	--gy4 = #b1b1b1 (grey)
	--gy5 = #878787 (grey)
	--gy6 = #6a6a6a (grey)
	--gy7 = #4d4d4d (grey)
	--gy8 = #303030 (grey)
	--rd1 = #c6262e (red)
	--gn1 = #68b723 (green)
	--bl1 = #3689e6 (blue)
	--yl1 = #f9c440 (yellow))
	--bk1 = #000000 (black)
	--wh1 = #ffffff (white)
	--tp = transparent
CLASSES
.bgc--gy1 { background-color: #fafafa }
.bgc--gy2 { background-color: #ededed }
.bgc--gy3 { background-color: #dddddd }
.bgc--gy4 { background-color: #b1b1b1 }
.bgc--gy5 { background-color: #878787 }
.bgc--gy6 { background-color: #6a6a6a }
.bgc--gy7 { background-color: #4d4d4d }
.bgc--gy8 { background-color: #303030 }
.bgc--rd1 { background-color: #c6262e }
.bgc--gn1 { background-color: #68b723 }
.bgc--bl1 { background-color: #3689e6 }
.bgc--yl1 { background-color: #f9c440 }
.bgc--bk1 { background-color: #000000 }
.bgc--wh1 { background-color: #ffffff }
.bgc--tp { background-color: transparent }

.bgchvr--gy1:hover { background-color: #fafafa }
.bgchvr--gy2:hover { background-color: #ededed }
.bgchvr--gy3:hover { background-color: #dddddd }
.bgchvr--gy4:hover { background-color: #b1b1b1 }
.bgchvr--gy5:hover { background-color: #878787 }
.bgchvr--gy6:hover { background-color: #6a6a6a }
.bgchvr--gy7:hover { background-color: #4d4d4d }
.bgchvr--gy8:hover { background-color: #303030 }
.bgchvr--rd1:hover { background-color: #c6262e }
.bgchvr--gn1:hover { background-color: #68b723 }
.bgchvr--bl1:hover { background-color: #3689e6 }
.bgchvr--yl1:hover { background-color: #f9c440 }
.bgchvr--bk1:hover { background-color: #000000 }
.bgchvr--wh1:hover { background-color: #ffffff }
.bgchvr--tp:hover { background-color: transparent }

top↑

BACKGROUND-POSITION

SYNTAX
# Base
	bgpos = background-position

# Modifiers
	--t = top 
	--r = right
	--b = bottom
	--l = left
	--ctr = center
CLASSES
.bgpos--t { background-position: top center }
.bgpos--r { background-position: center right }
.bgpos--b { background-position: bottom center }
.bgpos--l { background-position: center left }
.bgpos--ctr { background-position: center center }

top↑

BACKGROUND-REPEAT

SYNTAX
# Base
	bgrt = background-repeat

# Modifiers
	--n = no-repeat
	--y = repeat-y
	--x = repeat-x
CLASSES
.bgrt--n { background-repeat: no-repeat }
.bgrt--x { background-repeat: repeat-x }
.bgrt--y { background-repeat: repeat-y }

top↑

BACKGROUND-SIZE

SYNTAX
# Base
	bgs = background-size 

# Modifiers
	--cn = contain
	--cr = cover
CLASSES
.bgs--cn { background-size: contain }
.bgs--cr { background-size: cover }

top↑


CURSOR

CURSOR

SYNTAX
# Base
	cur = cursor

# Modifiers
	--def = default
	--ptr = pointer
	--n = not-allowed
 	--i = inherit
CLASSES
.cur--def { cursor: default }
.cur--ptr { cursor: pointer }
.cur--n { cursor: not-allowed }
.cur--i { cursor: inherit }

top↑


PADDING

PADDING

SYNTAX
# Base
	p = padding (shorthand for all the padding-* properties)

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
CLASSES
.p--0 { padding: 0 }
.p--1 { padding: 8px }
.p--2 { padding: 16px }
.p--3 { padding: 24px }
.p--4 { padding: 32px }
.p--5 { padding: 40px }
.p--6 { padding: 48px }
.p--7 { padding: 56px }
.p--8 { padding: 64px }

top↑

PADDING-TOP

SYNTAX
# Base
	pt = padding-top

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
CLASSES
.pt--0 { padding-top: 0 }
.pt--1 { padding-top: 8px }
.pt--2 { padding-top: 16px }
.pt--3 { padding-top: 24px }
.pt--4 { padding-top: 32px }
.pt--5 { padding-top: 40px }
.pt--6 { padding-top: 48px }
.pt--7 { padding-top: 56px }
.pt--8 { padding-top: 64px }

top↑

PADDING-RIGHT

SYNTAX
# Base
	pr = padding-right

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
CLASSES
.pr--0 { padding-right: 0 }
.pr--1 { padding-right: 8px }
.pr--2 { padding-right: 16px }
.pr--3 { padding-right: 24px }
.pr--4 { padding-right: 32px }
.pr--5 { padding-right: 40px }
.pr--6 { padding-right: 48px }
.pr--7 { padding-right: 56px }
.pr--8 { padding-right: 64px }

top↑

PADDING-BOTTOM

SYNTAX
# Base
	pb = padding-bottom

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
CLASSES
.pb--0 { padding-bottom: 0 }
.pb--1 { padding-bottom: 8px }
.pb--2 { padding-bottom: 16px }
.pb--3 { padding-bottom: 24px }
.pb--4 { padding-bottom: 32px }
.pb--5 { padding-bottom: 40px }
.pb--6 { padding-bottom: 48px }
.pb--7 { padding-bottom: 56px }
.pb--8 { padding-bottom: 64px }

top↑

PADDING-LEFT

SYNTAX
# Base
	pl = padding-left

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
CLASSES
.pl--0 { padding-left: 0 }
.pl--1 { padding-left: 8px }
.pl--2 { padding-left: 16px }
.pl--3 { padding-left: 24px }
.pl--4 { padding-left: 32px }
.pl--5 { padding-left: 40px }
.pl--6 { padding-left: 48px }
.pl--7 { padding-left: 56px }
.pl--8 { padding-left: 64px }

top↑

PADDING-Y

SYNTAX
# Base
	py = padding-top; padding-bottom

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
CLASSES
.py--0 { padding-top: 0; padding-bottom: 0 }
.py--1 { padding-top: 8px; padding-bottom: 8px }
.py--2 { padding-top: 16px; padding-bottom: 16px }
.py--3 { padding-top: 24px; padding-bottom: 24px }
.py--4 { padding-top: 32px; padding-bottom: 32px }
.py--5 { padding-top: 40px; padding-bottom: 40px }
.py--6 { padding-top: 48px; padding-bottom: 48px }
.py--7 { padding-top: 56px; padding-bottom: 56px }
.py--8 { padding-top: 64px; padding-bottom: 64px }

top↑

PADDING-X

SYNTAX
# Base
	px = padding-right; padding-left

# Modifiers
	--0 = 0
	--1 = 8px
	--2 = 16px
	--3 = 24px
	--4 = 32px
	--5 = 40px
	--6 = 48px
	--7 = 56px
	--8 = 64px
CLASSES
.px--0 { padding-right: 0; padding-left: 0 }
.px--1 { padding-right: 8px; padding-left: 8px }
.px--2 { padding-right: 16px; padding-left: 16px }
.px--3 { padding-right: 24px; padding-left: 24px }
.px--4 { padding-right: 32px; padding-left: 32px }
.px--5 { padding-right: 40px; padding-left: 40px }
.px--6 { padding-right: 48px; padding-left: 48px }
.px--7 { padding-right: 56px; padding-left: 56px }
.px--8 { padding-right: 64px; padding-left: 64px }

top↑


WIDTH

WIDTH

SYNTAX
# Base
	w = width

# Modifiers
	--1 = 1px
	--2 = 8px
	--3 = 16px
	--4 = 32px
	--5 = 64px
	--6 = 128px
	--7 = 256px
	--8 = 512px
	--10p = 10%
	--20p = 20%
	--25p = 25%
	--30p = 30%
	--33p = 33.33333%
	--40p = 40%
	--50p = 50%
	--60p = 60%
	--66p = 66.66667%
	--70p = 70%
	--75p = 75%
	--80p = 80%
	--90p = 90%
	--100p = 100%
	--a = auto
CLASSES
.w--1 { width: 1px }
.w--2 { width: 8px }
.w--3 { width: 16px }
.w--4 { width: 32px }
.w--5 { width: 64px }
.w--6 { width: 128px }
.w--7 { width: 256px }
.w--8 { width: 512px }
.w--10p { width: 10% }
.w--20p { width: 20% }
.w--25p { width: 25% }
.w--30p { width: 30% }
.w--33p { width: 33.33333% }
.w--40p { width: 40% }
.w--50p { width: 50% }
.w--60p { width: 60% }
.w--66p { width: 66.66667% }
.w--70p { width: 70% }
.w--75p { width: 75% }
.w--80p { width: 80% }
.w--90p { width: 90% }
.w--100p { width: 100% }
.w--a { width: auto }

top↑

MIN-WIDTH

SYNTAX
# Base
	miw = min-width

# Modifiers
	--1 = 1px
	--2 = 8px
	--3 = 16px
	--4 = 32px
	--5 = 64px
	--6 = 128px
	--7 = 256px
	--8 = 512px
	--10p = 10%
	--20p = 20%
	--25p = 25%
	--30p = 30%
	--33p = 33.33333%
	--40p = 40%
	--50p = 50%
	--60p = 60%
	--66p = 66.66667% 
	--70p = 70%
	--75p = 75%
	--80p = 80%
	--90p = 90%
	--100p = 100%
	--a = auto
CLASSES
.miw--1 { min-width: 1px }
.miw--2 { min-width: 8px }
.miw--3 { min-width: 16px }
.miw--4 { min-width: 32px }
.miw--5 { min-width: 64px }
.miw--6 { min-width: 128px }
.miw--7 { min-width: 256px }
.miw--8 { min-width: 512px }
.miw--10p { min-width: 10% }
.miw--20p { min-width: 20% }
.miw--25p { min-width: 25% }
.miw--30p { min-width: 30% }
.miw--33p { min-width: 33.33333% }
.miw--40p { min-width: 40% }
.miw--50p { min-width: 50% }
.miw--60p { min-width: 60% }
.miw--66p { min-width: 66.66667% }
.miw--70p { min-width: 70% }
.miw--75p { min-width: 75% }
.miw--80p { min-width: 80% }
.miw--90p { min-width: 90% }
.miw--100p { min-width: 100% }
.miw--a { min-width: auto }

top↑

MAX-WIDTH

SYNTAX
# Base
	maw = max-width

# Modifiers
	--1 = 1px
	--2 = 8px
	--3 = 16px
	--4 = 32px
	--5 = 64px
	--6 = 128px
	--7 = 256px
	--8 = 512px
	--10p = 10%
	--20p = 20%
	--25p = 25%
	--30p = 30%
	--33p = 33.333333%
	--40p = 40%
	--50p = 50%
	--60p = 60%
	--66p = 66.666667% 
	--70p = 70%
	--75p = 75%
	--80p = 80%
	--90p = 90%
	--100p = 100%
	--n = none
CLASSES
.maw--1 { max-width: 1px }
.maw--2 { max-width: 8px }
.maw--3 { max-width: 16px }
.maw--4 { max-width: 32px }
.maw--5 { max-width: 64px }
.maw--6 { max-width: 128px }
.maw--7 { max-width: 256px }
.maw--8 { max-width: 512px }
.maw--10p { max-width: 10% }
.maw--20p { max-width: 20% }
.maw--25p { max-width: 25% }
.maw--30p { max-width: 30% }
.maw--33p { max-width: 33.33333% }
.maw--40p { max-width: 40% }
.maw--50p { max-width: 50% }
.maw--60p { max-width: 60% }
.maw--66p { max-width: 66.66667% }
.maw--70p { max-width: 70% }
.maw--75p { max-width: 75% }
.maw--80p { max-width: 80% }
.maw--90p { max-width: 90% }
.maw--100p { max-width: 100% }
.maw--n { max-width: none }

top↑


HEIGHT

HEIGHT

SYNTAX
# Base
	h = height

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 8px
	--3 = 16px
	--4 = 32px
	--5 = 64px
	--6 = 128px
	--7 = 256px
	--8 = 512px
	--25p = 25%
	--50p = 50%
	--75p = 75%
	--100p = 100%
	--25vh = a quarter of viewport height
	--50vh = half of viewport height
	--75vh = three-quarter of viewport height
	--100vh = full viewport height
	--a = auto
CLASSES
.h--0 { height: 0 }
.h--1 { height: 1px }
.h--2 { height: 8px }
.h--3 { height: 16px }
.h--4 { height: 32px }
.h--5 { height: 64px }
.h--6 { height: 128px }
.h--7 { height: 256px }
.h--8 { height: 512px }
.h--25p { height: 25% }
.h--50p { height: 50% }
.h--75p { height: 75% }
.h--100p { height: 100% }
.h--25vh { height: 25vh }
.h--50vh { height: 50vh }
.h--75vh { height: 75vh }
.h--100vh { height: 100vh }
.h--a { height: auto }

top↑

MIN-HEIGHT

SYNTAX
# Base
	mih = min-height

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 8px
	--3 = 16px
	--4 = 32px
	--5 = 64px
	--6 = 128px
	--7 = 256px
	--8 = 512px
	--25p = 25%
	--50p = 50%
	--75p = 75%
	--100p = 100%
	--25vh = a quarter of viewport height
	--50vh = half of viewport height
	--75vh = three-quarter of viewport height
	--100vh = full viewport height
	--a = auto
CLASSES
.mih--0 { min-height: 0 }
.mih--1 { min-height: 1px }
.mih--2 { min-height: 8px }
.mih--3 { min-height: 16px }
.mih--4 { min-height: 32px }
.mih--5 { min-height: 64px }
.mih--6 { min-height: 128px }
.mih--7 { min-height: 256px }
.mih--8 { min-height: 512px }
.mih--25p { min-height: 25% }
.mih--50p { min-height: 50% }
.mih--75p { min-height: 75% }
.mih--100p { min-height: 100% }
.mih--25vh { min-height: 25vh }
.mih--50vh { min-height: 50vh }
.mih--75vh { min-height: 75vh }
.mih--100vh { min-height: 100vh }
.mih--a { min-height: auto }

top↑

MAX-HEIGHT

SYNTAX
# Base
	mah = max-height

# Modifiers
	--1 = 1px
	--2 = 8px
	--3 = 16px
	--4 = 32px
	--5 = 64px
	--6 = 128px
	--7 = 256px
	--8 = 512px
	--25p = 25%
	--50p = 50%
	--75p = 75%
	--100p = 100%
	--25vh = a quarter of viewport height
	--50vh = half of viewport height
	--75vh = three-quarter of viewport height
	--100vh = full viewport height
	--n = none
CLASSES
.mah--1 { max-height: 1px }
.mah--2 { max-height: 8px }
.mah--3 { max-height: 16px }
.mah--4 { max-height: 32px }
.mah--5 { max-height: 64px }
.mah--6 { max-height: 128px }
.mah--7 { max-height: 256px }
.mah--8 { max-height: 512px }
.mah--25p { max-height: 25% }
.mah--50p { max-height: 50% }
.mah--75p { max-height: 75% }
.mah--100p { max-height: 100% }
.mah--25vh { max-height: 25vh }
.mah--50vh { max-height: 50vh }
.mah--75vh { max-height: 75vh }
.mah--100vh { max-height: 100vh }
.mah--n { max-height: none }

top↑


OVERFLOW

OVERFLOW

SYNTAX
# Base
	of = overflow
	ofx = overflow-x
	ofy = overflow-y

# Modifiers
	--a = auto
	--hid = hidden
	--sl = scrolll
	--v = visible

# Note
	You can use 'of--a' as a clearfix.
	https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use
CLASSES
.of--a { overflow: auto }
.of--hid { overflow: hidden }
.of--sl { overflow: scroll }
.of--v { overflow: visible }

.ofx--a { overflow-x: auto }
.ofx--hid { overflow-x: hidden }
.ofx--sl { overflow-x: scroll }
.ofx--v { overflow-x: visible }

.ofy--a { overflow-y: auto }
.ofy--hid { overflow-y: hidden }
.ofy--sl { overflow-y: scroll }
.ofy--v { overflow-y: visible }

top↑

RESIZE

SYNTAX
# Base
	re = resize

# Modifiers
	--bh = both
	--n = none
	--x = horizontal
	--y = vertical
CLASSES
.re--bh { resize: both }
.re--n { resize: none }
.re--x { resize: horizontal }
.re--y { resize: vertical }

top↑


LIST-STYLE

LIST-STYLE

SYNTAX
# Base
	lsst = list-style

# Modifiers
	--ins = inside
	--n = none
	--sq = square
	--i = inherit
CLASSES
.lsst--ins { list-style: inside }
.lsst--n { list-style: none }
.lsst--sq { list-style: square }
.lsst--i { list-style: inherit }

top↑


TABLE

TABLE-LAYOUT

SYNTAX
# Base
	tbllt = table-layout

# Modifiers
	--a = auto
	--fix = fixed
CLASSES
.tbllt--a { table-layout: auto }
.tbllt--fix { table-layout: fixed }

top↑

BORDER-COLLAPSE

SYNTAX
# Base
	brcoll = border-collapse

# Modifiers
	--coll = collapse
	--sep = separate
	--i = inherit
CLASSES
.brcoll--coll { border-collapse: collapse }
.brcoll--sep { border-collapse: separate }
.brcoll--i { border-collapse: inherit }

top↑

BORDER-SPACING

SYNTAX
# Base
	brsp = border-spacing

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px
	--i = inherit
CLASSES
.brsp--0 { border-spacing: 0 }
.brsp--1 { border-spacing: 1px }
.brsp--2 { border-spacing: 2px }
.brsp--3 { border-spacing: 4px }
.brsp--4 { border-spacing: 8px }
.brsp--5 { border-spacing: 16px }
.brsp--6 { border-spacing: 32px }
.brsp--7 { border-spacing: 64px }
.brsp--8 { border-spacing: 128px }
.brsp--i { border-spacing: inherit }

top↑


VERTICAL-ALIGN

VERTICAL-ALIGN

SYNTAX
# Base
	vlan = vertical-align

# Modifiers
	--t = top
	--b = bottom    
	--bln = baseline
	--mid = middle
CLASSES
.vlan--t { vertical-align: top }
.vlan--b { vertical-align: bottom }
.vlan--bln { vertical-align: baseline }
.vlan--mid { vertical-align: middle }

top↑


TEXT-ALIGNMENT & DECORATION

DIRECTION

SYNTAX
# Base
	dn = direction

# Modifiers
	--ltr = ltr (left to right)
	--rtl = rtl (right to left)
	--i = inherit
CLASSES
.dn--ltr { direction: ltr }
.dn--rtl { direction: rtl }
.dn--i { direction: inherit }

top↑

TEXT-ALIGN

SYNTAX
# Base
	txtan = text-align

# Modifiers
	--r = right
	--l = left
	--ctr = center
	--j = justify
	--i = inherit
CLASSES
.txtan--r { text-align: right }
.txtan--l { text-align: left }
.txtan--ctr { text-align: center }
.txtan--j { text-align: justify }
.txtan--i { text-align: inherit }

top↑

TEXT-INDENT

SYNTAX
# Base
	txtit = text-indent

# Modifiers
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px
CLASSES
.txtit--1 { text-indent: 1px }
.txtit--2 { text-indent: 2px }
.txtit--3 { text-indent: 4px }
.txtit--4 { text-indent: 8px }
.txtit--5 { text-indent: 16px }
.txtit--6 { text-indent: 32px }
.txtit--7 { text-indent: 64px }
.txtit--8 { text-indent: 128px }

top↑

TEXT-TRANSFORM

SYNTAX
# Base
	txttm = text-transform

# Modifiers
	--cap = capitalize
	--lc = lowercase
	--n = none
	--uc = uppercase
	--i = inherit
CLASSES
.txttm--cap { text-transform: capitalize }
.txttm--lc { text-transform: lowercase }
.txttm--n { text-transform: none }
.txttm--uc { text-transform: uppercase }
.txttm--i { text-transform: inherit }

top↑

TEXT-DECORATION

SYNTAX
# Base
	txtdec = text-decoration
	txtdechvr = text-decoration:hover

# Modifiers
	--n = none
	--u = underline
CLASSES
.txtdec--n { text-decoration: none }
.txtdec--u { text-decoration: underline }
.txtdechvr--n:hover { text-decoration: none }
.txtdechvr--u:hover { text-decoration: underline }

top↑


TEXT-SPACING & COLOR

LINE-HEIGHT

SYNTAX
# Base
	lnh = line-height

# Modifiers
	--1 = 15px | related to .fts--1 { font-size: 10px }
	--2 = 19.5px | related to .fts--2 { font-size: 13px }
	--3 = 24px | related to .fts--3 { font-size: 16px }
	--4	= 30px | related to .fts--4 { font-size: 20px }
	--5 = 37.5px | related to .fts--5 { font-size: 25px }
	--6 = 46.5px | related to .fts--6 { font-size: 31px }
	--7 = 58.5px | related to .fts--7 { font-size: 39px }
	--8	= 73.5px | related to .fts--8 { font-size: 49px }
	--nl = normal
	--i = inherit
CLASSES
.lnh--1 { line-height: 15px }
.lnh--2 { line-height: 19.5px }
.lnh--3 { line-height: 24px }
.lnh--4 { line-height: 30px }
.lnh--5 { line-height: 37.5px }
.lnh--6 { line-height: 46.5px }
.lnh--7 { line-height: 58.5px }
.lnh--8 { line-height: 73.5px }
.lnh--nl { line-height: normal }
.lnh--i { line-height: inherit }

top↑

WORD-SPACING

SYNTAX
# Base
	wdsp = word-spacing

# Modifiers
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px
	--i = inherit
	--nl = normal
CLASSES
.wdsp--1 { word-spacing: 1px }
.wdsp--2 { word-spacing: 2px }
.wdsp--3 { word-spacing: 4px }
.wdsp--4 { word-spacing: 8px }
.wdsp--5 { word-spacing: 16px }
.wdsp--6 { word-spacing: 32px }
.wdsp--7 { word-spacing: 64px }
.wdsp--8 { word-spacing: 128px }
.wdsp--i { word-spacing: inherit }
.wdsp--nl { word-spacing: normal }

top↑

LETTER-SPACING

SYNTAX
# Base
	lrsp = letter-spacing

# Modifiers
	--1 = .25px
	--2 = .5px
	--3 = .75px
	--4	= 1px
	--5 = 1.25px
	--6 = 1.5px
	--7 = 1.75px
	--8	= 2px
	--n1 = -.25px
	--n2 = -.5px
	--n3 = -.75px
	--n4 = -1px
	--n5 = -1.25px
	--n6 = -1.5px
	--n7 = -1.75px
	--n8 = -2px
	--i = inherit
	--nl = normal
CLASSES
.lrsp--1 { letter-spacing: .25px }
.lrsp--2 { letter-spacing: .5px }
.lrsp--3 { letter-spacing: .75px }
.lrsp--4 { letter-spacing: 1px }
.lrsp--5 { letter-spacing: 1.25px }
.lrsp--6 { letter-spacing: 1.5px }
.lrsp--7 { letter-spacing: 1.75px }
.lrsp--8 { letter-spacing: 2px }
.lrsp--n1 { letter-spacing: -.25px }
.lrsp--n2 { letter-spacing: -.5px }
.lrsp--n3 { letter-spacing: -.75px }
.lrsp--n4 { letter-spacing: -1px }
.lrsp--n5 { letter-spacing: -1.25px }
.lrsp--n6 { letter-spacing: -1.5px }
.lrsp--n7 { letter-spacing: -1.75px }
.lrsp--n8 { letter-spacing: -2px }
.lrsp--i { letter-spacing: inherit }
.lrsp--nl { letter-spacing: normal }

top↑

WHITE-SPACE

SYNTAX
# Base
	whsp = white-space

# Modifiers
	--nl = normal
	--n = nowrap
	--pre = pre
	--prewp = pre-wrap
	--i = inherit
CLASSES
.whsp--nl { white-space: normal }
.whsp--n { white-space: nowrap }
.whsp--pre { white-space: pre }
.whsp--prewp { white-space: pre-wrap }
.whsp--i { white-space: inherit }

top↑

WORD-WRAP

SYNTAX
# Base
	wdwp = word-wrap

# Modifiers
	--brkwd = break-wordd
	--i = inherit
	--nl = normal
CLASSES
.wdwp--brkwd { word-wrap: break-word }
.wdwp--i { word-wrap: inherit }
.wdwp--nl { word-wrap: normal }

top↑

COLOR

SYNTAX
# Base
	c = color
	chvr = color:hover

# Modifiers
	--gy1 = #fafafa (grey)
	--gy2 = #ededed (grey)
	--gy3 = #dddddd (grey)
	--gy4 = #b1b1b1 (grey)
	--gy5 = #878787 (grey)
	--gy6 = #6a6a6a (grey)
	--gy7 = #4d4d4d (grey)
	--gy8 = #303030 (grey)
	--rd1 = #c6262e (red)
	--gn1 = #68b723 (green)
	--bl1 = #3689e6 (blue)
	--yl1 = #f9c440 (yellow)
	--bk1 = #000000 (black)
	--wh1 = #ffffff (white)
	--tp = transparent
	--i = inherit
CLASSES
.c--gy1 { color: #fafafa }
.c--gy2 { color: #ededed }
.c--gy3 { color: #dddddd }
.c--gy4 { color: #b1b1b1 }
.c--gy5 { color: #878787 }
.c--gy6 { color: #6a6a6a }
.c--gy7 { color: #4d4d4d }
.c--gy8 { color: #303030 }
.c--rd1 { color: #c6262e }
.c--gn1 { color: #68b723 }
.c--bl1 { color: #3689e6 }
.c--yl1 { color: #f9c440 }
.c--bk1 { color: #000000 }
.c--wh1 { color: #ffffff }
.c--tp { color: transparent }
.c--i { color: inherit }

.chvr--gy1:hover { color: #fafafa }
.chvr--gy2:hover { color: #ededed }
.chvr--gy3:hover { color: #dddddd }
.chvr--gy4:hover { color: #b1b1b1 }
.chvr--gy5:hover { color: #878787 }
.chvr--gy6:hover { color: #6a6a6a }
.chvr--gy7:hover { color: #4d4d4d }
.chvr--gy8:hover { color: #303030 }
.chvr--rd1:hover { color: #c6262e }
.chvr--gn1:hover { color: #68b723 }
.chvr--bl1:hover { color: #3689e6 }
.chvr--yl1:hover { color: #f9c440 }
.chvr--bk1:hover { color: #000000 }
.chvr--wh1:hover { color: #ffffff }
.chvr--tp:hover { color: transparent }
.chvr--i:hover { color: inherit }

top↑


FONT

FONT-FAMILY

SYNTAX
# Base
	ftfam = font-family

# Modifiers
	--sssrf =  sans-serif
	--mosp =  monospace
	--i = inherit

# Note
	Are you sure about changing the typeface using media queries?
CLASSES
.ftfam--sssrf { font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif }
.ftfam--mosp { font-family: "SFMono-Regular",Menlo,Consolas,"Lucida Console","Liberation Mono","Courier New",monospace }
.ftfam--i { font-family: inherit }

top↑

FONT-SIZE

SYNTAX
# Base
	fts = font-size

# Modifiers
	--1 = 10px
	--2 = 13px
	--3 = 16px
	--4 = 20px
	--5 = 25px
	--6 = 31px
	--7 = 39px
	--8 = 49px
	--i = inherit

# Note
	https://type-scale.com/?size=16&scale=1.250&text=The%20Awesome%20Brevis&font=Open%20Sans
CLASSES
.fts--1 { font-size: 10px }
.fts--2 { font-size: 13px }
.fts--3 { font-size: 16px }
.fts--4 { font-size: 20px }
.fts--5 { font-size: 25px }
.fts--6 { font-size: 31px }
.fts--7 { font-size: 39px }
.fts--8 { font-size: 49px }
fts--i { font-size: inherit }

top↑

FONT-WEIGHT

SYNTAX
# Base
	ftwt = font-weight

# Modifiers
	--1 =  100
	--2 =  200
	--3 =  300
	--4 =  400 (normal)
	--5 =  500
	--6 =  600
	--7 =  700 (bold)
	--8 =  800
	--i = inherit
CLASSES
.ftwt--1 { font-weight: 100 }
.ftwt--2 { font-weight: 200 }
.ftwt--3 { font-weight: 300 }
.ftwt--4 { font-weight: 400 }
.ftwt--5 { font-weight: 500 }
.ftwt--6 { font-weight: 600 }
.ftwt--7 { font-weight: 700 } 
.ftwt--8 { font-weight: 800 }
.ftwt--i { font-weight: inherit }

top↑

FONT-STYLE

SYNTAX
# Base
	ftst = font-style

# Modifiers
	--ic = italic
	--nl = normal
	--i = inherit
CLASSES
.ftst--ic { font-style: italic }
.ftst--nl { font-style: normal }
.ftst--i { font-style: inherit }

top↑


POINTER EVENTS

POINTER EVENTS

SYNTAX
# Base
	ptres = pointer-events

# Modifiers
	--a = auto
	--n = none
CLASSES
.ptres--a { pointer-events: auto }
.ptres--n { pointer-events: none }

top↑


MISCELLANEOUS

HIDE CONTENT (A11Y)

SYNTAX
# Base
	hidct = hide content
CLASSES
.hidct {
	position: absolute;
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(0, 0, 0, 0);
}

top↑


THE NAMING CONVENTION

The CSS selector syntax is made of two or three parts: base--modifier-media. The last part - media - is optional, since it controls the media query extension. The naming convention used by Brevis for its base and modifier is short, simple and logical. It follows just two rules.

  1. If the CSS property name is made of one word, Brevis uses its first letter. Like display becomes d. If the first letter is taken, Brevis uses the first and last letter of the word, or the first few letters of it. Like flex becomes fx and position becomes pos. If the first and last letters are taken, Brevis adds one or more letters from the middle of the word. Like break becomes brk.

  2. If the CSS property name is made of two or more words, Brevis uses the existing abbreviation from each word and join them. Like margin-top becomes mt. If there's no abbreviation or it's missing for a word, Brevis applies rules #1 and join them. Like flex-basis becomes fxbs.

Exceptions exist when there's a well known/better abbreviation. Like:

absolute = abs
background = bg
center = ctr
clear = clr
z-index = z (the exception here is z-index being treated as one word)

MODIFIERS

A modifier is the value of a property, and it's identified by double hyphens -- followed by the abbreviation. For example:

.txtdec--n = { text-decoration: none }

The above property has the modifier --n with a respectively value of none.

The modifiers follow the same naming convention stated for the base, with two additions.

  1. A modifier can have the same abbreviation as the base, as long as the meaning of the abbreviation is the same or very similar. For example --t, --fx and --v are respectively top, flex and visibility|visible for both base and modifier.

  2. A modifier can group values within similar context or meaning. For example, the modifier --n represents no, none, nowrap or no-repeat as value.

Most properties with numerical values have modifiers scaling from 1 to 8. For example:

.h--0 { height: 0 }
.h--1 { height: 1px }
.h--2 { height: 8px }
.h--3 { height: 16px }
.h--4 { height: 32px }
.h--5 { height: 64px }
.h--6 { height: 128px }
.h--7 { height: 256px }
.h--8 { height: 512px }

The 0 is not part of any scale, but it's presented when appropriate.

MEDIA QUERIES

You can create responsive websites using the media queries extension. The media extension is identified by a single hyphen -, followed by s, m or l. Respectively targeting small, medium or large devices. The extensions are available for all classes. And that's why we call selector-first design, where each selector is responsive. This approach allows you to have a very granular responsive control. The breakpoints are:

-l = @media (max-width: 1280px)
-m = @media (max-width: 840px)
-s = @media (max-width: 400px)

For exmaple .maw--6-l, .w--50p-m and .brrad--0-s are translated into:

@media (max-width: 1280px) {
	.maw--6-l { max-width: 256px }
}

@media (max-width: 840px) {
	.w--50p-m { width: 50% }
}

@media (max-width: 400px) {
	.brrad--0-s { border-radius: 0 }
}

The media queries don't follow the naming convention above, because there are only three extensions -s, -m and -l, which are universally recognised as a representation of the breakpoints. So, we stick with them.

If you want to learn more about it, take a look at brevis.css source file and see how the naming convention comes to live.

top↑


SCALE PATTERN

Brevis uses three 8pt scales for properties with numerical values:

8px,16px,24px,32px,40px,48px,56px,64px

Is used by top, right, bottom, left, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom and padding-left.

1px,2px,4px,8px,16px,32px,64px,128px

Is used by z-index, border-spacing, border-width, border-radius, text-indent and word-spacing.

1px,8px,16px,32px,64px,128px,256px,512px

Is used by flex-basis, width, min-width, max-width, height, min-height and max-height.

Order, opacity, z-index, line-height, letter-spacing, font-size and font-weight properties use their own custom scale.

Note that some the scales can have negative values when the numerical modifier is preceded by --n. For example:

.mt--n2 { margin-top: -16px }

top↑


COLOUR PALETTE

Colour is a very opinionated subject, and because of that, Brevis has a minimal palette. The current palettes are grey and contextual.

Grey Scale Contextual Colours
#fafafa gy1 = #fafafa #c8102e rd1 = #c8102e
#ededed gy2 = #ededed #006eb6 bl1 = #006eb6
#dddddd gy3 = #dddddd #009f4d gn1 = #009f4d
#b1b1b1 gy4 = #b1b1b1 #ffc428 yl1 = #ffc428
#878787 gy5 = #878787 #000000 bk1 = #000000
#6a6a6a gy6 = #6a6a6a #ffffff wh1 = #ffffff
#4d4d4d gy7 = #4d4d4d
#303030 gy8 = #303030

The colours follow the naming convetion. Note that their scale name is set to 1. So, any additional colour can use the naming convention. Example, if you want to extend the red colour, you start creating rd2, rd3 and so on.

top↑