Class Categories

Font Size / Align
Font Color
Background
Border
Positioning
Padding
Margin
Expand
Section

Default Font Size

(colors will match theme)

H1

H2

H3

H4

H5
H6

paragraph

link

button

Extra Font Sizes

(fs-8 to fs-50)

.fs-8

.fs-10

.fs-20

.fs-30

.fs-40

.fs-50

Extra Font Size

Media Query

Sizes range from fs-8 to fs-50 (media query - size specific: small, medium, large, xlarge and xxlarge, resize to view)

.fs-12, .medium-fs-18, .large-fs-30, .xlarge-fs-40, .xxlarge-fs-50

Font Weight

NOTE: only works with solidnav themes (blue, red, darkgray, lightgray)

fw-thin

fw-light

w-normal

fw-medium

fw-bold

Font Style/ Decoration

.bold

.no-decoration

.underline

.italic

Font Align/ Transform

.text-left

.text-right

.text-center

.text-justify

.uppercase

Font Align - Media Query

(media query - size specific: small, medium, large, xlarge and xxlarge, resize to view)

Example:
  • small-only-text-left
  • small-text-left

.small-only-text-left
.text-right

.small-text-left
.medium-text-center
.large-text-center
.xlarge-text-center
.xxlarge-text-center

.small-only-text-right
- uses default left alignment

.small-text-right
.medium-text-left
.large-text-left
.xlarge-text-left
.xxlarge-text-left

.small-only-text-center
- uses default left alignment

.small-text-center
.medium-text-left
.large-text-left
.xlarge-text-left
.xxlarge-text-left

.small-only-text-justify
- uses default left alignment

.small-text-justify
.medium-text-left
.large-text-left
.xlarge-text-left
.xxlarge-text-left

Font color

.color-ge

.color-maytag

.color-whirlpool

.color-kitchenaid

.color-jenn-air

.color-frigidaire

.color-electrolux

.color-bosch

.color-dcs

.color-samsung

.color-lg

.color-ashley

.color-coaster

.color-primary

.color-secondary

.color-light-gray or .color-gray20

.color-gray

.color-dark-gray or .dark-gray70

Font color - Gray (not available for all themes yet)

.color-gray10

.color-gray20

.color-gray30

.color-gray40

.color-gray50

.color-gray60

.color-gray70

.color-gray80

.color-gray90

Background color

.bg-ge

.bg-maytag

.bg-whirlpool

.bg-kitchenaid

.bg-jenn-air

.bg-frigidaire

.bg-electrolux

.bg-bosch

.bg-dcs

.bg-samsung

.bg-lg

.bg-ashley

.bg-coaster

.bg-primary

.bg-secondary

.bg-light-gray

.bg-gray

.bg-dark-gray

Background color - Gray (not available for all themes yet)

.bg-gray10

.bg-gray20

.bg-gray30

.bg-gray40

.bg-gray50

.bg-gray60

.bg-gray70

.bg-gray80

.bg-gray90

Borders

(border-white & border-gray variations - not available on all themes)

.border-white

.border-gray10

.border-gray20

.border-gray30

.border-gray40

.border-gray50

.border-gray60

.border-gray70

.border-gray80

.border-gray90

.border-black

.border-ge

.border-maytag

.border-whirlpool

.border-kitchenaid

.border-jenn-air

.border-frigidaire

.border-electrolux

.border-bosch

.border-dcs

.border-samsung

.border-lg

.border-ashley

.border-coaster

.border-red

.border-primary

.border-secondary

.border-light-gray

.border-gray

.border-dark-gray

Positioning

usually most div container are relative by default but you can add the class .relative, if not.

.absolute

.static

.vcenter (display: inline-block;vertical-align: middle;width: 100%;)

.vposition-parent

.absolute

.static

Padding Classes

(all sides, p-0 to p-50)

.p-0

.p-10

.p-20

.p-30

.p-40

.p-50

Padding Classes

(specific sides, p-top-0 to p-top-50)

.p-top-50

.p-bottom-50

.p-left-50

.p-right-50

Padding Classes - Media Query

(media query - size specific: small, medium, large, xlarge and xxlarge, resize to view)

Example:
  • small-p-0 to small-p-50
  • small-p-top-0 to small-p-top-50
  • small-p-bottom-0 to small-p-bottom-50
  • small-p-left-0 to small-p-left-50
  • small-p-right-0 to small-p-right-50

.small-p-50
.medium-p-30
.large-p-10
.xlarge-p-5
.xxlarge-p-10

.small-p-top-50
.medium-p-top-30
.large-p-top-10
.xlarge-p-top-5
.xxlarge-p-top-10

.small-p-bottom-50
.medium-p-bottom-30
.large-p-bottom-10
.xlarge-p-bottom-5
.xxlarge-p-bottom-10

.small-p-left-50
.medium-p-left-30
.large-p-left-10
.xlarge-p-left-5
.xxlarge-p-left-10

.small-p-right-50
.medium-p-right-30
.large-p-right-10
.xlarge-p-right-5
.xxlarge-p-right-10

Margin Classes

(all sides, m-0 to m-50)

.m-0

.m-10

.m-20

.m-30

.m-40

.m-50

Margin Classes

(specific sides, m-top-0 to m-top-50)

.m-top-50

.m-bottom-50

.m-left-50

.m-right-50

Margin Classes - Media Query

(media query - size specific: small, medium, large, xlarge and xxlarge, resize to view)

Example:
  • small-m-0 to small-m-50
  • small-m-top-0 to small-m-top-50
  • small-m-bottom-0 to small-m-bottom-50
  • small-m-left-0 to small-m-left-50
  • small-m-right-0 to small-m-right-50

.small-m-50
.medium-m-30
.large-m-10
.xlarge-m-5
.xxlarge-m-50

.small-m-top-50
.medium-m-top-30
.large-m-top-10
.xlarge-m-top-5
.xxlarge-m-top-50

.small-m-bottom-50
.medium-m-bottom-30
.large-m-bottom-10
.xlarge-m-bottom-5
.xxlarge-m-bottom-50

.small-m-left-50
.medium-m-left-30
.large-m-left-10
.xlarge-m-left-5
.xxlarge-m-left-50

.small-m-right-50
.medium-m-right-30
.large-m-right-10
.xlarge-m-right-5
.xxlarge-m-right-50

Expand

Example:
 <div class="expand"> <div class="row"> <div class="medium-12 columns"> <p>content</p> </div> </div> </div>

content content content content content content content content content content

content content content content content content content content content content

Section (specific padding top & bottom)

Example:
 <div class="section tiny"> <div class="row"> <div class="medium-12 columns"> <p>contect</p> </div> </div> </div>

.section.tiny

.section.small

.section

.section.large

.section.xlarge

.section.xxlarge