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 for WordPress and in a Drupal version that integrates the U.S. Web Design System.

The 5.x release of Gesso uses Storybook for its pattern library. Older 4.x releases use Pattern Lab.

Requirements for 5.x

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

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

Requirements for 4.x

• Components Libraries module
• To compile Pattern Lab and Sass, npm, Gulp and PHP need to be available on the command line.

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