Client First - Version 1.0

Style Guide

This Style Guide is a set of guidelines and strategies created to help consistency and clarity around the website development.

Structure Classes

• page-wrapper
• full-page-height
• main-wrapper
• new-section
• space-section
• grid
  • 2-col-grid
  • 3-col-grid
  • 2-and-3-grid
  • 3-and-2-grid

Visibility

• hide-from-tablet
• hide-from-landscape
• hide-from-portrait
• show-from-tablet
• show-from-landscape
• show-from-portrait
• container
• new-container-small
• new-container-medium
• new-container-large
• container-global

Buttons

• button-fill
  • Button Text
• button-outline
  • Button Text
• button-text
  • Button Text
• wp-buttons

Spacers

• space-0rem
• space-0,5rem
• space-1rem
• space-1,5rem
• space-2rem
• space-2,5rem
• space-3rem
• space-3,5rem
• space-4rem
• space-4,5rem
• space-5rem
• space-5,5rem
• space-6rem
• space-6,5rem
• space-7rem
• space-7,5rem
• space-8rem
• space-8,5rem
• space-9rem
• space-9,5rem
• space-1rem

Headings

H1

Oh, hi , Marty. I didn't hear you come in.

H2

Oh, hi , Marty. I didn't hear you come in. Fascinating device, this video unit.

H3

Oh, hi , Marty. I didn't hear you come in. Fascinating device, this video unit. Well, this is a radiation suit.

H4

Oh, hi , Marty. I didn't hear you come in. Fascinating device, this video unit. George. Well, this is a radiation suit. That's Calvin Klein.

H5

Oh, hi , Marty. I didn't hear you come in. Fascinating device, this video unit. George. Well, this is a radiation suit. That's Calvin Klein, oh my god, he's a dream.

H6

Oh, hi , Marty. I didn't hear you come in. Fascinating device, this video unit. George. Well, this is a radiation suit. That's Calvin Klein, my god has it been that long.

Custom headings

• custom-label-intro-block
  • Oh, hi , Marty. I didn't hear you come in.
• custom-tag-heading
  • Oh, hi , Marty. I didn't hear you come in.

Fonts

• Font Family - Flexa

  • font-flexa-thin
  • Here's to the crazy ones...
  • font-flexa-regular
  • Here's to the crazy ones...
  • font-flexa-bold
  • Here's to the crazy ones...

• Font Family - America

  • font-america-regular
  • Here's to the crazy ones...
  • font-america-bold
  • Here's to the crazy ones...

• Font Family - America Mono

  • font-americaMono-regular
  • Here's to the crazy ones...
  • font-americaMono-bold
  • Here's to the crazy ones...

Text Color

• text-color-black
  • This is a placeholder for the text color
• text-color-white
  • This is a placeholder for the text color
• text-color-blue-jean
  • This is a placeholder for the text color
• text-color-blue-soft
  • This is a placeholder for the text color
• text-color-red
  • This is a placeholder for the text color
• text-color-yellow
  • This is a placeholder for the text color
• text-color-aqua
  • This is a placeholder for the text color
• text-color-pink
  • This is a placeholder for the text color
• text-color-blue-ghost
  • This is a placeholder for the text color

Background Color

• bg-color-black
• bg-color-white
• bg-color-red
• bg-color-blue-jeans
• bg-color-aqua
• bg-color-orange

Text Size

• new-text-size-tiny
  • Oh, hi , Marty. I didn't hear you come in.
• new-text-size-small
  • Oh, hi , Marty. I didn't hear you come in.
• new-text-size-regular
  • Oh, hi , Marty. I didn't hear you come in.
• text-size-medium
  • Oh, hi , Marty. I didn't hear you come in.
• text-size-large
  • Oh, hi , Marty. I didn't hear you come in.

Text Alignment

Desktop View

• text-align-desktop-left
  • Here's to the crazy ones...
• text-align-desktop-center
  • Here's to the crazy ones...
• text-align-desktop-right
  • Here's to the crazy ones...

Tablet View

• text-align-tablet-left
  • Here's to the crazy ones...
• text-align-tablet-center
  • Here's to the crazy ones...
• text-align-tablet-right
  • Here's to the crazy ones...

Landscape View

• text-align-mobile-left
  • Here's to the crazy ones...
• text-align-mobile-center
  • Here's to the crazy ones...
• text-align-mobile-right
  • Here's to the crazy ones...

Text Style

• text-style-strikethrough
  • Here's to the crazy ones...
• text-style-italic
  • Here's to the crazy ones...
• text-style-all-caps
  • Here's to the crazy ones...
• text-style-first-letter-cap
  • Here's to the crazy ones...
• text-style-all-lowercase
  • Here's to the crazy ones...

Other HTML Tags

All Paragraphs

Oh, hi , Marty. I didn't hear you come in. Fascinating device, this video unit. George. Well, this is a radiation suit. That's Calvin Klein, oh my god, he's a dream. It's taken me almost thirty years and my entire family fortune to realize the vision of that day, my god has it been that long.

All Links

• Text Link

All Quotes

Oh, hi , Marty. I didn't hear you come in. Fascinating device, this video unit. George. Well, this is a radiation suit.

All Unordered List

• Wait a minute, Doc.
• What are you talking about?
• What happens to us in the future?

Help Classes

• Canvas for Charts
• position-relative
• new-overflow-hide
• center-spacing
• wp-section-absolute

Style Guide Classes

• All elements