Header One Styling

HTML Code

<h1>CONTENT GOES HERE...</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

<h2>CONTENT GOES HERE...</h2>

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

<h3>CONTENT GOES HERE...</h3>

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

<h4>CONTENT GOES HERE...</h4>

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

<h5>CONTENT GOES HERE...</h5>

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

<h6>CONTENT GOES HERE...</h6>

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>CONTENT GOES HERE...</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 paragraph that contains some inline styles. 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.

Inline Text Styling

HTML Code

<strong>CONTENT GOES HERE...</strong>

Output

Bold Text

HTML Code

<em>CONTENT GOES HERE...</em>

Output

Italic Text

HTML Code

<u>CONTENT GOES HERE...</u>

Output

Underline Text

Button Styles

HTML Code

<a class="button blue" href="LINK">TEXT</a>

Output

BLUE Button

HTML Code

<a class="button green" href="LINK">TEXT</a>

Output

GREEN Button

HTML Code

<a class="button yellow" href="LINK">TEXT</a>

Output

YELLOW Button

HTML Code

<a class="button orange" href="LINK">TEXT</a>

Output

ORANGE Button

HTML Code

<a class="button red" href="LINK">TEXT</a>

Output

RED Button

HTML Code

<a class="button purple" href="LINK">TEXT</a>

Output

PURPLE Button

Icon System

HTML Code

<i class="material-icons-round">ICON_NAME</i>
A full list of available icons can be found here.

Output

whatshot

Accent Colors

Available Colors

BLUE
GREEN
YELLOW
ORANGE
RED
PURPLE

These colors are available for use for text and buttons.

Grid System

HTML Code

Output

<div class="column span-2">CONTENT</div>
1/6
<div class="column span-2_4">CONTENT</div>
1/5
<div class="column span-3">CONTENT</div>
1/4
<div class="column span-4">CONTENT</div>
1/3
<div class="column span-6">CONTENT</div>
1/2
<div class="column span-8">CONTENT</div>
2/3
<div class="column span-9">CONTENT</div>
3/4
<div class="column span-10">CONTENT</div>
5/6
<div class="column span-12">CONTENT</div>
1/1

Full Grid

1/6
1/6
1/6
1/6
1/6
1/6
1/5
1/5
1/5
1/5
1/5
1/4
1/4
1/4
1/4
1/3
1/3
1/3
1/2
1/2
2/3
1/3
3/4
1/4
5/6
1/6
1/1

Hiding System

Sections and elements can be conditionally hidden by adding the following classes.

HTML Code

hide-mobile

Adding the classname hide-mobile will hide the element at all screen sizes less than 840 pixels wide.

HTML Code

hide-tablet

Adding the classname hide-tablet will hide the element at all screen sizes between 840 and 1280 pixels wide.

HTML Code

hide-desktop

Adding the classname hide-desktop will hide the element at all screen sizes larger than 1280 pixels wide.

HTML Code

hide-all

Adding the classname hide-all will hide the element at all screen sizes.

HTML Code

hide-mobile hide-tablet

Classes can also be combined separated by a space to hide elements at mixed sizes.