Gesso Drupal theme
Clone or download
coreylafferty Merge pull request #181 from forumone/add-raw-remove-if-has
added |raw where needed and removed if has_? calls
Latest commit cd408df Dec 12, 2018


Gesso is a Sass-based starter theme that outputs accessible HTML5 markup. It uses a mobile-first responsive approach and leverages SMACSS to organize styles as outlined in the Drupal 8 CSS architecture guidelines. This encourages a component-based approach to theming through the creation of discrete, reusable UI elements. Gesso is heavily integrated with Pattern Lab and the Component Libraries module, allowing Drupal and Pattern Lab to share the same markup.

For more information, view the Gesso Drupal project page or Gesso GitHub repo. To submit bug reports or feature requests, visit the Gesso issue queue.

Global Prerequisites

The following packages need to be installed on your system in order to use Gesso.


  1. Place the Gesso theme in your site’s theme directory. (e.g., themes/gesso) Read documentation on installing themes for more information.

  2. Install the Component Libraries module. Since many of the Drupal templates reference twig files inside Pattern Lab using Twig namespaces, this module is required for the theme to function.

  3. Optional: Install the Twig Field Value module. This is not required, but will make working with Twig templates easier.

  4. Optional: Install the Twig Tweak module. This is not required, but will make working with Twig templates easier.

  5. Optional: Because Gesso is a starter theme, you may want to rename the Gesso directory or copy its contents to a new custom theme directory based on the name of your project.

The easiest way to accomplish this is to use Drush. Type drush gesso --help for more information.

If you can’t use Drush, then manually replace all instances of 'gesso' within this directory with a machine-readable name of your choice, including folder names, filenames, and all occurrences within files. This custom name must start with a letter and may only contain lowercase letters, numbers, and underscores.

Edit the .info.yml file and update the theme name and description. You can also change the screenshot image (images/screenshot.png) shown on the Appearance admin page.


Gesso includes several theme-specific settings for managing classes output by Drupal, which you can change at admin/appearance/settings/gesso.

Compiling Pattern Lab and Sass

LibSass is required to compile the Sass into CSS. Gesso includes Grunt tasks to compile the CSS and generate the compiled Pattern Lab files and to watch both for changes. To use these tasks, first run the following NPM command in the theme folder (Windows users may need to include the --no-bin-links flag at the end of the command).

npm install

Once the above command is run, the _starter-kit folder that comes with Gesso will be renamed to pattern-lab/source. This directory contains all of the Pattern Lab Twig templates and Sass files.

To initiate the Grunt build tasks that compile the Sass and Pattern Lab files, run the following command in the theme directory:


Creating New Components

Gesso includes a script to generate new component files. To use, run the following command in the theme folder.

node component

Build Artifacts

By default, the compiled Pattern Lab and Sass files (e.g., /pattern-lab/public/ and /css/) are ignored by Git as these files are built during deployment. To change this, edit the included .gitignore file.

Sass/Grunt dependencies

  • Breakpoint: Easy to write media queries.

  • Sass: CSS on steroids. Adds nested rules, variables, mixins, selector inheritance, and more.

  • Sass Globbing: Adds glob-based imports to Sass.

  • Autoprefixer: Adds necessary browser CSS property prefixes during Sass compilation.


The Gesso theme is maintained by Dan Mouyard (@dcmouyard), Chaz Chumley (@chazchumley) and Corey Lafferty (@coreylafferty).

Please use the Github issue queue: