Layout in Drupal 8, Part 1July 19, 2017
What's the best approach for building out web pages in Drupal? If you’re a designer, site builder, themer or editor in charge of producing a functioning website, layout is an important consideration.
Of course we’re talking about content, but also functionality and design – you likely have custom designs you need to turn into functioning webpages, complete with different regions, different media, different callouts and multiple columns.
If you're new to Drupal 8, or just Drupal in general, there are many options and approaches you could take. Let’s take a look at what’s available, what’s changed in Drupal 8, and how you can make the right decision for building your custom website.
1) Themes and Regions
Themes get defined under the Appearance tab of your admin tools. Bartik remains the default theme from Drupal 7 to Drupal 8, but with some edits around responsive theming and using the new-to-Drupal-8 Twig language for theme templates.
Bartik provides some initial theming, including a variety of custom .css files, organized in SMACSS folder structure recommended in Drupal 8. A series of blocks are already placed for you, such as the site menu, and a number of custom templates are provided, for components such as the site branding, search form, comments, and other small details.
Bartik provides a variety of pre-defined regions for content. Regions in a Drupal theme are the areas in a template where content can be placed. These typically include a Header, Footer, and Content region at minimum, but can be expanded to include various sidebars, menus, breadcrumbs, and columns of regions for content. Bartik gives you around 17 regions by default, for a lot of layout flexibility.
For each region, editors can place blocks or other content, depending on the setup and customization of each site. Regions can be easily added or removed from a theme by editing a theme’s .html.twig.php template file, and a theme’s .info.yml file.
3) Display Modes
Similar to Drupal 7, editors can affect the display of their content fields via the “Manage Display” screen. New to Drupal 8 (core) is the ability to create additional display modes, beyond the usual “Default” and “Teaser”. This used to require the Display Suite module or the Entity View module.
Also new to Drupal 8 is the separation of “Manage Display” (what the end user sees) and “Manage Form Display” (what the editors see). This allows for the creation of some more editor-friendly experiences, and customization of the screens for editing content.
What Hasn't Changed
Using Display Modes, an editor can rearrange content fields, show/hide labels, and affect the format of some content such as images. It remains as one-column, however, and not exposed to additional layouts such as a 3-column layout. To do that, you’ll need some additional modules, as we will see in Part 2 of this article.
Views is still with us in Drupal 8, but now in core! Views remains a fantastic visual database query tool, frequently used in making lists of content. But it’s also a handy tool for laying out content in rows and columns.
Data can be displayed in tables, lists or grids, similar to Drupal 7. But in Drupal 8, the grid format uses <div> instead of old-fashioned <table> data, which makes for a better responsive experiences.
Rendered entities, including blocks or other views, can be embedded inside custom views, for complex collections of data.
This has been a broad overview of Drupal 8’s many options for layout. For a deeper dive into Blocks, Views, or any of these other topics, I recommend some additional links.
In Part 2 of Layouts for Drupal 8, we’ll look at some of our favorite modules for expanding our layout options.
Have questions or comments, please add them below.