Demo of a Free Drupal 8 Theme created with LibSass & Gulp

February 23, 2015
blog author


Senior Front End Developer

This post is more of a demo rather than a blog post. I have created a Free Drupal 8 theme called Monoset. This theme utilizes concepts and tools that I've previously discussed in this and this post.

Monoset Demo

You can grab the source code on GitHub or as a drupal project. Monoset is Free, so use it as you like.

The goal was to create some sensible defaults and a reusable work-flow with Node.js, LibSass and Gulp pipeline.

The theme uses mobile-first, responsive design approach and encourages component-based theming through the creation of well structured sass partials and reusable UI elements.

What is included in this theme

Requirements & Instalation

  • In order to get going you will need Node.js and Gulp set up on your system.
  • If you have “homebrew”: $ brew install node
  • Install Gulp globaly $ npm install -g gulp
  • CD into the theme directory and run $ npm install to fetch all the node dependencies.
  • For BrowserSync update proxy server (line 73 in gulpfile.js) to match your local set up.
  • Next in the theme directory run “gulp” to start gulp watching, compiling and Browser Syncing.

Again, some of the additional info on this set up can be found in this post: Using LibSass, Gulp & BrowserSync for a Drupal 8 Theme as well as here: Adding JS and CSS assets to a Drupal 8 theme.

Also here is sideshow of a presentation I did at Drupal Demo night in Montreal, it summarizes few of these steps as well.