Theme with Sass,Singularity & Breakpoint

What is included in this theme:

• Drupal’s 8 TWIG based (obviously)
• SASS partials structure
• Singularity Grid System for responsive grids
• Breakpoint media queries in Sass
• Typecsset for vertical rhythm typography
• Code syntax highlighting with Rainbow
• Naver A jQuery plugin for responsive navigation
• Google Fonts Merriweather Serif and Sans-serif families
• Font Awesome Icons

Installing Drupal 8

You can find the latest Drupal 8 Release here or on Github

As of writing this we are at drupal 8.0-alpha8. Once you have that set up on your environment, be cautious about making upgrades and installing contrib modules (if they exist for D8). At this point Drupal 8 is in active development, so things can change and break very easily. As always, Clear Cache often and backup your Database.

Drush

I had to upgrade the Drush install in order to use it with D8. Since I am using homebrew all I had to do was: $ brew unlink drush then $ brew install --HEAD drush. Also the drush cache-clear all or drush cc all command is deprecated for Drupal 8 so instead I had to use drush cache-rebuild or the short version drush cr command.

If you are using Sublime or Textmate you might find this Twig syntax highlighting and auto-completion plugin useful.

Setting up the theme

I started looking into the D8 theme set up by reverse engineering an existing core theme. You can use Bartic or Stark (now a core theme). These themes were specifically useful and helped me better understand the new API, TWIG syntax, and different variables. There are other contrib themes that are actively being ported to Drupal 8 and have lots of good stuff in them. I’ve looked at adaptivetheme and gratis as an example. For more info check out D8’s documentation or this post I put together earlier about D8 resources: Top Resources for Getting Started with Drupal 8

Theme directory

Your custom theme now goes into a “theme” directory in the root and not in the “/sites/all/themes” as we had gotten used to in Drupal 7.

.info file becomes theme_name.info.yml. Drupal 7’s .info file was proprietary to Drupal. Now D8 has adopted the YAML format which is a standard for many programming languages. The advantage of YAML is that it uses a specific standard that’s supported by other libraries.

Adding stylesheets

    # Add a CSS file:
        stylesheets:
          all:
          - css/style.css
    

You can also remove a system stylesheet. For example drupal.base.css is now replaced by normalize.css but in my theme I’ve removed it as I am using compass reset

      # Remove a CSS file:
        stylesheets-remove:
          - normalize.css
     

If you want to include a different version of normalize.css, you can also do an override:

        # Override a CSS file
          stylesheets-override:
          - normalize.css
     

Same with adding javascript files

        # scripts:
           - js/custom-script.js
    

Setting up regions

        regions:
           content: 'Content'
           sidebar: 'Sidebar'
           footer: 'Footer'
       

As you can see this is pretty straight forward, and not very different from D7.

page.html.twig

All theme files are now html.twig instead of .tpl.php. For example “page.html.twig” and variables in the template use twig syntax.

    {% if page.sidebar %}
      {{ page.sidebar }}
    {% endif %}
      

template.php becomes theme_name.theme

Libraries and Scripts

By default Drupal 8 doesn’t load any additional scripts. So jQuery is not there, you have to declare it as a dependency. Drupal 8 now comes with Backbone.js and Underscore.js which can also be your dependencies.