Advertisement
  1. Web Design
  2. CMS
Webdesign

Defining Our Ghost Theme's Color and Basic Layout

by
Languages:
This post is part of a series called Building a Ghost Theme From Scratch.
Styling Our Ghost Theme With LESS
Uber Aesthetics and Responsiveness

Moving swiftly along with the styling of our Ghost theme, this tutorial sets out some width settings, the color and some basic layout adjustments.


Note: You will need to be working in Firefox with the FireBug extension installed, or in Chrome with Developer Tools for this section of the tutorial.


Adjust Width for Readability

Having chosen our fonts during the previous tutorial, we know how wide our letters will be, so we can adjust the width of the site for optimal readability. Different fonts have different average widths per letter, which is why we've waited until this point to finalize our content width.

The core width of the layout is not defined to fit a design style or a particular device's resolution. It's defined by targeting the number of characters per line, within a range that makes it as easy as possible for people to read and absorb the content.

There's some debate over the optimal number of character per line, but we're going to target a range of approximately 63 - 81 characters.

This is based on allowing a reader with average vision and reading experience to follow along each line with a comfortable number of complete eye movements (saccades). The average person takes in around nine letters per eye movement, and we're allowing for seven to nine of these movements.

Every reader is different so the optimal number of characters per line will vary from person to person. Hence, you can treat the 63 - 81 range as a rough zone.

Step 1:

Go to http://charcount.appspot.com/ and add the character count bookmarklet to your browser.

Note: To do so, find the "Try it!" or "click me" link on the page, then drag that link onto your bookmark bar and rename it to something like "CharCount".

Step 2:

Now go to your front end of your site and highlight a line of text, click the bookmarklet and see how many characters it says are in the line:

GhostTheming_91CharactersPerLine

At the moment we have around 91, so our layout is a little too wide. We want to bring it down by around ten characters.

Step 3:

Open FireBug / Chrome Dev Tools by pressing F12, and in the HTML tab, (Elements tab in Chrome) select the div with class "wrapper_uber" so its CSS displays in the style panel on the right.

Note: See the image under Step 5 for what you should be looking for.

Step 4:

Now click the value of 40em to the right of the property max-width so you can adjust it. Enter 39em and press ENTER.

Step 5:

Now highlight a line and click the character counter bookmarklet again. This time we're at 87 per line, which is still a little too much.

GhostTheming_AdjustingWidth

Step 6:

Keep testing until you get somewhere within the 63 - 81 range. In this case 36em turned out to be a good value. You're going to get different counts on every line so it doesn't have to be perfect, just somewhere close to the target range.

Step 7:

Now go to your "variables.less" file and paste this variable in below the line holding the @golden variable, on line 17:

Step 8:

Go back to your "layout.less" file and change the max-width property in the .wrapper_uber style from:

To:

Step 9:

Save the file.

Step 10:

Refresh the page and the content should now appear the same width as when you were adjusting it in FireBug / Dev Tools:

GhostTheming_WidthOptimized

Blocking in the Color Scheme

We're now going to choose a color palette and add in the basic color scheme.

This stage is not anything final, or even particularly good looking. We just want to get a basic idea of how the colors will play together so we can adjust the layout for readability.

We'll begin by choosing a small number of colors and saving each as a variable so they can be easily used in multiple locations.

The color scheme itself will be controlled in a self contained file. We'll create mixins to control background colors, font colors, background images and other assorted design elements. These mixins can then be pulled into either the "typography.less" or "layout.less" file. This way we keep the main purpose of each file separate which helps to keep things organized.

I chose this color palette from Adobe Kuler

GhostTheming_ColorPalette

Step 1:

Add the following code to your "variables.less" file, at the very bottom of the file:

By saving each color hexcode as a variable like this, if you decide later you need to adjust the palette you can just change the value of the variables here and the whole theme will be automatically updated. It's also a good idea to append a little comment describing the color so you can remember which is which when you go to use them.

Step 2:

Open the "color_and_bgs.less" file for editing, and add the following code:

What we're doing here is creating a series of basic color control mixins that will be added to the "typography.less" and "layout.less" files.

In order from top to bottom, these mixins will set the:

  • Body background color
  • Default text color
  • Default link and hover colors
  • Header background color
  • Article background color
  • Article link and hover color
  • Post title background color
  • Post title text color
  • Post title link and hover color

