We're making progress in making our theme more flexible and fluid. Next, we’ll address our site's typography and implement relative font-sizing. This will help ensure that our text is more legible without the need to pinch and zoom. To do this, we’ll convert our font-sizes declared in pixels to ems, using the target ÷ context = result formula. Break out those calculators!
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (Checkout branch 04-responsive-typography)
As we've been converting our font-sizes to ems, we've noticed other properties that need updating, including margin and padding. In order to correctly apply our target ÷ context = result formula, we need to know the appropriate value for "context." Converting padding presents us with a new context, different than that of a margin. In this lesson, we'll learn how to determine the appropriate context and convert padding and margin pixels to relative units.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (Checkout branch 05-responsive-padding-margins)
So far, we've adapted our layout to be flexible and fluid using relative units like percentages and ems, instead of absolute ones, like pixels. The problem is that smaller devices will often use resolutions much greater than the actual size of the screen size or viewport. So while our relative sizing is technically working, it's not going to be terribly useful or make our content more readable and accessible until we add an important tag to the head of our html template file: the viewport meta tag.
By adding the viewport meta tag to the head of our html template file, we're letting the browser know that we want the viewport size to be the size of the device, not some huge resolution more suitable for a 17" monitor, for example. This is a small but critical step in implementing a responsive design. Without it, our hard work of converting to relative units just isn't going to pay off.
In this lesson, you'll learn how to add a viewport meta tag to the head of all html pages using a special Drupal template file that we'll create. Then we'll step back and admire the results using our mobile emulation tools.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (Checkout branch 06-viewport-meta)
Written tutorial based on this video
While it's not forbidden to use absolute positioning in responsive designs, the way that absolute positioning was utilized in the original theme is less than ideal as we work on moving theme toward flexibility, fluidity, and responsiveness.
In this lesson, we'll focus on putting elements in the header back into the natural flow of the document. We'll refactor some HTML and CSS, removing absolute positioning declarations and change the source order of some elements in our page template file.
Restoring the natural order and flow of the document will make things easier for us down the road as we adapt our components to stack into one-column in small screens.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 07-08-flow-media-queries)
In this series, we’ll start out by adapting the Anytown Farmers Market website layout for display on a small mobile screen. The current layout is a stacked 2-column layout with a full-width header, primary content column, and two sidebars. We'll simplify and update the wide layout to use just one main content column plus a right sidebar that will stack under the content region on smaller viewports. We'll use the breakpoints that we identified in the previous lesson to implement width-based media queries and trigger the appropriate layout — stacked for narrow screens and 2-column for wider viewports.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 07-08-flow-media-queries)
Responsive Menus module enables a site builder to install and configure a responsive menu with very little CSS required. We'll walk through the configuration of the module using the media query we built in the previous lesson. We'll also add some CSS to hide our desktop navigation when the mobile menu is shown.
Additional resources
Responsive Menus module (Drupal.org)
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 09-responsive-menu-contrib-module)
There are quite a few images on the site that aren’t scaling very well. They’re either way too small or way too big and break the layout. For now, we just want ensure that our images don’t overflow beyond the layout container and that they are viewable at a comfortable size across all viewport sizes. While we're at it, we can make sure all HTML media objects stay safely contained in a flexible container, especially when sizing down.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 10-max-width)
Our image gallery plugin has long been known to be barely navigable on a small screen. Let’s fix our images and replace our photo gallery plugin with a responsive image slider that will work on small to large screens. We'll swap out Views Slideshow in favor of FlexSlider in this lesson.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 11-flexslider)
In this tutorial, I will explain what a base, or parent, theme is in Drupal and why it can be advantageous to use it in theming. We'll take a look at what is commonly provided by a base theme, including discussing what a "starter kit" is and how it is intended to be used.
Additional resources
Zen is a base, or parent, theme for Drupal that features lean, semantic HTML5 markup and a starter kit for custom theme development. In this tutorial, we will install Zen and create a subtheme for custom theme development using Drush. I use the Drush command provided by Zen because of all of the tedious renaming required when cloning the "STARTERKIT" into a subtheme. The Drush command provided by Zen automates this and makes it a relatively painless process. If you need to install Drush, see our related video tutorial, Installing Drush with Composer, or read the instructions for installation on the Drush web site.
In the next tutorial, I'll briefly explain why you might want to use a base theme and when it makes the most sense to do so. After that, I will walk through and highlight some of the HTML5 semantic markup in Zen's template files, contrasting the markup with the corresponding template files in the core Drupal 7 theme, Bartik.
Other tutorials in the Markup in Drupal series also use a subtheme of Zen, called zendemo, as a theme for the demo site. This was done to demonstrate how markup is first and foremost affected by the theme. It was also done to show how using a base theme that uses semantic HTML5 markup can be advantageous if you want to use HTML5 elements in the built-out components and pages of your Drupal site.
To follow along, download the latest version of Drupal 7, and follow the instructions in the video for installing Zen and a creating a subtheme.
In the downloads section below you'll find a database and files downloads, which is the state of the site after this tutorial, with Zen and the subtheme "zendemo" installed.
Additional resources
In this tutorial, I will take you on a tour of some of the template files included with Zen and highlight how HTML5 semantic markup was incorporated into the markup of several different template files.
Additional resources
Zen — Drupal.org
Zen documentation — Drupal.org
HTML5 Developer Guide — MDN
This is a review what I covered in the previous tutorials in this series about Zen, including how to use Zen as a base or parent theme, why you might use a base theme in theme development, how HTML5 markup is included in Zen's template files, and how to install Zen and create a subtheme for your own custom development.
Additional resources
Now let’s take a look at how we can configure fields to use semantic markup using the Fences module. In this tutorial, we’ll install and enable Fences module using Drush. Then we’ll take a look at the configuration settings for the module. Next we’ll hop into the field settings form for the body field and select an HTML5 tag as a new markup wrapper. Finally, we’ll take a look at how Fences field settings configuration carries over to Views and how we can override Fences markup in Views' field settings.
Additional resources
This next set of tutorials relates to controlling markup in Drupal when using the Views module. We’ll cover:
- What affects markup in Views
- Selecting an appropriate Views display format as a starting point for markup output
- Customizing field markup
- Customizing wrapper selectors and CSS classes
- Accessing theming information in Views
- Overriding Views template files
Additional resources
One thing that affects markup in Views is the format that is using for the display. In this tutorial we'll take a look, step-by-step, at the Unformatted list format in Views. We'll examine its default markup, how to add custom CSS classes—and to which elements—and what it looks like to remove all of Views' default markup.
Additional resources
Continuing our look at how Views' formats affect your markup, in this tutorial we'll take a look, step-by-step, at the HTML list format in Views. We'll examine its default markup and how to add custom CSS classes to various elements.
Additional resources
As we continue to look at how Views formats affect markup, we'll now examine the Table format in Views. We'll take a look at its default markup, how to add custom CSS classes to various elements and explore other settings unique to this format.
Additional resources
We've examined the Views formats and row style formatting. Now I'll walk you through the default field wrapper markup in Views. We'll inspect the default markup for fields, remove the default field wrapper markup and I'll point out some of the implications of this action, and then I'll apply a different Views format, so that you can see how the field wrapper markup is impacted by that configuration change. This will give you a better understanding of how markup is affected at the field-level in the context of a view.
Additional resources
Now that we’re familiar with the default field wrapper markup in Views, let’s explore how to customize this markup. In this tutorial, I will introduce to you a prototype of recent posts that was built using Pattern Lab. We’ll inspect the wrapper markup of two template files that compose this media list. After getting familiar with the prototype markup, we’ll apply that markup, step-by-step, to the fields in our view of recent posts. In doing so, we will use the custom field markup settings for each field and utilize rewrite results and replacement tokens to customize our markup output even further.
Additional resources
In the next few tutorials, we'll pull back the veil of Views theming a bit and introduce some tools to help you wrangle Views' template files. In this tutorial, I'll introduce you to Views Theme Information and how to use this interface to find out which template files are being used to mark up your view.