These are the default styles for what we are working on.  This is meant to be fairly uniform across all of our sites. This document will describe where everything is meant to be modified, and how we modify things.

When we maintain our pages, we will update this page.

We are maintaining these sites with this style sheet for the following;

ChristopherJohnson.blog

33bigs.com

Processandresults.com

Our “Aside” shortcode is a key feature of these sites.

The way that it works is as follows:

Content may be wrapped in between an opening [ aside ] and a closing [ /aside ] tag. So:

[ aside ]We can put nearly any text Aside.[ /aside ]

Becomes:

  1. We use a normal shortcode to render the aside.
  2. It defaults to the left sidebar  We can also make it align to the right. The aside shortcode gets an align=”right” attribute.
  3. When it’s on a mobile device it shows up in a callout box as below.  We can also make “insides” to do very much the same thing.
This is what an inside looks like.

These are the aside guidelines.

  1. We cannot include asides within ordered or unordered lists at present because they break the list up and the list acts in an unpredictable manner.
  2. We want an attribute that makes them disappear on mobile view.  Like a “desktop only” mode.
  3. We want an attribute that makes asides

 

This is our heading 1 (H1) text. It’s used sparingly.  We’re using Merriweather Sans, 32 points on desktop.

This is what text looks like under Heading 1.  We want to use H1 on stuff like “ultimate guides,” and landing pages, and sales pages.  We don’t want to use H1 too often; just to be a little bigger and lend be a size above H2.

This is how links look when they are internal

This is how they look when they are external.  

This is heading 2 text: this our default heading, Merriweather Sans 26 Point.

This is the heading for page and post titles that are normal pages and aren’t designed to be cornerstone content or conversion pages.

This is what text looks like under Heading 2.  This is our “go to” heading.

  1. We use this for Blog Posts.
  2. We  use this for most pages (like About Pages).
  3. We can sometimes go “long” with it.

This is the heading 3 text.  It is a subheading and we use it frequently. Meriweather Sans 22.

Heading 3 is when we are making points within a normal blog post.

Here is a blockquote.  This is what it looks like.

This is heading 4 text.  This is designed to be used as our “subtitle.”

The idea for H4 text is to be a subtitle under H2.  The idea is that it sits directly below H2 without padding or space above.  It has the same spacing below as H2.

This is Heding five.

This is what text looks like underneath.

This is Heading 6

And this is what text looks like under Heading six.