Website Classes Template

Positioning
Sections
Text Alignments
Animations
Colors

Positioning

Display type

display-block
flex-vertical
flex-horizontal
inline-block

Flex alignment

flex-vertical-stretch-center
flex-vertical-stretch-bottom
flex-vertical-left-top
flex-vertical-center-top
flex-vertical-right-top
flex-vertical-full-center
flex-vertical-stretch-space-between
flex-vertical-stretch-space-around
flex-horizontal-space-between-stretch
flex-horizontal-space-around-stretch
flex-horizontal-left-top
flex-horizontal-left-center
flex-horizontal-left-bottom
flex-horizontal-left-stretch
flex-horizontal-center-stretch
flex-horizontal-right-stretch
flex-horizontal-full-center
order-first
order-last

Position styles

position-relative
position-static
position-absolute

Floats

float-left
float-right
clear-both

Display type tablet

tablet-display-block
tablet-flex-vertical
tablet-flex-horizontal
tablet-inline-block
tablet-display-none

Flex alignment tablet

tablet-order-first
tablet-flex-vertical-stretch-top
tablet-flex-vertical-stretch-center
tablet-flex-vertical-stretch-bottom
tablet-flex-vertical-left-top
tablet-flex-vertical-center-top
tablet-flex-vertical-right-top
tablet-flex-vertical-full-center
tablet-flex-horizontal-left-top
tablet-flex-horizontal-left-center
tablet-flex-horizontal-left-bottom
tablet-flex-horizontal-left-stretch
tablet-flex-horizontal-center-stretch
tablet-flex-horizontal-right-stretch
tablet-flex-horizontal-full-center
tablet-order-first

Position styles tablet

tablet-position-relative
tablet-position-static
tablet-position-absolute

Floats tablet

tablet-float-left
tablet-float-right
tablet-clear-both

Display type mobile landscape

landscape-display-block
landscape-flex-vertical
landscape-flex-horizontal
landscape-inline-block
landscape-display-none

Flex alignment mobile landscape (sm)

landscape-order-last
landscape-flex-vertical-stretch-top
landscape-flex-vertical-stretch-center
landscape-flex-vertical-stretch-bottom
landscape-flex-vertical-left-top
landscape-flex-vertical-center-top
landscape-flex-vertical-right-top
landscape-flex-vertical-full-center
landscape-flex-horizontal-left-top
landscape-flex-horizontal-left-center
landscape-flex-horizontal-left-bottom
landscape-flex-horizontal-left-stretch
landscape-flex-horizontal-center-stretch
landscape-flex-horizontal-right-stretch
landscape-flex-horizontal-full-center
landscape-order-first

Position styles mobile landscape

landscape-position-relative
landscape-position-static
landscape-position-static

Floats mobile landscape

landscape-float-left
landscape-float-right
landscape-clear-both

Display type mobile portrait

mobile-display-block
mobile-flex-vertical
mobile-flex-horizontal
mobile-inline-block
mobile-display-none

Flex alignment mobile portrait

mobile-order-last
mobile-flex-vertical-left-top
mobile-flex-vertical-stretch-center
mobile-flex-vertical-stretch-bottom
mobile-flex-vertical-center-top
mobile-flex-vertical-right-top
mobile-flex-vertical-full-center
mobile-flex-horizontal-left-top
mobile-flex-horizontal-left-center
mobile-flex-horizontal-left-bottom
mobile-flex-horizontal-left-stretch
mobile-flex-horizontal-center-stretch
mobile-flex-horizontal-right-stretch
mobile-flex-horizontal-full-center
mobile-order-first

Position styles mobile portrait

mobile-position-relative
mobile-position-static
mobile-position-absolute

Floats mobile portrait

mobile-float-left
mobile-float-right
mobile-clear-both

Other positioning styles

Sections

Containers

container-slim
container-wide
screen-container

Text Alignments

Alignment styles

text-center
text-left
text-right
text-justify

Alignment styles tablet

tablet-text-center
tablet-text-left
tablet-text-right
tablet-text-justify

Alingment styles mobile landscape

landscape-text-center
landscape-text-left
landscape-text-right
landscape-text-justify

Alingment styles mobile portrait

mobile-text-center
mobile-text-left
mobile-text-right
mobile-text-justify

Animations

"In" animations

Slide

slide-left
slide-right
slide-top
slide-bottom

Fade

fade-in

Zoom

zoom-in
zoom-out

Load animations

Slide

load-slide-left
load-slide-right
load-slide-top
load-slide-bottom

Fade

load-fade-in

Other animations

Toggler

toggler-container close open toggler-content

Colors

Background colors

Add here the background color classes for the project you'll be building.

dark_bg

canvas_bg

white_bg

orange_bg

digital-orange_bg

pixel-pumpkin_bg

Text colors

Add here the text color classes for the project you'll be building.

dark_text

canvas_text

white_text

orange_text

digital-orange_text

pixel-pumpkin_text