2013-10-17

Welcome to the fourth part of our Ghost theme design tutorial series. In the introductory tutorial, you learned that there are two stages to designing a theme. During the instalments therefater we began and completed what we've referred to as "the first stage" of creating your theme's templates. This fourth part of our series takes us into the next stage of theme design, namely styling.

In this part we'll start styling our typography and build our layout controls. In the coming part we'll continue our styling by blocking out our color scheme, and laying the foundation for theme responsiveness.

Note: This tutorial assumes a basic working knowledge of CSS.

Agnostic Responsive Design

This tutorial will take you through an approach to responsive design you may not be familiar with. The approach ensures that designs will respond to more than just specifically targeted common device resolutions.

Instead, designs will:

Display optimally at any resolution and hence in any device.

Scale proportionally along with any base font size set by either the browser itself, or the user.

This is done by:

Never setting a base font-size, but rather letting the browser/vendor or the user determine the most readable size for text.

Always using em or rem values, which are flexible, and not pixel values, which are inflexible, throughout the entire design.

Using media queries, not to detect specific devices, but rather as a means to detect when elements of the design are too large for the available space so they can be adjusted.

Recommended reading

Taking the “Erm..” Out of Ems

The Goldilocks Approach

How we learned to leave default font-size alone and embrace the em

Add Heading Tag Test Content

Before we get started on styling, we're going to add some heading tag test content to your Ghost site so you can see how your H1 through H6 tags appear.

You should add each heading size one line under the other to see how they work when placed close together, and then also add each heading with a line of regular text in between to see how they look in the flow of normal content.

Add the following markup to the top of your latest Ghost post, (you may need to add empty lines between each line), then update it:

Install and Configure "GhostThemingPackage"

To help you use the most efficient possible work flow with your Ghost theme creation, I've put together a little development package for you that will give you access to some really handy tools and automate a number of tasks for you. It's available within the main source download.

Instead of coding in raw CSS we'll be using LESS. If you're new to LESS you can read all about it at http://lesscss.org/

The GhostThemingPackage will handle compiling of your LESS code, as well as minifying your CSS and writing it into your theme folder.

It will also download and make available the "LESSHat" library of mixins, a fantastic free resource that makes production of cross browser CSS3 fast and easy: http://lesshat.com/

Additionally, it will download "normalize.css", "Modernizr", plus some responsive iframe javascript for you, and combine, minify and write everything into your theme.

Normalize.css standardizes basic display elements across all browsers. Read more about it at http://necolas.github.io/normalize.css/

Modernizr allows older browsers to make sense of modern markup. Read more about it at http://modernizr.com/

Requirements

You only need three things installed in order to use the GhostThemingPackage:

Node.js

Grunt.js

Bower.io

You already have Node.js installed as you've been using it to run Ghost, but you may need to install Grunt and Bower if you do not yet have them on your system.

Install Grunt

Grunt.js is a javascript task runner we'll be using to automate LESS compiling, and CSS combination & minification. If you don't have Grunt on your system yet you can install it very easily via NPM (node package manager, a part of node.js).

To install Grunt via NPM open up a terminal (in any location) and run the following command:

npm install -g grunt-cli

Make sure you include the "-g" flag as that will make Grunt available globally on your system, i.e to any location you're working in.

Install Bower

Bower.io is a great package manager that gives you easy access to all different types of web design oriented script and CSS packages. You can read more about it at http://bower.io/

Like Grunt, Bower can also be installed very easily via NPM.

Note: If you don't already have Git installed you will need to do so before installing bower.

Installation instructions for Git can be found here: http://git-scm.com/book/en/Getting-Started-Installing-Git

Important: See instructions near the bottom of Bower's page regarding installing Git on Windows: http://bower.io/#a-note-for-windows-users

To install Bower via NPM open up a terminal (in any location) and run the following command:

npm install -g bower

Again, make sure you include the "-g" flag so Bower will be available to you anywhere on your system.

Install the "GhostThemingPackage"

Step 1:

After downloading "GhostThemingPackage", extract it somewhere easily accessible, ideally into the same root directory your Ghost installation folder resides in.

