Documentation

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, 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-break, word-wrap, color, color:hover
Font	font-family, font-size, font-weight, font-style
Pointer-events	pointer-events

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↑

RIGHT

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

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

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

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

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

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

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

SYNTAX

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

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px
	--n1 = -1px
	--n2 = -2px
	--n3 = -4px
	--n4 = -8px
	--n5 = -16px
	--n6 = -32px
	--n7 = -64px
	--n8 = -128px
	--a = auto

CLASSES

.m--0 { margin: 0 }
.m--1 { margin: 1px }
.m--2 { margin: 2px }
.m--3 { margin: 4px }
.m--4 { margin: 8px }
.m--5 { margin: 16px }
.m--6 { margin: 32px }
.m--7 { margin: 64px }
.m--8 { margin: 128px }
.m--n1 { margin: -1px }
.m--n2 { margin: -2px }
.m--n3 { margin: -4px }
.m--n4 { margin: -8px }
.m--n5 { margin: -16px }
.m--n6 { margin: -32px }
.m--n7 { margin: -64px }
.m--n8 { margin: -128px }
.m--a { margin: auto }

top↑

MARGIN-TOP

SYNTAX

# Base
	mt = margin-top

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px
	--n1 = -1px
	--n2 = -2px
	--n3 = -4px
	--n4 = -8px
	--n5 = -16px
	--n6 = -32px
	--n7 = -64px
	--n8 = -128px
	--a = auto

CLASSES

.mt--0 { margin-top: 0 }
.mt--1 { margin-top: 1px }
.mt--2 { margin-top: 2px }
.mt--3 { margin-top: 4px }
.mt--4 { margin-top: 8px }
.mt--5 { margin-top: 16px }
.mt--6 { margin-top: 32px }
.mt--7 { margin-top: 64px }
.mt--8 { margin-top: 128px }
.mt--n1 { margin-top: -1px }
.mt--n2 { margin-top: -2px }
.mt--n3 { margin-top: -4px }
.mt--n4 { margin-top: -8px }
.mt--n5 { margin-top: -16px }
.mt--n6 { margin-top: -32px }
.mt--n7 { margin-top: -64px }
.mt--n8 { margin-top: -128px }
.mt--a { margin-top: auto }

top↑

MARGIN-RIGHT

SYNTAX

# Base
	mr = margin-right

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px
	--n1 = -1px
	--n2 = -2px
	--n3 = -4px
	--n4 = -8px
	--n5 = -16px
	--n6 = -32px
	--n7 = -64px
	--n8 = -128px	
	--a = auto

CLASSES

.mr--0 { margin-right: 0 }
.mr--1 { margin-right: 1px }
.mr--2 { margin-right: 2px }
.mr--3 { margin-right: 4px }
.mr--4 { margin-right: 8px }
.mr--5 { margin-right: 16px }
.mr--6 { margin-right: 32px }
.mr--7 { margin-right: 64px }
.mr--8 { margin-right: 128px }
.mr--n1 { margin-right: -1px }
.mr--n2 { margin-right: -2px }
.mr--n3 { margin-right: -4px }
.mr--n4 { margin-right: -8px }
.mr--n5 { margin-right: -16px }
.mr--n6 { margin-right: -32px }
.mr--n7 { margin-right: -64px }
.mr--n8 { margin-right: -128px }
.mr--a { margin-right: auto }

top↑

MARGIN-BOTTOM

SYNTAX

# Base
	mb = margin-bottom

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px
	--n1 = -1px
	--n2 = -2px
	--n3 = -4px
	--n4 = -8px
	--n5 = -16px
	--n6 = -32px
	--n7 = -64px
	--n8 = -128px
	--a = auto

CLASSES

.mb--0 { margin-bottom: 0 }
.mb--1 { margin-bottom: 1px }
.mb--2 { margin-bottom: 2px }
.mb--3 { margin-bottom: 4px }
.mb--4 { margin-bottom: 8px }
.mb--5 { margin-bottom: 16px }
.mb--6 { margin-bottom: 32px }
.mb--7 { margin-bottom: 64px }
.mb--8 { margin-bottom: 128px }
.mb--n1 { margin-bottom: -1px }
.mb--n2 { margin-bottom: -2px }
.mb--n3 { margin-bottom: -4px }
.mb--n4 { margin-bottom: -8px }
.mb--n5 { margin-bottom: -16px }
.mb--n6 { margin-bottom: -32px }
.mb--n7 { margin-bottom: -64px }
.mb--n8 { margin-bottom: -128px }
.mb--a { margin-bottom: auto }

top↑

MARGIN-LEFT

SYNTAX