As a point of interest, I borrowed this technique from traditional art, where painters start with an undercoat that defines the essential color scheme, then they add detail over the top.

This approach allows you to make changes more easily when deciding on the base of your overall look, as the aspects you're working with are quite simple and easy to modify.

Step 3:

In the "typography.less" edit the first line of each of the following styles, adding calls to the mixins we just created, like this:

Add .BodyColor; on the first line of the body class.

Add .LinkColor; inside the a:link, a:visited class.

Add .LinkHoverColor; on the first line of the a:active, a:hover class.

Step 4:

Still in "typography.less" add the following code to the end of the file and save:

Step 5:

In the "layout.less" add the following code at the end of the file and save:

Step 6:

Refresh the site. It should now look like this:

GhostTheming_ColorsBlockedIn

Adjusting Layout

Now the colors are blocked out we can clearly see some aspects of the layout and styling that should be adjusted.

The first thing that's immediately apparent is the text of the article should not be flush against the edge of the white background.

We'll adjust that in a moment, but first let's start by removing the underlines from the blog title, blog description and post titles so it makes it easier to see what looks best during layout adjustments.

Step 1:

In the "typography.less" file, add the following code below the H6 class and save:

Step 2:

In the "colors_and_bgs.less" file, add text-decoration: none; to the a tag styling in the .PostTitleColor() mixin like shown below and save:

Step 3:

Refresh the site - you should no longer see any underlines on the blog title, blog description or post titles.

Step 4:

In the "layout.less" file, add some white space around the content to make it easy to read by editing the .article_uber class to add padding:

This sets the padding to be five times the golden ratio on all sides.

Step 5:

Refresh the site, it should look like this:

GhostTheming_AddedPadding

The padding we've added makes it much easier to look at the outer edges of the text, but now we've lost the readable width we setup before. This is because the .wrapper_uber class is keeping the width to a maximum of 36em, including the padding we've just added. So it's trying to squish all our content, plus all our padding, into that 36em wide space.

To solve this we'll need to increase the max-width parameter of the .wrapper_uber class to our readable width of 36em plus the padding we just added. This will allow the content itself to expand to 36em, with the additional allowance for padding creating comfortable white space either site.

We'll start by creating a variable to hold the amount of padding we're adding. This way we can use that value both in the .wrapper_uber class, and the .article_uber class, as you'll see below.

With this approach, if we want to adjust the amount of white space around the content, the site wrapper width will automatically adjust along with it.

Step 6:

In the "variables.less" file, add this code below the @readable_width variable line, then save:

Step 7:

Now in the "layout.less" file update the .wrapper_uber class max-width setting to add the new padding variable:

Note: This adds twice the value of the @add_padding variable to the max-width of the .wrapper_uber class, accounting for the padding on both the left and right sides.

Step 8:

Still in the "layout.less" file update the .article_uber class padding setting to use the new padding variable too, then save:

Now we're using the value of the @add_padding variable both to widen the overall site wrapper, and to add padding / white space around the content.

Step 9:

Refresh your site and you should now see both your white space on the sides and your readable width:

GhostTheming_PaddedAndReadable

Step 10:

At this point there's probably one thing that's putting you off enjoying your nice new layout: the big Ghost image jutting out and overflowing out of the content area. To fix this, add the following code to your "layout.less" file above the .wrapper_uber class:

This ensures no image will ever be wider than 100% of the element it sits inside of.

Step 11:

In your "normalize.css" file, comment out the img style on lines 231 to 233 as it's no longer required given we've created our own img style, then save.

Step 12:

Refresh your site and the Ghost image should now fit nicely into the content area:

GhostTheming_ImagesFit

We now have the most important aspects of styling in place, those that control typography and readability, keeping content as the central focus:

  • Default font sizes and weights are in place
  • Default fonts have been selected for headers and regular text
  • Width for optimum characters per line is established
  • White space has been added around content to maximize readability

This forms the core of our design and completes what we set out to achieve in this part of our tutorial series, although we're not done with the styling stage of our theme design just yet.


Coming Up Next

We are now ready to proceed to the next and final part of our tutorial series.

There we'll finalize all of our styling aesthetics as well as complete the theme's responsive functionality. By the end of the following instalment your theme will be fully complete and install ready.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.