A forest of designs without subthemes: Implementing Georgia.gov's front-end in Drupal 8
mdrummond
As Digital Services Georgia worked to move from Drupal 7 to Drupal 8, one of the front-end challenges was how to accommodate the design needs of 85+ sites, when agency stakeholders want their site to not look exactly the same as all the others.
One of Lullabot’s front-end architectural goals in implementing Georgia’s new design system was to avoid a slew of subthemes that would be difficult to maintain over time. Another important goal was to create a pattern library that would aid in the development of a component-based front-end, but which would also stay in sync with the site as we move towards launch and beyond. Finally, Digital Services Georgia also wanted to implement high-quality typography in their new design system and brought in Jason Pamental to help further systematize the typography and color usage throughout the sites.
Ultimately we found that by using a number of newer CSS techniques, we were able to create a flexible, maintainable front-end architecture.
Drupal 8 allowed us to use Layout Builder to provide a great deal of flexibility to site owners in how they laid out their home pages and landing pages while using the same set of components throughout all of the sites. We achieved further flexibility by allowing each site to select a particular color palette, using CSS variables to handle color variations per palette. Systematized typography—using variable fonts!—helped as we built out a large number of components. Using the full range of modern layout options like CSS Grid and Flexbox also helped to achieve complex designs within tight timeframes. And yes, all of these newer techniques have fallbacks for IE11. Finally, with Twig in Drupal 8, we were able to fully integrate components that could be used in both Pattern Lab and Drupal 8, so that the pattern library can stay maintainable without making updates in multiple places.
The key goal of this session is to show how front-end architectural decisions aren’t about code and CSS alone—these decisions can help to solve real business and organizational needs. We will take a look at some fun front-end details too. Hopefully this session will have good takeaways both for organizational stakeholders and for folks who like to make diagrams illustrating the stacking contexts of their z-indexes.
https://www.drupalgovcon.org/2019/program/sessions/forest-designs-without-subthemes-implementing-georgiagovs-front-end-drupal-8
As Digital Services Georgia worked to move from Drupal 7 to Drupal 8, one of the front-end challenges was how to accommodate the design needs of 85+ sites, when agency stakeholders want their site to not look exactly the same as all the others.
One of Lullabot’s front-end architectural goals in implementing Georgia’s new design system was to avoid a slew of subthemes that would be difficult to maintain over time. Another important goal was to create a pattern library that would aid in the development of a component-based front-end, but which would also stay in sync with the site as we move towards launch and beyond. Finally, Digital Services Georgia also wanted to implement high-quality typography in their new design system and brought in Jason Pamental to help further systematize the typography and color usage throughout the sites.
Ultimately we found that by using a number of newer CSS techniques, we were able to create a flexible, maintainable front-end architecture.
Drupal 8 allowed us to use Layout Builder to provide a great deal of flexibility to site owners in how they laid out their home pages and landing pages while using the same set of components throughout all of the sites. We achieved further flexibility by allowing each site to select a particular color palette, using CSS variables to handle color variations per palette. Systematized typography—using variable fonts!—helped as we built out a large number of components. Using the full range of modern layout options like CSS Grid and Flexbox also helped to achieve complex designs within tight timeframes. And yes, all of these newer techniques have fallbacks for IE11. Finally, with Twig in Drupal 8, we were able to fully integrate components that could be used in both Pattern Lab and Drupal 8, so that the pattern library can stay maintainable without making updates in multiple places.
The key goal of this session is to show how front-end architectural decisions aren’t about code and CSS alone—these decisions can help to solve real business and organizational needs. We will take a look at some fun front-end details too. Hopefully this session will have good takeaways both for organizational stakeholders and for folks who like to make diagrams illustrating the stacking contexts of their z-indexes.
https://www.drupalgovcon.org/2019/program/sessions/forest-designs-without-subthemes-implementing-georgiagovs-front-end-drupal-8