# Base
	ml = margin-left

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px
	--n1 = -1px
	--n2 = -2px
	--n3 = -4px
	--n4 = -8px
	--n5 = -16px
	--n6 = -32px
	--n7 = -64px
	--n8 = -128px
	--a = auto

CLASSES

.ml--0 { margin-left: 0 }
.ml--0 { margin-left: 0 }
.ml--1 { margin-left: 1px }
.ml--2 { margin-left: 2px }
.ml--3 { margin-left: 4px }
.ml--4 { margin-left: 8px }
.ml--5 { margin-left: 16px }
.ml--6 { margin-left: 32px }
.ml--7 { margin-left: 64px }
.ml--8 { margin-left: 128px }
.ml--n1 { margin-left: -1px }
.ml--n2 { margin-left: -2px }
.ml--n3 { margin-left: -4px }
.ml--n4 { margin-left: -8px }
.ml--n5 { margin-left: -16px }
.ml--n6 { margin-left: -32px }
.ml--n7 { margin-left: -64px }
.ml--n8 { margin-left: -128px }
.ml--a { margin-left: auto }

top↑

MARGIN-Y

SYNTAX

# Base
	my = margin-top; margin-bottom

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px
	--n1 = -1px
	--n2 = -2px
	--n3 = -4px
	--n4 = -8px
	--n5 = -16px
	--n6 = -32px
	--n7 = -64px
	--n8 = -128px

CLASSES

.my--0 { margin-top: 0; margin-bottom: 0 }
.my--1 { margin-top: 1px; margin-bottom: 1px }
.my--2 { margin-top: 2px; margin-bottom: 2px }
.my--3 { margin-top: 4px; margin-bottom: 4px }
.my--4 { margin-top: 8px; margin-bottom: 8px }
.my--5 { margin-top: 16px; margin-bottom: 16px }
.my--6 { margin-top: 32px; margin-bottom: 32px }
.my--7 { margin-top: 64px; margin-bottom: 64px }
.my--8 { margin-top: 128px; margin-bottom: 128px }
.my--n1 { margin-top: -1px; margin-bottom: -1px }
.my--n2 { margin-top: -2px; margin-bottom: -2px }
.my--n3 { margin-top: -4px; margin-bottom: -4px }
.my--n4 { margin-top: -8px; margin-bottom: -8px }
.my--n5 { margin-top: -16px; margin-bottom: -16px }
.my--n6 { margin-top: -32px; margin-bottom: -32px }
.my--n7 { margin-top: -64px; margin-bottom: -64px }
.my--n8 { margin-top: -128px; margin-bottom: -128px }

top↑

MARGIN-X

SYNTAX

# Base
	mx = margin-right; margin-left

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px
	--n1 = -1px
	--n2 = -2px
	--n3 = -4px
	--n4 = -8px
	--n5 = -16px
	--n6 = -32px
	--n7 = -64px
	--n8 = -128px
	--a = auto

CLASSES

.mx--0 { margin-right: 0; margin-left: 0 }
.mx--1 { margin-right: 1px; margin-left: 1px }
.mx--2 { margin-right: 2px; margin-left: 2px }
.mx--3 { margin-right: 4px; margin-left: 4px }
.mx--4 { margin-right: 8px; margin-left: 8px }
.mx--5 { margin-right: 16px; margin-left: 16px }
.mx--6 { margin-right: 32px; margin-left: 32px }
.mx--7 { margin-right: 64px; margin-left: 64px }
.mx--8 { margin-right: 128px; margin-left: 128px }
.mx--n1 { margin-right: -1px; margin-left: -1px }
.mx--n2 { margin-right: -2px; margin-left: -2px }
.mx--n3 { margin-right: -4px; margin-left: -4px }
.mx--n4 { margin-right: -8px; margin-left: -8px }
.mx--n5 { margin-right: -16px; margin-left: -16px }
.mx--n6 { margin-right: -32px; margin-left: -32px }
.mx--n7 { margin-right: -64px; margin-left: -64px }
.mx--n8 { margin-right: -128px; margin-left: -128px }
.mx--a { margin-right: auto; margin-left: auto }

top↑

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

SYNTAX

# Base
	br = border (shorthand for the border-width:* and border-style:solid properties)

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px

CLASSES

.br--0 { border-width: 0; border-style: none }
.br--1 { border-width: 1px; border-style: solid }
.br--2 { border-width: 2px; border-style: solid }
.br--3 { border-width: 4px; border-style: solid }
.br--4 { border-width: 8px; border-style: solid }
.br--5 { border-width: 16px; border-style: solid }
.br--6 { border-width: 32px; border-style: solid }
.br--7 { border-width: 64px; border-style: solid }
.br--8 { border-width: 128px; border-style: solid }

