Drupal Theming and Site Building: 6 Best Practices
There are many ways of building sites and themes - be it Drupal, Wordpress, Magento or any Content Management System. In my particular case, after nine years of building Drupal themes, reading how other themers do it, and learning from my mistakes, I came up with a few tips I would like to share with everyone.
Choose a good base theme
As I mentioned in my previous post, Planning Your Drupal 8 Theme: Choosing a Base Theme, there are lots of factors that will influence your final decision, but you'll eventually start feeling more comfortable with one, and that will be the one you'll be using for most projects.
Study the options
My first and most important tip: choose a base theme wisely. Try to see what other people use, how they do it and what experiences they had with it.
Apart from the quality and popularity of a theme, the following questions will always help you make your choice:
- How many people use it? Some themes like Bootstrap have more than 130,000 Drupal 7 & 8 reported installs. This means more people testing it, more live sites and more interest in pushing it forward.
- Is its use increasing? A theme that more and more people use all the time is a good indicator of the project health. The "Installation ratio" indicates that it is growing up and gaining popularity across the community.
- Is there someone regularly behind it? Just feel free to check the issue queue for the latest issues and commits.
- How do I start? What if I have questions? Most themes include their own detailed docs. The issue queue is also a nice source for docs which help one learn how to work with the relevant theme.
- How safe is it? Themes and modules are as safe as any Open Source software. Check for the well-maintained ones, and make sure their stable releases are covered by the Security Advisory Policy - the green shield close to the download.
As I said before, feel free to explore all the available options at Drupal.org and ask yourself each one of those questions before making a final decision.
...and never modify the base theme
Base themes are meant to be used as base themes, not as starter themes. If you edit theme files directly, the changes may be lost when you run updates in the future. Be sure to read the Creating a Drupal sub-theme docs in Drupal.org to properly use these on your projects.
Views should always be your first approach
There are many ways to build pages in Drupal, either using Views, Panels, Blocks, "Full HTML" on the node body and so on. But there is that feeling you get when you make it work using a View:
"Wow... this is how it should be."
When you use Views, you feel you are doing it right. You feel it is reusable, portable and very flexible. Any Drupal site should be, at least, 90% Views on the Front-end side.
When creating a new page, I suggest preferring the following methods, in order: if you can't build your page with one method, only then fall back to the item below. The lower you go down the list, the less reusable and flexible your solution will be.
Can I achieve it with...?
- Views
- Panels
- Blocks
- Paragraphs
- Display Modes
- Full HTML
- Template Files
In most cases, this has worked for me over the years. Just feel free to evaluate it against solutions you have built before. I would love to hear about your experience on comments below.
Template files are the last option
Based on the list above, editing the template files (.tpl.php
on D6/7 and .twig
on D8) should always be the last option of your theming strategy.
Template files should only be considered when:
- Adding & editing regions.
- Making global layout changes.
- Customizing your layout structure.
Remember that while overriding template files of a base theme, we are risking smooth support for future updates of it, making our update process harder when newer versions of the base theme come out.
Use SASS for your styles
With SASS, the maintainability and reusability of CSS styles go to an entirely new level. It is impressive how much time is saved and how flexible and easy to maintain SASS files are, compared to traditional CSS management.
SASS helps you create styling that is more consistent across different site components, which makes themes more extensible. In a previous blog post, I detailed its benefits along with a comprehensive set of steps of how to add it to your theme while moving your existing stylesheets to SASS.
Use Paragraphs for your landing pages
Paragraphs is a new module every site builder should use for creating landing pages. It is definitely a new approach for managing different sections of content inside of the body field. You feel like you're managing movable pieces of HTML code, as it is a flexible way to add, sort & customize sections on a particular section of a page.
If you are new to Paragraphs, my colleague Suzanne Dergacheva has an interesting post that details How to Create Landing Pages with Drupal 8 and Paragraphs.
Where to go now
Well, it is definitely up to you :) but I suggest everyone to take a look at the following posts as these will help you improve your theming workflow and overall knowledge of Drupal 8:
- Using Core Base Themes in Drupal 8
- Drush Commands for Themers and Site Builders
- How to Integrate Material Design with Drupal
- How SASS and Bourbon Neat Can Save Non-Mobile Websites
And feel free to give some feedback below. Your comments will help me and everyone else improve our theming skills.
+ more awesome articles by Evolving Web