Typography

Common CSS and Typography

The main CSS file in each of our templates contains a lot of classes you can choose for the various elements on your pages. While you may not use them all, they are there in case you need them.

Headings typically have one or more "alternate" classes in case you want to dress things up a bit. Paragraphs also have several CSS styles to align text to the left or right, make text smaller or larger, and more than one class can be applied to an item.

The best thing to do is look through the CSS file. Don't worry, it won't bite. If you need us to help explain what something does, just drop us an email and we'll be happy to describe it in more detail.

Content Boxes - Two Across

<section class="contentBox2a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</section>

<section class="contentBox2b>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</section>

Content Boxes - Three Across

<section class="contentBox3a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</section>

<section class="contentBox3b>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</section>

<section class="contentBox3c>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non dictum est. Cras fermentum tincidunt tellus, ac iaculis est semper eget. Donec a lectus eros.</p>
</section>

Clearing Floats

When you have floated elements like the content boxes described above, the content inside may vary in length. To ensure that any content that sits below floated elements will begin below them, you need a method to "clear" floated sections. We often do this with the Horizontal Rule <hr>. In the default.css file, there are three rules, all of which can be used to "clear" floated items:

In some cases, we wrap the floated blocks in a div that has a clear applied through the css: <div class="group">

Reading through the template's Typography page will make you aware of these items. Yes, they can be tricky because they are "invisible" but you need to know these elements exist if you are not comfortable with viewing the html coding.

Yes, There's More

We put a lot of "how to" information in our templates, especially in the Instructions page and the Typography page. Please take the time to read over them.