Check your version

This collection covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Markup in Drupal

This series walks that blurry line between site building and theming. This series will show you how you can affect markup using a base theme, Zen; a module for semantic field markup, Fences; and widely-used favorite site building modules: Views, Panels, and Display Suite. You'll also learn how to apply prototype markup from a Pattern Lab template using Views UI.

Many widely-used Drupal site building modules such as Views, Panels, and Display Suite include in their administrative interface options for adding wrapper HTML markup and CSS classes. This series will show you how these modules can affect markup in a Drupal site, using the administrative UI, as well as utilizing template files and layouts in code.

Of course, markup really begins with the theme and this series features the Zen theme, a Drupal base theme featuring semantic HTML5 markup. I'll cover installation of Zen, as well as using Drush to install a subtheme using Zen's starterkit.

A great module pair for Zen is the Fences module, which allows you to specify any one of a host of semantic HTML selectors to wrap around your Drupal site's fields. I'll walk you through installation of Fences, Fences' configuration settings, and how Fences alters the field settings form in Drupal's administrative interface.

Panels and Display Suite have many similarities in functionality and if you're curious about the differences between them and you might go about doing the same task in each module, this series will provide a good overview of each module, allowing you to compare and help you decide which module you want to use on your Drupal site.

This series can also serve as a "crash-course" for site builders and themers, who need to quickly get up to speed on customizing markup on a Drupal site using one or more of these modules or theme.

Finally, if you want to dip your toes in the prototyping waters, I've included a tutorial and a challenge based on a Pattern Lab prototype, in which you apply HTML and CSS classes from the Pattern Lab "mustache" template files to a view of recent articles.