Style Guide
This page demonstrates the various style elements and calls-to-action as dictated by the current brand style guidelines of GeneWhitehead.com.
Typography is among the most important of elements in any web design. This is why the utmost of care must be taken when crafting the style of each typographic element.
Heading 2: Jumps over the lazy dog
Heading 3: Two driven jocks help
Heading 4: Fax my big quiz
Heading 5: Pack my box with
Heading 6: Five dozen liquor jugs
Typical body text: The job requires extra pluck and zeal from every young wage earner.
Quoted text: Waltz, bad nymph, for quick jigs vex.
Calls to action are critical if you want to move people to action. Here’s the various kinds found on this site:
.button .button-clear
.button-cta .button-cta-clear
.button-buy .button-download
Swap out the icons for specific instances such as:
.button .pin .button-clear .pin
.button-cta .buy .button-cta-clear .buy
And you can use them for all sorts of wonderous things inside of posts!
This special text block is created with the class .card. This will be used on any sort of item you want to place is a small, flexible box.
Download
By “flexible” I mean that you can place multiple cards inside of a
.flex-wrapper element and have multiple boxes fit automatically.Download
The boxes will intelligently fit to the area with a maximum number of 3 boxes per row. On mobile, it will automatically adjust so they’re never too narrow.
Download
Highlights are great for when you want to draw specific attention to links of high importance.
.highlight used to highlight important links.
To create one of these sexy calls to action it’s as easy as:
<a href="LINK" class="CLASSNAME">YOUR TEXT</a>
Special text blocks may be needed at times to draw extra attention to give specific notes or add typographic emphasis. Here are the various special text blocks:
This is the .lead class used primarily as the intro at the beginning of blog posts.
This is the .sidenote class used to draw special attention to text inside a blog post–either for long quote from other articles or for citing the blog post as part of a series.
This is the .define class used for things like definitions and such.
This is the .notice class used to draw special attention to text inside a blog post either for citing the blog post as part of a series or small annotations.
Download Box
This special text block is created with the class .download-box. This will be used on any sort of product for download.
Download
This is a .testimonial used for pages that have quotes from those praising me. Of course I want them to look quite good. -small, applied to name
And when you need to create one of these beautifully designed special blocks, this is all the code you need:
<div class="CLASSNAME">YOUR CONTENT GOES IN THIS AREA RIGHT HERE.</div>
Horizontal rule are the subtle divider lines used to break up sections of text. You can see them used throughout this page to separate each section. Simply place <hr /> between a paragraph and you’ve got yourself a beautiful divider line.