Site Style Guide
Image Sizing
For use in the hero area of the page. Images can be taller but will only show the middle 1200px square of the image.
Header One Styling
HTML CODE
<h1>Header One Tag</h1>
OUTPUT
Heading One
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Header Two Styling
HTML CODE
<h1>Header Two Tag</h1>
OUTPUT
Heading Two
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Header Three Styling
HTML CODE
<h1>Header Three Tag</h1>
OUTPUT
Heading Three
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Header Four Styling
HTML CODE
<h1>Header Four Tag</h1>
OUTPUT
Heading Four
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Header Five Styling
HTML CODE
<h1>Header Five Tag</h1>
OUTPUT
Heading Five
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Header Six Styling
HTML CODE
<h1>Header Six Tag</h1>
OUTPUT
Heading Six
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Paragraph Styling
HTML CODE
<p>Paragraph Tag</p>
OUTPUT
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Additional Text Styling
HTML CODE
<strong>Bold Text</strong>
<u>Underline Text</u>
<em>Italic Text</em>
OUTPUT
Bold Text
Underline Text
Italic Text
Icon System
HTML CODE
<i class="fa ICON_CLASS" aria-hidden="true"></i>
A complete list of available icons and the needed tags can be found here.
OUTPUT
Brand Colors
AVAILABLE COLORS
COLOR USAGE IN TEXT
<h4 class="blue">Blue Text</h5>
Blue Text
<h5 class="dark-blue">Dark Blue Text</h5>
Dark Blue Text
<h5 class="darker-blue">Darker Blue Text</h5>
Darker Blue Text
<h5 class="green">Green Text</h5>
Green Text
COLOR USAGE IN DIVS
Add a background color to your div by adding a class to your custom content.
Syntax: bg-[ color of choice ]
NOTE: When using dark backgrounds, you can make your text white by adding the class invert to your custom content.
<div class="bg-blue invert">bg-blue invert</div>
<div class="bg-dark-blue invert">bg-dark-blue invert</div>
<div class="bg-darker-blue invert">bg-darker-blue invert</div>
<div class="bg-green">bg-green</div>
Grid System
HTML CODE
<div class="w-30">...</div>
<div class="w-70">...</div>
<div class="w-100">...</div>
OUTPUT
FULL GRID
Padding System
Padding All
These show uniform padding around the content.
Definition: pa[ ] = padding all [amount of padding]
HTML CODE
<div class="pa1">[Content Here]</div><div class="pa2">[Content Here]</div><div class="pa3">[Content Here]</div><div class="pa4">[Content Here]</div><div class="pa5">[Content Here]</div>OUTPUT
Padding Vertical
These show vertical padding above and below the content.
Definition: pv[ ] = padding vertical [amount of padding]
HTML CODE
<div class="pv1">[Content Here]</div><div class="pv2">[Content Here]</div><div class="pv3">[Content Here]</div><div class="pv4">[Content Here]</div><div class="pv5">[Content Here]</div>OUTPUT
Padding Horizontal
These show horizontal padding to the left and right of the content.
Definition: ph[ ] = padding horizontal [amount of padding]
HTML CODE
<div class="ph1">[Content Here]</div><div class="ph2">[Content Here]</div><div class="ph3">[Content Here]</div><div class="ph4">[Content Here]</div><div class="ph5">[Content Here]</div>OUTPUT
Additional Padding Options
These show the top, right, bottom, left padding options. The different padding scales shown above also apply to these.
DEFINITIONS
pt[ ] = padding top [amount of padding]
pr[ ] = padding right [amount of padding]
pb[ ] = padding bottom [amount of padding]
pl[ ] = padding left [amount of padding]
EXAMPLES
RESPONSIVE DESIGN
Here are the available options to make the GRID and PADDING responsive to different devices.
Definitions:
[w-50 or pa4]-ns = the settings in the bracket will only apply to NOT-SMALL screens (tablet and desktop size)
[w-50 or pa4]-m = the settings in the bracket will only apply to MEDIUM screens (tablet size)
[w-50 or pa4]-l = the settings in the bracket will only apply to LARGE screens (desktop sizes)
HTML CODE
<div class="w-third-l w-50-m w-100">[Content Here]</div>
