Feature

In 2010, Ethan Marcotte published his seminal article, “Responsive Web Design,” and the way we build web sites was forever changed. Although Drupal 7 came out at the beginning of 2011, there was nothing in core to support the themers who wanted to build responsive websites. By 2012, all of the popular base themes offered a stable release which included a responsive starting point. As of Drupal 8, the core themes, and the administrative interface, will be responsive – making Drupal usable at any viewport width.

The original tenets of responsive web design had three directives:

1. Use a fluid grid to lay out page elements.
2. Make images flexible, and responsive to their parent container.
3. Use media queries to specify which styles should be assigned for any given viewport width.

In practice, it has been a lot more complicated to implement these guidelines so that they work across devices and are respectful of the slower connection speeds we often experience on mobile devices.

In this article we'll take a look at how to implement each of these three principles in your Drupal 8 themes. The article was written against Drupal 8.0-alpha13. Some things are likely to have changed between now and Drupal 8's official release. Where possible, I've noted where this might be the case.

Fluid Grids

Out of the box Drupal 8 does not provide any support for a universal fluid grid. It does, however, provide the cleanest, most semantic markup of any version of Drupal to date. Markup is almost entirely contained in template files, and the theme function has been virtually eliminated from core. All of these changes were accomplished by the team working to convert Drupal from PHPTemplate to Twig. As a result, it will be significantly easier to drop in your grid layout system of choice – whether it is custom built, or part of a framework such as Bootstrap or Foundation.

Working with a base theme is still, of course, an option for you. As of this writing, there are no base themes with a completely functional Drupal 8 release; however, a few have Drupal 8 branches if you'd like to help with their upgrade process.