This page demonstrates the various style elements and calls-to-action as dictated by the current style guides of this site.
Colors
Color and its use throughout a website is a crucial part of the branding puzzle. Use the following colors, and the following colors only throughout this site.
#EE464F
.red
#2A2D34
.darkblue
#6bCCE9
.lightblue
#CED3DC
.bluegray
#71C069
.green
#EEEEEE
.lightgray
Brighter colors should only be used in moderation and when drawing attention to specific calls-to-action.
.green is only used in the plugin’s admin UI.
Typography
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 1: Lato 900
Heading 2: Lato 900
Heading 3: Lato 900
Heading 4: Lato 900
Heading 5: Lato 900
Heading 6: Lato 900
Typical body text and the font that should be used is Lato 400.
This is a quote for when you want to quote someone.
Calls to Action
Calls to action are critical if you want to move people to action. Here’s the various kinds found on this site.
.button .button .red .button .blue
.button .lightblue .button .gray
When using any of the button classes you must always include the class of button
first. If you’re only using the standard button, then you have it already. But, for example if you want a colored button it would look like this:
<a href="LINK" class="button [color class]">TEXT</a>
Special Text Blocks
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 for blog post or page introductions. Like a good hook for a movie.
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.
This is the .alert class used only in extreme emergencies. Seriously, you don’t want to just go waiving this thing around.
Or what if you need to write out some code
:
.button { background: #ccc; color: #fff; padding: 15px 25px; border-radius: 4px; }