top↑

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
	bryrrad = border-top-right-radius, border-bottom-right-radius
	brylrad = border-top-left-radius, 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 }
.bryrrad--0 { border-top-right-radius: 0; border-bottom-right-radius: 0 }
.brylrad--0 { border-top-left-radius: 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 }
.bryrrad--1 { border-top-right-radius: 1px; border-bottom-right-radius: 1px }
.brylrad--1 { border-top-left-radius: 1px; 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 }
.bryrrad--2 { border-top-right-radius: 2px; border-bottom-right-radius: 2px }
.brylrad--2 { border-top-left-radius: 2px; 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 }
.bryrrad--3 { border-top-right-radius: 4px; border-bottom-right-radius: 4px }
.brylrad--3 { border-top-left-radius: 4px; 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 }
.bryrrad--4 { border-top-right-radius: 8px; border-bottom-right-radius: 8px }
.brylrad--4 { border-top-left-radius: 8px; 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 }
.bryrrad--5 { border-top-right-radius: 16px; border-bottom-right-radius: 16px }
.brylrad--5 { border-top-left-radius: 16px; 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 }
.bryrrad--6 { border-top-right-radius: 32px; border-bottom-right-radius: 32px }
.brylrad--6 { border-top-left-radius: 32px; 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 }
.bryrrad--7 { border-top-right-radius: 64px; border-bottom-right-radius: 64px }
.brylrad--7 { border-top-left-radius: 64px; 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 }
.bryrrad--8 { border-top-right-radius: 128px; border-bottom-right-radius: 128px }
.brylrad--8 { border-top-left-radius: 128px; 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

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

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

SYNTAX

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

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px

CLASSES

.p--0 { padding: 0 }
.p--1 { padding: 1px }
.p--2 { padding: 2px }
.p--3 { padding: 4px }
.p--4 { padding: 8px }
.p--5 { padding: 16px }
.p--6 { padding: 32px }
.p--7 { padding: 64px }
.p--8 { padding: 128px }

top↑

PADDING-TOP

SYNTAX

# Base
	pt = padding-top

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px

CLASSES

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

top↑

PADDING-RIGHT

SYNTAX

# Base
	pr = padding-right

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px

CLASSES

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

top↑

PADDING-BOTTOM

SYNTAX

# Base
	pb = padding-bottom

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px

CLASSES

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

top↑

PADDING-LEFT

SYNTAX

# Base
	pl = padding-left

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px

CLASSES

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

top↑

PADDING-Y

SYNTAX

# Base
	py = padding-top; padding-bottom

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px

CLASSES

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

top↑

PADDING-X

SYNTAX

# Base
	px = padding-right; padding-left

# Modifiers
	--0 = 0
	--1 = 1px
	--2 = 2px
	--3 = 4px
	--4 = 8px
	--5 = 16px
	--6 = 32px
	--7 = 64px
	--8 = 128px

CLASSES

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

top↑

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
	--i = inherit

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 }
.w--i { width: inherit }

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
	--i = inherit

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 }
.miw--i { min-width: inherit }

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
	--i = inherit

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 }
.maw--i { max-width: inherit }

top↑

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
	--i = inherit

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 }
.h--i { height: inherit }

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
	--i = inherit

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 }
.mih--i { min-height: inherit }

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
	--i = inherit

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 }
.mah--i { max-height: inherit }

top↑

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

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

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-BREAK

SYNTAX

# Base
	wdbrk = word-break

# Modifiers
	--nl = normal
	--kpal = keep-all
	--brkal = break-all

CLASSES

.wdbrk--nl { word-break: normal }
.wdbrk--kpal { word-break: keep-all }
.wdbrk--brkal { word-break: break-all }

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
	Based on https://type-scale.com/?size=16&scale=1.250&text=The%20Awesome%20Brevis&font=Open%20Sans

CLASSES

.fts--1 { font-size: 13px }
.fts--2 { font-size: 16px }
.fts--3 { font-size: 20px }
.fts--4 { font-size: 25px }
.fts--5 { font-size: 31px }
.fts--6 { font-size: 39px }
.fts--7 { font-size: 49px }
.fts--8 { font-size: 61px }
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

SYNTAX

# Base
	ptres = pointer-events

# Modifiers
	--a = auto
	--n = none

CLASSES

.ptres--a { pointer-events: auto }
.ptres--n { pointer-events: none }

top↑

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.

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.
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.

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.
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 for grey and contextual colours.

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

The colours also follow the naming convention. However, the contextual colours have a plus. Note that their names end with the number one. So that, 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↑