Prius is in Alpha 15

Created on
Updated on
Written By
Prius is in Alpha 15

Today, we are very excited to announce the latest release of our Drupal 8 theme Prius. Alongside a full support of Drupal 8 Alpha 15, we have included a number of new features. This release is particularly exciting as we are one step closer to an official launch of Drupal 8. Indeed, Drupal Alpha 15 is the first candidate for a Beta release. Meaning if no new beta blocker bugs are found within the next coming days1, we could see the first Beta version of our favourite "CMS" very soon.

Prius theme

Anyway, let's dig into the latest additions of our theme. 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.

Base theme

Prius is a base or also called a starter theme. It's designed to give you a head start building your own unique theme. With almost no styling, Prius give you the foundation to properly implement your theme. Alongside our base theme, we have added a starter-kit. You can now use the starter-kit as a subtheme. Subthemes inherit all style sheets, javascript, templates and preprocess functions from their base theme. Using a subtheme will make it easier to upgrade and benefit from the future enhancements of Prius.

#starterkit.info.yml
name: STARTERKIT
type: theme
description: 'HTML5, SASS, Responsive grid base theme.'
tags: 'responsive'
version: VERSION
core: 8.x
base theme: prius
#base theme will be replaced by parent in the next release or if you are tracking the HEAD.
#parent: prius

Bundler

Bundler is the standard dependencies manager for Ruby, like composer is for PHP, or npm is for node.js. It's highly encouraged you use it to make sure your project is using the correct version of your gems. This is particularly true if you are working on a team, and want to share a common development environment. Well, the good news it that installing Bundler is easy, type the following into your command line - gem install bundler - and you are done.

Once you've installed Bundler, in your theme's directory, where your `config.rb` file is, create a file called `Gemfile`. A Gemfile describes the gem dependencies required to execute associated Ruby code. The one in the Prius theme look like this:

# Gemfile
source "https://rubygems.org"
gem 'susy', '~> 2.1.3'
gem 'compass', '~> 1.0.1'
gem 'sass', '~> 3.4.5'
gem 'breakpoint', '~> 2.5.0'

Next time you compile your css, do not use 'compass compile' as it will use the latest version of your different gems installed on your system. Once you have created your Gemfile, you need to run the 'compass compile' through 'bundle exec'. This way, you make sure you are building your code with the gems you have selected.

# bundler exec compass clean
# bundler exec compass compile
# bundler exec compass watch

Twig filters

Twig filters can be used to transform data. Twig has a long list of filters like 'date', 'upper', 'lower' or 'capitalize'. Drupal 8 provides also a few extra filters like 'clean_class',  'clean_id' or the translation filter 'trans'. Furthermore, you could create your own filter but we'll try to cover that in a future blog entry.

  set classes = [
    'node--type-' ~ node.bundle|clean_class,
  ]

  Copyright {{ "now"|date("Y") }} by Mariquecalcus.

Theme Settings

Theme settings allow you to expose particular settings through the "theme settings form". It allows the site builder to adjust the theme quickly through configuration. Adding, removing or altering those settings is fairly easy thanks to the Form API, which does the heavy lifting for you. You'll just need to create a theme-settings.php file in your theme and implement the hook_form_FORM_ID_alter(). You'll notice that the form_state is now a classed object, and not an array anymore. The default values of your settings are simply defined in your info file.

#theme-settings.php
/**
 * Implements hook_form_FORM_ID_alter().
 *
 * @param $form
 *   An associative array containing the structure of the form.
 * @param $form_state
 *   The current state of the form.
 */
function prius_form_system_theme_settings_alter(&$form, FormStateInterface $form_state) {

  /**
   * Libraries.
   */
  $form['libraries'] = array(
    '#type' => 'fieldset',
    '#title' => t('External libraries'),
    '#collapsible' => TRUE,
  );

  $form['libraries']['enable_respond'] = array(
    '#type' => 'checkbox',
    '#title' => t('Enable Respond library'),
    '#description' => t('Min/max-width media query polyfill for IE 6-8'),
    '#default_value' => theme_get_setting('enable_respond', 'prius'),
  );

  $form['libraries']['enable_selectivizr'] = array(
    '#type' => 'checkbox',
    '#title' => t('Enabling Selectivizr library'),
    '#description' => t('Emulates CSS3 pseudo-classes and attribute selectors for IE 6-8'),
    '#default_value' => theme_get_setting('enable_selectivizr', 'prius'),
  );
}

#prius.info.yml
settings:
  enable_respond: '1'
  enable_selectivizr: '1'

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.

1. There is already a few new beta blockers around the deprecated procedural functions l() and url().