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:
It is possible to set text in one of five different units – keywords, points, pixels, percentages, and ems. These work in the following way:
xx-small
, x-small
, small
, medium
, large
, x-large
, and xx-large
. The medium
option is the same as the default font size set by the browser, and the others are set in relation to this, for example, the x-small
keyword 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.<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.Because ems and percentages are relative values, they have two major advantages over pixels:
<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.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.
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:
ul
and ol
lists, which turn them into horizontal lists that wrap from 2 up, to 8 up..sfTab
class for horizontal menus or .sfList
for vertical menus. Using the vertical .sfList
class, you can also assign the classes.dropRight
or .dropLeft
to determine on which side the drop-down menus appear or just assign .currentLevel
if you want to have a vertical drop-down menu that automatically shows what section you're active in.@media
queries that appropriately size the #container
and footer
element's width property and turn off the .left
and .right
float properties to get the layout's basic responsiveness set up and ready to roll.layout-core.css
file uses the Eric-Meyers reset so that the layout and style rules you set up look as consistent as possible across all browsers.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).
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.