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. Gesso USWDS uses the United States Web Design System's starting code as well as the components from the Gesso starting theme.
Visit the Gesso USWDS 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.
The United States Web Design System is a set of design guidelines and starting code for creating digital government services. For more information view the USWDS project website or the
USWDS Github repo.
All development for the Gesso USWDS theme is done on Github at github.com/forumone/gesso-uswds.