James is a Senior Front-End Developer with almost 10 years total experience in freelance, contract, and agency work. He has spoken at conferences, including local WordPress meet-ups and the online WP Summit. James's favorite parts of web development include creating meaningful animations, presenting unique responsive design solutions, and pushing Sass’s limits to write powerful modular CSS. You can find out more about James at jamessteinbach.com.
One way to acheive visual consistency in web design is to use a vertical rhythm. For a website, this would mean that no matter what
font-sizeany text element is, its
line-heightis always an even multiple of a consistent unit of rhythm. When this is done precisely, you could put a striped background behind your page and each text block (paragraphs, headings, blockquotes, etc) would line up along the lines in that grid.
As you could imagine, setting this up by hand would require a lot of math and typing. If you want to change the proportions of that grid responsively, you’ll redo that work for every breakpoint. Sass, as you might expect, provides a great toolbox to automate all that work and generate a custom type scale with consistent vertical rhythm more easily.
I’ll start off by admitting that there are already some good Sass plugins that help build a custom type scale with consistent vertical rhythm. If you’re just looking to grab a pre-built chunk of code, try Typesetting, Typomatic, or Typecsset.
Why Build Our Own?
That raises a great question: With all those tools available, why should we try building our own? There are a couple of reasons. The fact that there are three different tools already means that there are different ways to solve this successfully. Additionally, building our own type scale with Sass is a great way to move beyond the basics and learn some more advanced Sass.
Before we start, let’s define what kind of type scale we’re going to build. The scale will start with a base
line-height. From that
font-size, it will generate several proportionally larger
font-sizevalues. This Sass code will also control the leading for all the sizes it generates, allowing us to keep the line height tied to a multiple of the base
In December 2012, the New York Times broke out of their standard online post layout and wowed us with John Branch’s beautiful “Snow Fall” article. Instead of simply containing headings, text, and the occasional inline photo, this article made liberal use of full screen images, videos, custom text layouts, and animations to draw readers in and captivate them with a well-designed and well-told story.
It wasn’t long before other publishing sites followed suit and began departing from their “normal” design for occasional art-directed articles, like The Chicago Tribune’s “His Saving Grace” and The Verge’s “longform” articles.
Normally, articles on news sites follow a pretty standard pattern: featured image, headline, content (text, headings, and inline images), with a menu above, a sidebar next-door, and comments and a footer below. The large majority of WordPress sites follow that pattern as well. But with a little help from a couple helpful plugins and a custom template page, you can easily build attention-grabbing art-directed articles in WordPress.
For the sake of this tutorial, let’s pick several unique design elements we’d like to add to our “Snow Fall” layout. We’ll want (1) normal WYSIWYG editor areas, (2) hero images with optional text overlay, and (3) pull-quotes. We’ll also want to use as many of each kind of content as we want, in whatever order we want. Let’s go!
Advanced Custom Fields & Flexible Content Fields
To create customizable layouts, we’ll start with the Advanced Custom Fields plugin (WP Plugin Repo). ACF is free, but we’ll also need one of its paid add-ons: Flexible Content Fields. This add-on is less than $25 (USD) and is well worth it!
This article is for developers who build custom WordPress themes. There are times when buying a premium theme or modifying it with a child theme are fine, but in many situations, there isn’t an existing theme that fits a client’s content needs precisely or that conveys their visual identity correctly.
There are a number of useful blank themes or starter themes available for custom WordPress theme development. Some of the more common ones include Bones, Roots, Joints, HTML5 Blank, and HTML5 Reset. These themes have various levels of built-in styling. Some rely on Bootstrap; others use Foundation. Some include a CSS reset; others simply include normalize.css.
My personal favorite is _s (also called “Underscores). It’s a blank theme maintained by Automattic, the company who runs WordPress.com, Jetpack, Akismet, and Gravatar. This ensures that it stays fresh and up-to-date with current WordPress code standards. In fact, at least 30 updates were made just last month.
Not only is _s up-to-date with WordPress standards, it also stays on top of HTML5 standards. Using semantic tags like
<section>, it presents your content as accurately as possible for search engines. Note: if you’re concerned about layout in IE8 and down, include html5shiv in your theme.
Another thing I love about _s is what it doesn’t have. It doesn’t have a grid system, options framework, or js library. In other words, it doesn’t have bloat that I’ll have to trim later. The only styles it has (besides a reset and navigation) are the ones I choose add. I understand that plenty of people rely on CSS frameworks to speed up development, but I’d rather invest the necessary time in development and speed up the site!
If you’ve used WordPress as a CMS for your clients, you’ve probably had to reassure a client that it’s not just ‘a blogging platform’. The Dashboard, however, doesn’t help. Unless you’ve installed plugins that provide custom post types, all an editor can add are posts and pages. Nearly every client site or premium theme I’ve built has needed something custom: products, events, testimonials, team members, services, locations, and so on.
There are some less-than-ideal ways to provide what your client needs. You can give them strict instructions for using post categories or parent pages to create faux post types (that’ll break as soon as they forget your instructions). You can find a plugin for each custom post type (that’ll introduce more code too, for you to vet and maintain). A cleaner solution is to add your own post types. This article will compare Types and Pods, two plugins for creating unique custom post types to match your (or your client’s) needs precisely.