Skip to main content

My new site - Drupal 8

Drupal and Neat logos

Adventures in Drupal 8 

So I set myself the task of developing my haysi ventures site in Drupal 8.  It took me a couple of days and I thought I would share some of the ins-and-outs with you from a largely non-developer perspective, aka me!

Drupal 8 was released in November 2015 after many years of development by a committed open source community which is one of the reasons you have to love the product so much. When I've looked over the fence at Wordpress it says open source on the tin but once you start looking for contributed modules and themes you will invariably find yourself having to get your wallet out. Something I confess I've rarely seen with Drupal. There's loads of fantastic modules and themes, most of which are free and backed up by that great community I mentioned.

Back to Drupal 8. Version 8 represented a major release and for me offered a number of attractions (having used Drupal 7 quite a bit ...)

At last - Theming for non developers!

The number one element for me is the new approach to theming.  Goodbye PHP, hello Twig.

For people not familiar with Drupal, it is a content management system.  As such, editors can add and manage content through a user interface. In turn, this content is then rendered for the end user through templates and a theming engine. In Drupal 7, these templates were murky, cryptic places for non-developers written in PHP. With Drupal 8, templates are now written in Twig which is a PHP template engine allowing you to write layouts in a much more friendly and easier syntax. In reality, this means your page template is now pretty much HTML with the use of various Twig variables and commands to insert and render your content.

Why is this significant? It really does separate frontend and backend development much more cleanly with frontend developers and designers now able to develop great looking user interfaces without PHP code.

Neat Bourbon - a powerful cocktail

So what about this site?

Firstly, the theme is home grown based on 'Classy' which is an internal Drupal theme and gives you a head start to say the least with what you need.  There's a lot more I could say but if you want to know more then there are a number of articles on the web.  However, the most comprehensive guide I've found is Chaz Chumley's Drupal 8 Theming with Twig book. I can thoroughly recommend this book - its pretty well the Drupal 8 theming bible as far as I'm concerned.

I confess I am getting a little tired of Bootstrap looking sites (not knocking Bootstrap, its a great framework) so have been experimenting with Neat Bourbon. It is a semantic grid layout framework but how it differs from Bootstrap is that you can say goodbye to associating multiple classes to divs to support responsive rendering (.col-xs .col-sm .col-md .col-lg). Instead, using mixins in your Sass, you can specify different layouts dependent on the current screen size. This makes the code a lot cleaner and your layout styling ends up in your Sass rather than embedded in your HTML. For example, the contact block at bottom of this page takes up 4 columns of 13 when full screen but when rendered on a mobile device takes up 2 of 4. Here is the Sass snippet:

#block-contact {
	@include span-columns(4 of 13);
	@include media($mobile) {
		@include span-columns(2 of 4);

For those of you thinking 13 is a funny number, on the full screen version, 3 columns are dedicated to the left hand column containing the header and nav elements, making 16 in total. On the mobile version of the site, there are just 4 columns in total. Yes, you can change base grids based on device screen size!

Other mixes are available ...

Neat also comes with Bourbon (a handy mixins library) and Bitters which is essentially a set of scaffold styles, variables and structure for your project. Here's the other thing ... its pretty lightweight so easier to get into, understand and maintain in my opinion. It gives you a great set of base styles for your elements and the necessary mixins to start your layout.

Good practice

And the number one lesson from developing this site? Perhaps, not surprisingly, design your layout before coding! Of course, I know this but got caught up in the technology which meant there were a few visits to and forth to sort out issues. Luckily the ease at which you can now change layouts with Twig and Neat meant this wasn't as much of a disaster as it could have been but seriously kids don't try this at home.