For example, if your Ghost installation is at C:\Ghost then extract the package to your C: drive as well, so it ends up at C:\GhostThemingPackage. (Don't put it inside your Ghost installation folder).

You should see the following folder and file structure inside:

Step 2:

Rename the folder from "GhostThemingPackage" to "UberThemeStyles".

Step 3:

Open up a terminal inside the "UberThemeStyles" folder.

Step 4:

Run the command npm install.

This will automatically fetch the required Node.js packages that will be used for compiling LESS, and combining and minifying CSS and JavaScript.

You'll see a lot of messages like this while NPM fetches everything:

Wait until all these messages have stopped and you see the command prompt appear again.

Step 4:

Run the command bower install.

Much like the previous step, this will fetch the required packages from Bower.io; LESShat, Modernizer and Normalize.css

Again, you'll see a series of messages appear in your terminal: wait till they have finished and the command prompt appears.

Step 5:

Verify that you now see this folder structure in your "UberThemeStyles" folder:

Note the presence of the new "bower_components" and "node_modules" folders.

If any subfolders are missing from either folder, delete that folder then run the installation command again, i.e. npm install for the "node_modules" folder or bower install for the "bower_components" folder.

Configure "Gruntfile.js"

Step 1:

In your preferred code editor, open "Gruntfile.js" from the root directory of your "UberThemeStyles" folder.

This is the file that will facilitate all the automation tasks during your theme styling process. To enable it to work we just have to tell it where you have Ghost installed, and what the name of your theme is.

Step 2:

On line 62 and 63 locate the following:

Step 3:

If necessary, change '../Ghost/' to reflect the relative path to your Ghost installation.

You won't have to change the setting if your "UberThemeStyles" folder is in the same root folder as your Ghost installation folder, and your Ghost installation folder is actually named "Ghost".

Step 4:

Change "YourThemeName" to "UberTheme".

Step 5:

Save the file.

Note: Your theming package is now installed, and you can repeat the above process in the future to get setup for any additional themes you create.

Add CSS Basics

The first thing we're going to do is get the styles from Normalize.css added to your theme's stylesheet. This will ensure that our theme displays in a standardized way across all browsers.

We're then going to set a preliminary width for your content so it's easier to assess typography choices, and we'll add your foundational typography styles.

Add Normalize.css

Step 1:

In your terminal, (still in your "UberThemeStyles" folder), run the command grunt cssmin.

This will take the "normalize.css" file from your "bower_components/normalize-css" folder, compress it, and write it into your theme's style.css file.

If successful you should see this in your terminal:

Step 2:

Refresh your Ghost front end. You can verify that "normalize.css" has been added if you see

The default font family has changed to "sans-serif", (i.e. the serifs are missing from the text)

The content is flush with the edges of the window

Your background is white again (due to the css from the last tutorial being overwritten)

Note: As we go along we'll be making some adjustments to the normalize.css file.

Because we'll be creating many of our own styles, we want to avoid duplicate styles for elements like body and h1 as it's unnecessary overhead for the browser, so we'll be transplanting some styles from "normalize.css" into our own custom LESS files.

Preliminary Styles and Typography

Before we choose the fonts we're going to use in our theme, we're going to set a preliminary width for the content and add some basic typography settings. It will be much easier to trial and decide on fonts when they are in a narrower space and set to the font-size they'll most likely be used at.

To do this we're going start editing your LESS files.

Before we begin editing LESS, if you are new to it please take a moment to familiarize yourself with its system of:

Variables

Mixins

Nested Rules

Functions and Operations

You don't need an in depth understanding at this point, it should be sufficient just to read the opening section on the LESS homepage, i.e. each of the sections with matching titles to the bullet list above.

In order to see your LESS code changes reflected on the front end of your site we are going to activate automatic LESS compiling and writing of CSS into your theme.

Step 1:

In your terminal, (still in your "UberThemeStyles" folder, run the command grunt watch.

This will initiate the "watch" task, whereby your LESS files and your Normalize.css file will be watched for any changes. Whenever any changes to the files are detected, LESS will automatically be compiled, and your CSS will all be combined, minified and written into your theme's "style.css" file.

Note: When you want to stop the "watch" task go back to your terminal and press CTRL + C. When prompted type y and then press ENTER.

Step 2:

In your preferred code editor, open the file "layout.less" from the "UberThemeStyles > LESS" folder.

Step 3:

Add the following code then save:

This code does a few things:

Narrows the content width down from being full screen, making it easier to assess how your typography choices look.

Centers that content in the window.

Establishes the basis of our agnostic responsiveness, as described in the introduction to this tutorial:

We don't set the width property to an explicit value. Instead, width is set to 100% so it will fill the whole window in any device with a resolution less than 40ems wide.

We use the max-width property to restrict the wrapper to no greater than 40ems wide on larger resolutions.

We use an em value, not a px value.

Note: We're going to adjust this width later for optimal readability once we've chosen our fonts and hence know how wide our letters are going to be. The value of 40ems is placeholder only.

Step 4:

Refresh your front end. It should now have narrowed down like this:

Step 5:

Open the "normalize.css" file from the "UberThemeStyles > bower_components > normalize-css" folder for editing.

Step 6:

Comment out or delete the body, h1 and all a styles, (line 76 to 121), because we are going to write our own and don't want the overhead of duplicate declarations.

Step 7:

Open the file "typography.less" from the "UberThemeStyles > LESS" folder for editing.

Step 8:

Replace all the code therein with the following code then save:

There's quite a bit of code we've added all at once there. Let me explain what's going on.

Mixins

The first thing you'll see at the top is the mixin .HeaderFont(). Because we're going to be using the same font family, font-weight and line height for all our heading tags we've placed all the rules for those properties into a single mixin. If you look at the style for each heading tag, you'll see the .HeaderFont() mixin called in on the first line.

In this way we can update the mixin as required and all the heading tag styles will be automatically updated too.

Variables

You'll also notice the use of some variables in the code, ie. @header_font, @default_font and @golden.

The value of each of these variables is set in the "variables.less" file in your "UberThemeStyles > LESS" folder. This file is accessed first during compilation of your LESS code, meaning that the variables it contains can be used in any of your other LESS files.

We use the variables @header_font and @default_font to set the name of the fonts to be used throughout your theme so it becomes very easy to change from one choice to another as you try fonts out.

The @golden variable represents a value of 1.618, the golden ratio. This number has been used since the time of the ancient Greeks to create beautiful layouts in everything from art to architecture, and we will use it heavily throughout the design.

Adding units to variables

It's best practice in LESS to define numerical variables without units attached. This is to enable you to perform arithmetic with their values.

For example, with my @golden variable set as 1.618 I can do things like multiplying that value, halving it and so on. However, if I had set it to 1.618em I would run into trouble with some calculations I might want to perform.

So it is always best to set variables as numbers only, then attach units within the actual styles or mixins.

You can add units in the following way:

@variable + 0em

@variable + 0rem

@variable + 0%

So in a nutshell, just add the unit you wish to use as though you were performing an addition calculation, with a value of zero set on that unit.

Typographic scale

The font sizes are all set to a classic typographic scale, converted to em instead of px value, based off the most common default font size being 16px.

By doing this we get the aesthetic appeal and readability of the scale, but if a vendor or user changes the default font size to something other than 16px the whole scale will shift proportionally along with it.

Heading tag margins

With a standardized em based line-height for all headings, it is important to adjust the margins for each so headings will look nice and be readable when placed one under the other, as well as when placed in the flow of regular text.

The values used in the margins are those I have personally found to be the best for each heading tag. You'll see the effect of these settings in the next step.

Step 9:

Refresh your front end. It should now look like this:

Choosing Fonts

We're now going to select the fonts that will be used for header and regular text. We'll be creating the rest of the theme's layout and design around these font selections.

In this approach we're not starting with a Photoshop mockup, but you should still have an essential idea of what type of overall style you want. I'm going for a soft, light color scheme, with a flat but lightly textured style, so I want relatively soft, light typefaces to go along with it.

Head over to Google Fonts and choose a font for your headings, plus a font for your regular text, being sure to check how they look at a few different sizes and, if available, weights: http://www.google.com/fonts/

I ended up choosing Oxygen for header text and Open Sans for the regular text.

Once your fonts are selected you can add them into your theme.

Step 1:

Open the "default.hbs" file from the root folder of your theme.

Step 2:

Below the {{! Styles }} comment and above the link to your stylesheet, add the following line and save:

Note: To create a URL for any Google Font(s):

Use the format: http://fonts.googleapis.com/css?family=Font+Name

Spaces in font names should be replaced with + signs

To use multiple fonts, separate font names with the | symbol

Specify the weights and styles you wish to use by placing a : at the end of the font name, followed by comma separated values e.g. :300,400,700,300italic,400italic,700italic

Step 3:

Open the file "variables.less" from the "UberThemeStyles > LESS" folder for editing.

Step 4:

Locate these two lines:

Step 5:

Edit them to read:

Step 6:

In your "typography.less" file, add a font-weight of 400 to your .HeaderFont() mixin:

Step 7:

Also in your "typography.less" file, add a font-weight of 300 to your body style:

Note: These were the weights I felt looked best for these particular fonts, and for the light style I'm going for.

Step 8:

Refresh your front end. You should now see your font choices in place:

Coming Up Next

Before moving to the final part of our tutorial series, we have one or two styling details to take care of. In the next instalment we'll look at color and define some basic layout defaults.

Show more