The approach of this book is going to take you through the unique and beautiful route (or unique and awesome, whatever your design aesthetics call for) with the idea that once you know how to create a theme from scratch, you'll be better at understanding what to look for in other WordPress themes, premium themes, and frameworks. You'll then be able to assess when it really is better or easier to use an already built theme versus building up something of your own from scratch.
Chapter 2, Preparing a Design for Our WordPress Theme will cover creating an HTML5-and CSS3-based, design "mock-up" that will work across all browsers as well as be responsive and mobile ready. In Chapter 3, Coding it Up, we'll take that working HTML/CSS code and break it down into template pages injected with template tags and essentially "WordPress-ize" it into a fully functional theme. In Chapter 4, Advanced Theme Features and beyond, we'll learn how to add some great advanced features as well as properly validate and package our theme to share it with the world. Don't let the "Beginner" series this title is under fool you. By the end of this book you'll probably be ready to create your own polished, professional themes for clients or even premium themes.
The Cufon JavaScript technique, but for now, let's get some basic typography under our belts.
When envisioning the theme's typography, think about the type of information the site will (or might) hold, and what's expected along with what's in vogue right now. Try to think in terms of headers, secondary fonts, block-quotes, specialty text (for code), and paragraph page text.
You can use any fonts you want as long as you think there's a really good chance that others will have the same font on their computers. Here is a list of the basic fonts that work well on the screen:
- Fonts designed for viewing on screen:
- Georgia (serif)
- Verdana (sans serif)
- Fonts available on most Macs and/or PCs:
- Arial
- Helvetica
- Times New Roman
- Fonts commonly used for code:
- Monaco
- Consolas
It is possible to set text in one of five different units – keywords, points, pixels, percentages, and ems. These work in the following way:
- Keywords include
xx-small,x-small,small,medium,large,x-large, andxx-large. Themediumoption is the same as the default font size set by the browser, and the others are set in relation to this, for example, thex-smallkeyword equates to 9 pixels on desktop browsers in their default setting. Keywords are limited, with only seven choices, and they are imprecise as it's impossible to know if the user has changed the browser's default size or if different browsers are using a different default size. It's therefore not a good idea to use keywords. - Points will be familiar to you if you use a word processing or desktop publishing program, and they are related to the size of text on the printed page. Their only real application in websites is for a separate print stylesheet—they generally aren't used in screen stylesheets.
- Pixels are probably the most commonly used, and relate to the pixels on the screen. They provide fine control over exact dimensions but because the font size for each element (for example, headings) has to be set separately, you have to edit each one if you want to make the font sizes larger or smaller across the site.
- Percentages change the text size in relation to the size set by the browser (a bit like keywords), but give much finer control. You can also use them to set the size of text in an element relative to the size it would normally inherit from elements higher in the html structure. For example, if you set the
<body>element to have a font size of 16 pixels, and the<h1>tag to have a font size of 120 percent, its size will be 120 percent of 16 pixels, which is 19.2 pixels. - Ems are also relative, and work in exactly the same way as percentages, so 1.2em is the equivalent of 120 percent. Some developers find that the smaller numbers are easier to work with. They're also useful when styling layout relative to text size. For example, in the Carborelli's call to action box, the padding is in ems, so it would be based on the size of the text in that element. If we used percentages for that padding, the browser would use a percentage of the width or height of the call to action's containing element instead.
Because ems and percentages are relative values, they have two major advantages over pixels:
- If you set the site's base text size at 14 pixels, for example, using the
<body>element, and set other elements with different font sizes using ems, then at a later date decide to make the text size larger, all you need to do is change the size for the<body>element and this will have a knock-on effect on all other elements or selectors that have been set in ems or pixels. This also means that you can adjust the text size for all parts of the site on mobile devices using one change – to the font size of the<body>element. - As ems are relative, they adjust when the user changes their text size settings in their browser, for example if he or she is visually impaired or short-sighted. Pixel values won't do this so well. This makes ems much better for accessibility.
You could use either, but ems are more commonly used as they're simpler to work with.
As we're about to learn, there are lots of CSS frameworks to choose from. Regardless of which one you end up with, this is where a lot of time-saving "magic" can start to happen for you and your design process. By using a CSS framework, you can quickly set up layout positioning for your mock-up. Let's take a quick tour of the top two CSS framework systems available.
960 grid is probably the most popular CSS framework out there because of the fact that 960 can be divided by a lot of numbers, giving you a great deal of flexibility for your layout.
You can find it at http://960.gs/.
Blueprint includes typography, form starters, and other plugins to choose from. It's based on a grid of 24 columns that are 30-pixel wide, with a 10-pixel margin, and the default is 950-pixels wide. You can find out all about it at: http://www.blueprintcss.org.
The tutorial in this book uses the layout core framework developed by me.
Layoutcore is very simple. It uses object-oriented CSS, meaning that, instead of assigning styling to specific elements in your markup, you add classes defined in layoutcore which are designed to style whichever elements they're applied to. For example, these will control floats, widths, backgrounds, and fonts.
Note
To learn more about object-oriented CSS, see http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/.
Here's an example of a layout using layoutcore:
... <div id="container"> <div class="left eighth margin-right"> </div> <div class="left eighth margin-right"> </div> <div class="left quarter"> </div> <div class="right half"> <div class="push"></div> <div class="right third"> </div> <div class="left two-thirds"> </div> </div> <div class="push"></div> </div><!--//#container--> …
This markup would create a layout similar to the following screenshot:
A quick overview of the layoutcore CSS is as follows:
- It has several vertical lists and horizontal "grid list" options that can be applied to
ulandollists, which turn them into horizontal lists that wrap from 2 up, to 8 up. - It also makes the suckerfish method for drop-down menus a breeze (we'll break down the CSS for this in detail in Chapter 4, Advanced Theme Features). You simply assign the
.sfTabclass for horizontal menus or.sfListfor vertical menus. Using the vertical.sfListclass, you can also assign the classes.dropRightor.dropLeftto determine on which side the drop-down menus appear or just assign.currentLevelif you want to have a vertical drop-down menu that automatically shows what section you're active in. - It also accommodates some very basic
@mediaqueries that appropriately size the#containerandfooterelement's width property and turn off the.leftand.rightfloat properties to get the layout's basic responsiveness set up and ready to roll. - As with any other framework you use (or just plain stylesheet you create), the
layout-core.cssfile uses the Eric-Meyers reset so that the layout and style rules you set up look as consistent as possible across all browsers. - Last, for good measure, it accommodates some very common mime-type assignment images and social networking icons.
Tip
More CSS frameworks
There are tons of great frameworks out there, each one taking in different approaches or end solutions into account.
You may find one that works better for you than the ones mentioned here. For some examples, see http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/
To find out more about it and download a 10k minified version, visit my CSS site http://csscheatsheet.net/layout-core (you get the unminified version with this chapter's code pack so you can look through it in detail).
Tip
Multiple class styles assigned to the same HTML object tag?
Hopefully, this is not a totally new CSS concept for you, but as you can see by the description of CSS frameworks and my quick layout-core.css examples given previously, you can have as many classes as you want assigned to an HTML object tag. Simply separate the class names with a blank space and they'll affect your HTML object in the order that you assign them. Keep in mind that the rules of cascading apply, so if your second CSS rule has properties in it that match the first, the first rule properties will be overwritten by the second. We'll delve even further into using this technique later on in this chapter and there are more suggestions for this trick in Chapter 7, Tips and Tricks.