Drupal Global Sprint Weekend and Basic 8.x-1.0

0 min read

Leah Wagner

This past weekend, The Jibe hosted the Vancouver edition of the Drupal Global Sprint Weekend. Our thriving Vancouver community came together and worked on getting a variety of Drupal contrib projects ready for Drupal 8. (For those unfamiliar with Drupal jargon, contrib projects are modules and themes contributed by the community that extend the functionality of Drupal core.)

While work getting the Basic theme ready for Drupal 8 has been ongoing over the last year or so, this weekend allowed us to put on the finishing touches needed to get a stable 8.x-1.0 release out to the community!

New to Basic 8.x

Let's have a look at what's new about this release of Basic, as well as some upcoming features.

PHP Template > Twig

First off, we had to make Basic work with Drupal 8’s new Twig theme engine. This meant updating the syntax of our templates from PHP template to Twig.

Drupal 7: node.tpl.php (excerpt)

<div class="content"> <?php hide($content['comments']); hide($content['links']); print render($content); ?> </div>

Drupal 8: node.html.twig (excerpt)

<div{{ content_attributes.addClass('content') }}> {{ content|without('links') }} </div>

We also have many more templates available to us in Drupal 8. Where we would previously rely on theme hooks, we now have a much more intuitive template system to work with. This shift is going to make Drupal much more accessible for frontend developers that are new to Drupal.

Drupal 7: tempalte.php

function theme_menu_local_tasks(&$variables) { $output = ''; if (!empty($variables['primary'])) { $variables['primary']['#prefix'] = '<h2 class="element-invisible">' . t('Primary tabs') . '</h2>'; $variables['primary']['#prefix'] .= '<ul class="tabs primary clearfix">'; $variables['primary']['#suffix'] = '</ul>'; $output .= drupal_render($variables['primary']); } if (!empty($variables['secondary'])) { $variables['secondary']['#prefix'] = '<h2 class="element-invisible">' . t('Secondary tabs') . '</h2>'; $variables['secondary']['#prefix'] .= '<ul class="tabs secondary clearfix">'; $variables['secondary']['#suffix'] = '</ul>'; $output .= drupal_render($variables['secondary']); } return $output; }

Drupal 8: menu-local-tasks.html.twig

{% if primary %} <h2 class="visually-hidden">{{ 'Primary tabs'|t }}</h2> <ul class="tabs primary">{{ primary }}</ul> {% endif %} {% if secondary %} <h2 class="visually-hidden">{{ 'Secondary tabs'|t }}</h2> <ul class="tabs secondary">{{ secondary }}</ul> {% endif %}

Managing Dependencies

We want to keep Basic, well, basic. Having complex system and package requirements - or dependencies - can make a Drupal theme hard to work with. We want to give users all the modern tools but give them the opportunity to keep it simple if that is what you need.

Basic was one of the first themes to use Sass, but users always had the option to simply use CSS if they preferred -- that hasn’t changed. However, if you chose to use Sass, there was a further dependency on Ruby for Sass globbing. In the past year, we have seen many developers switch to libSass from Ruby Sass for faster compile times and better cross-platform compatibility. Because of this, we have now removed the Sass dependency on Ruby and given users the option to either use Ruby Sass or libSass with Grunt.

Build Tools

Bower Package Management: We are now using Bower to help us get the most recent versions of Bourbon and Bourbon Neat each time the theme is used. As theme maintainers, we were continually keeping Bourbon and Bourbon Neat up to date and committing it to our code repo. There were two issues with this. First, we had to paying attention to the release cycle of another project. Second, while Bourbon has an MIT licence, it is not on Drupal’s packaging whitelist, and cannot be hosted on Drupal.org. This does introduce a dependency and will require users to have node/npm and bower setup on their computers. Luckily, both of these package managers have well documented install processes.

Grunt: We have built on what was in place for Drupal 7. Grunt offers us some great tools like code minification and image optimization. As previously mentioned, this is how we have made libSass available to Basic users. We have also added in a package for SVG optimization.

Drush install and renaming script (Coming soon to 8.x-1.1): Basic is not meant to be a base theme so most users download it and make it their own. This means, they usually rename it. We are working on a Drush script that will handle all of this for you. For example, Drush users could simply type drush basic-install and they would be ready to go!

Additional updates and improvements

Class and ID cleanup New SMACSS folder structure and theme library implementation. Read more on this. Improved base styles inspired by Bourbon Bitters -- which seemed like a good fit as we were already using Bourbon and Bourbon Neat libraries.

Don’t be intimidated by the not-so-basic build tools! Basic's goal is the same -- to provide themers the building blocks needed to get their designs up and running quickly and simply. These tools will get you there, but you won’t need to know all the bits about how or why it works (unless you want to) -- hopefully, they just will! Take a look at the new and improved docs and see what you need to get started.

Tell us what you think

Have any suggestions or need some help getting started? Take a look at the issue queue and reach out if you can’t find what you are looking for.