Please ensure Javascript is enabled for purposes of website accessibility

Menu
Ver 1.0 - 03 02 2019

colors

h1 heading

h1.clr-1

h1.clr-2

h1.clr-3

hr

bkg-1

bkg-2

bkg-2

div.bkg-1

.light Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium.

div.bkg-2

.light Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium.

div.bkg-3

.light Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium.

div.bkg-1.ptrn

.light Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium.

div.bkg-2.ptrn

.light Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium.

div.bkg-3.ptrn

.light Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium.

Typography

p Lorem ipsum dolor sit amet, EM consectetur STRONG adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium. Nullam sed nisi sagittis, volutpat arcu sed, semper nibh. Cras ac placerat nisi.

p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium. Nullam sed nisi sagittis, volutpat arcu sed, semper nibh. Cras ac placerat nisi.

Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin' caught in the rain.)Steve Jobs

p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium. Nullam sed nisi sagittis, volutpat arcu sed, semper nibh. Cras ac placerat nisi.

p.lead headFusce dictum elit leo, non convallis felis placerat eu. In placerat ex at imperdiet ullamcorper.

p Lorem ipsum dolor sit amet, EM consectetur STRONG adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium. Nullam sed nisi sagittis, volutpat arcu sed, semper nibh. Cras ac placerat nisi.

.light p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium. Nullam sed nisi sagittis, volutpat arcu sed, semper nibh. Cras ac placerat nisi.

.light blockquote Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin' caught in the rain.)Steve Jobs

.light p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque ante in neque sollicitudin pretium. Nullam sed nisi sagittis, volutpat arcu sed, semper nibh. Cras ac placerat nisi.

.light p.lead headFusce dictum elit leo, non convallis felis placerat eu. In placerat ex at imperdiet ullamcorper.

h1, .h1 Heading

h2, .h2 Heading

h3, .h3 Heading

h4, .h4 Heading

h5, .h5 Heading
h6, .h6 Heading

h1, .h1 Heading

h2, .h2 Heading

h3, .h3 Heading

h4, .h4 Heading

h5, .h5 Heading
h6, .h6 Heading

Heading .head-2

Heading .head-2

Heading .head-2

Heading .head-2

Heading .head-2
Heading .head-2

Heading .head-2

Heading .head-2

Heading .head-2

Heading .head-2

Heading .head-2
Heading .head-2

Heading .head-3

Heading .head-3

Heading .head-3

Heading .head-3

Heading .head-3
Heading .head-3

Heading .head-3

Heading .head-3

Heading .head-3

Heading .head-3

Heading .head-3
Heading .head-3

Lists

Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.

  • ul li
  • Replenish Muscles
  • Anti-Oxidants(Anti-Aging)
  • Good Source of Fiber

Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.

Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.

  • ul.lead
  • Replenish Muscles
  • Anti-Oxidants(Anti-Aging)
  • Good Source of Fiber

Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.

Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.

  • .light ul li
  • Replenish Muscles
  • Anti-Oxidants(Anti-Aging)
  • Good Source of Fiber

Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.

Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.

  • .light ul.lead
  • Replenish Muscles
  • Anti-Oxidants(Anti-Aging)
  • Good Source of Fiber

Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.

Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.

  1. ol li
  2. Replenish Muscles
  3. Anti-Oxidants(Anti-Aging)
  4. Good Source of Fiber

Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.

Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.

  1. ol.lead
  2. Replenish Muscles
  3. Anti-Oxidants(Anti-Aging)
  4. Good Source of Fiber

Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.

Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.

  1. .light ol li
  2. Replenish Muscles
  3. Anti-Oxidants(Anti-Aging)
  4. Good Source of Fiber

Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.

Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.

  1. .light ol.lead
  2. Replenish Muscles
  3. Anti-Oxidants(Anti-Aging)
  4. Good Source of Fiber

Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.

Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.

  1. ol.num-list
  2. Curabitur id fringilla diam, eget finibus magna
  3. Curabitur id fringilla diam, eget finibus magna
  4. Curabitur id fringilla diam, eget finibus magna

Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.

Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.

  1. ol.lead.num-list
  2. Curabitur id fringilla diam, eget finibus magna
  3. Curabitur id fringilla diam, eget finibus magna
  4. Curabitur id fringilla diam, eget finibus magna

Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.

Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.

  1. ol.lead.num-list
  2. Curabitur id fringilla diam, eget finibus magna
  3. Curabitur id fringilla diam, eget finibus magna
  4. Curabitur id fringilla diam, eget finibus magna

Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.

Aliquam posuere augue et sapien consequat iaculis. Nunc aliquet dapibus sodales.

  1. ol.lead.num-list
  2. Curabitur id fringilla diam, eget finibus magna
  3. Curabitur id fringilla diam, eget finibus magna
  4. Curabitur id fringilla diam, eget finibus magna

Curabitur id fringilla diam, eget finibus magna. Sed porttitor nisi sed facilisis porta. Phasellus congue ultrices.

Buttons

button Primary Secondary Success Alert Warning
White
button Primary Secondary Success Alert Warning
White
So Tiny So Small So Basic So Large Such Expand Wow, Small Expand

Fields & CF7 Forms

Icons Using Font Awesome

Pseudo Icons Using Font Awesome

  • Login
  • TPS Reports
  • Solid Award
  • Regular Award
  • Light Award
  • Brand Icon

Helpers

Spacing Helpers

Image Helper

Image Cover

Basic Imag no helpers

no class

Quickly set PICTURE tag as cover. Container has set height

.img-cover -> picture -> img

Quickly set IMG tag as cover. Container has set height

.img-cover.picture-cover -> img

Overlay Effects

Overlay over image

This is a quick overylay centered vertically with transparent color

.img-cover.relavite -> .box-over

Overlay over image padding example

This is a quick overylay centered vertically with transparent color

.img-cover.relavite -> .box-over.spv.sph -> .h100

Overlay made with setting PICTURE as absolute. Height is defined by the childs padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Overlay made with setting PICTURE as absolute. Height is defined by the childs padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.