Drupal & Jekyll

Drupal Theming with Jekyll
Tagged: front-endWednesday, October 4, 2017

Outline:

  • intro pros/cons
  • things you'll need to do
  • workflow
  • Theme directly in Jekyll
  • Theme Drupal markup

I am going to share my workflow for Drupal theming that I believe greatly speeds up development time. By using other front-end tools such as Gulp.js and BrowserSync I can increase the speed of Drupal theme development by essentially theming outside of Drupal.

to get started checkout this repo on github

What am I trying to do?

I find Drupal 7 theme development very slow, and I am constantly having to fight caching (Memcache, varnish, browser etc.) to see the latest changes. I have been using Gulp.js on other projects and needed to find a way to bring that speed into Drupal.

Issues I wanted to fix

  • Theme in sass/scss
  • Have the css run through auto-prefixers, minifiers and cleaners so don't have to worry about compatibility.
  • Build bootstrap from source, so a lot of the 'extras' that I never use can be left out.
  • Eliminate issues with Drupal and all its layers of caching.
  • Bake once, I don't need Drupal to constantly process and repackage my sites css/js.

All the Parts Explained

I just wanted to quickly outline what will be going on before going any further.

  • Gulp.js

    • Is a task runner and will automate the creation of the css/js files
    • Handles sass to css generation, auto-prefixer, cleanCSS and minifies and removes comments.
    • Will combine and uglify the sites JS
    • Will connect Jekyll and BrowserSync

  • Jekyll

    • Will serve to simply 'live-style' markup
    • You can use any of Jekylls tools to also quickly generate markup similar to Drupals markup.
    • Can be used to mockup patterns or style existing Drupal markup

  • BrowserSync

    • Will run a local webserver and serve up the Jekyll pages
    • Will live inject css/js so no refreshes are needed
    • Will sync multiple browsers or devices so you can preview the site and do more cross-browser testing faster.

Things To Do First

There are a few things you'll need to setup before you can start. Most of these tools are command line, and if your on windows it will be a little extra work to get them running. You'll need to get the following working..

  1. Ruby - Install Ruby and RubyGems. Windows users can use the Ruby Installer. You may also need to install the 'Devkit'.
  2. Jekyll - gem install jekyll
  • This will use Ruby package manager (gem) to install jekyll so it can be used via the command line.
  1. NodeJS - use the installer on the site.
  • Used to install dependencies for Gulp.
  1. GulpJS - npm install -g gulp (mac users may need sudo)
  • This is the task runner that will automate everything
  1. Install Drupal Bootstrap follow the normal process of installing the Drupal Bootstrap theme. Our theme will be a subtheme of Bootstrap.

My workflow

I normally start by cloning this repo then start adding html markup on the index.html that I would like to start theming. Run 'gulp' and it should spin up a browser showing the index.html file. Then just add your sass and configure where gulp should pipe the output (your Drupal theme folder). Then normally there is a bit more work to do but it should be 90% completed.

Drupal will introduce css and js which sometimes can cause display bugs to sort out. And the other thing I often find helpful is taking Drupal markup from something like a calendar view, and pasting it into the index.html to theme. This is much faster than working on the theme directly in Drupal.