Client First - Version 1.0
Style Guide
This Style Guide is a set of guidelines and strategies created byto help consistency and clarity around the website development.
Structure
Visibility
Container
Buttons
Spacers
Headings
Fonts
Text Color
BG Color
Text Size
Text Alignment
Text Style
Text Style
Structure
new-page-wrapper
new-page-wrapper
full-page-height
main-wrapper
new-section
space-section
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
container-large
container-global
Buttons
button-fill
button-outline
wp-buttons
vertical 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-10rem
Headings
H1

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

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

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

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

heading-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.
heading-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.
heading-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-heading-example
Oh, hi , Marty. I didn't hear you come in.
fonts
Font Family - Source Serif Pro
font-sourceSerifPro-light
Here's to the crazy ones...
font-sourceSerifPro-normal
Here's to the crazy ones...
font-sourceSerifPro-medium
Here's to the crazy ones...
font-sourceSerifPro-semibold
Here's to the crazy ones...
font-sourceSerifPro-bold
Here's to the crazy ones...
Font Family - Helvetica Nue
font-helvetica-light
Here's to the crazy ones...
font-helvetica-normal
Here's to the crazy ones...
font-helvetica-medium
Here's to the crazy ones...
font-helvetica-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-gray
This is a placeholder
for the text color
text-color-green
This is a placeholder
for the text color
text-color-red
This is a placeholder
for the text color
text-color-orange
This is a placeholder
for the text color
background color
bg-color-black
bg-color-white
bg-color-gray
bg-color-cream
bg-color-teal
bg-color-teal-light
bg-color-cream-extra-light
bg-color-cream-light
Text size
text-size-tiny
Oh, hi , Marty.
I didn't hear you come in.
text-size-small
Oh, hi , Marty.
I didn't hear you come in.
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...
breake-line-no-wrap
Here's to the crazy ones...
other Classes
center-alignment
position-relative
overflow-hidden
All Unordered List
  • Wait a minute, Doc.
  • What are you talking about?
  • What happens to us in the future?
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
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?
iframe-reviews-carrousel
style guide classes
All elements