Prius is in Beta like Drupal :-)

Created on
Updated on
Written By
Prius is in Beta like Drupal :-)

Alongside the long awaited Drupal 8 Beta release, we have also updated our first Drupal 8 theme. We haven't include many new features but we have tried to clean up its code and have improved our starter kit. Anyway, let's dig into the latest new features we have discovered with the first Beta releases of Drupal 8. Feel free to check out the code on drupal.org or read our dedicated blog entry if you want to find out more about our first Drupal 8 theme. If you can wait to see the result, take a look at our online demo.

 

Enable debug tools

Enable the built-in twig debugging capabilities is fairly easy. Edit your sites/default/services.yml and amend the twig parameters. You will see appearing in your HTML a bunch of theming information like the templates suggestion. This will make the themers happier, as they will know which templates they can override, and will have full control over the markup. By the time Drupal 8 is release, all the theme functions should have been converted into twig templates which is another great Drupal 8 simplification.

parameters:
  twig.config:
    # Twig debugging:
    debug: true
    # Twig cache:
    cache: false

Twig has a limited and clumsy variable inspection function called dump(). So I would highly recommend to use the awesome Devel module. Download the latest version and enable Devel and Kint. You now have a proper tool to inspect any variables within your code.

{{ kint(_self) }}
{{ kint(_context) }}
{{ kint(_charset) }}
{{ kint(variable) }}

Menu template

Theming menus in Drupal 7 was, to say the least, difficult. For those who tried, they had to play with stuff like links__system_main_menu() or menu_tree(). Drupal 8 is the first to provide a template for your menus, making them more flexible and easier to customize. Prius comes now with a new responsive navigation supporting up to two levels. If you want to see it in action, don't forget to expand your navigation items and select the appropriate level in your menu block settings.

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul class="menu menu--level-root">
    {% else %}
      <ul class="menu menu--level-{{ menu_level }}">
    {% endif %}
      {% for item in items %}
        {%
        set classes = [
          loop.first ? 'first',
          loop.last ? 'last',
          item.below ? 'has-sub',
        ]
        %}
        {% if item.below %}
          <li {{ item.attributes.removeClass('leaf','expanded','active-trail').addClass(classes) }}>
          <span class="submenu-button"></span>
        {% else %}
          <li {{ item.attributes.removeClass('leaf','expanded','active-trail').addClass(classes) }}>
        {% endif %}
            {{ link(item.title, item.url) }}
            {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
          </li>
      {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}

Image styles

Since Drupal 8, image styles can be easily packaged within your theme:

  • Create the image styles using the Drupal UI
  • Export them through the CMI (Configuration Management Interface).
  • Save the exported YAML in the config/install directory of your theme following the appropriate naming convention given by the CMI.

When your theme is enabled your custom image styles will just be available and ready to use.

BEM 

BEM stands for "Block, Element, Modifier" and is a simple but effective way to group together different components/widgets. The naming convention follows a simple pattern to format your different class names.

.site-search {} /* Block = COMPONENT)*/
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */

Prius will use the SMACSS system to conceptually categorize CSS rules and will apply the BEM methodology as they actually play together very nicely.

If you haven't had the change to do it yet, have a look at our online demo. Please join us in the issue queue if you have questions or ideas on how to improve our Drupal 8 theme. If you want to know more about our first Drupal 8 theme and the awesomeness packed with it, check out our recent blog entry.