Gesso

Gesso is a Sass-based, Webpack-based, and Storybook integrated accessible starter theme. Gesso (pronounced JEH-so) is an art term for the white paint mixture used to prepare a canvas or sculpture for painting. Likewise, the Gesso theme prepares Drupal’s markup and styles to give us a clean starting point. While Gesso includes starting components and base styles, it is meant to be customized and built on to develop a custom theme.

Visit the Gesso Storybook demo site.

Gesso uses a mobile-first responsive approach and leverages SMACSS to organize styles and BEM CSS class names 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 makes use of Storybook features such as controls for flexible demonstration of components. In addition, Gesso comes with a helper module that provides some additional Twig functions and a field formatter for easier integration between Storybook UI components and Drupal.

All development for the Gesso theme is done on Github at github.com/forumone/gesso.

Also available in a version that integrates the U.S. Web Design System.

Requirements for 6.x

• Components Libraries module
• Twig Tweak module
• To compile Storybook and Sass, Node version 24.x.x or greater and npm version 11.x.x or greater.

See the README at github.com/gesso for 6.x full installation instructions.

The major change in 6.0.0 is the refactoring of the theme to use Single Directory Components. Version 5.x is now deprecated unlikely to see additional releases.