SlideShare a Scribd company logo
Implementing Georgia.gov's front-end in Drupal 8
A forest of designs

without subthemes
Marc Drummond
Senior Front-end Developer

Lullabot
Marc Drummond
Senior Front-end Developer

Lullabot
Marc Drummond
Leadership Team

Drupal Diversity & Inclusion Group



Speaker Diversity Initiative Lead

Speaker Diversity Workshop
September 21 & 28, 1–3:30 ET
drupaldiversity.com
Georgia.gov front-end
85+ sites
But first…
… something that is not a website.
–Steve Jobs
“Most people make the mistake of thinking design
is what it looks like. People think it’s this veneer—
that the designers are handed this box and told,
‘Make it look good!’
“That’s not what we think design is. It’s not just
what it looks like and feels like. 

Design is how it works.”
Front-end development is more than
implementing a design.
Front-end development can solve

real business problems.
We can use newer front-end techniques—including
newer CSS—to address organizational needs,

while preserving backwards compatibility.
Conversation—early and often—is key.
Key features to discuss
❖ Pattern library integration
❖ Drupal 8 and Pattern Lab
❖ Typography
❖ Variable fonts for fun and profit
❖ Palettes
❖ An alternative to subthemes
Wrapping up
❖ Planting a forest
❖ Building out a library of components
❖ Lessons learned
Pattern library integration
Drupal 8 and Pattern Lab
–Anna Debenham, A Pocket Guide to Front-End Style Guides
“Style guides set a precedent, demonstrating 

how the designer or developer expects

something to be done in the future.
“Front-end style guides come in many shapes and forms 

but they all share a common purpose: to make maintaining 

a site easier. A front-end style guide uses real code

and works in the browser.
“A style guide explains how things are going to look, whereas
a pattern library tends to focus on how they work.”
Pattern libraries often drift out of sync as

site launch approaches.
Problem
Ensure site uses markup in pattern library.
Solution
Front-end work is often the last drop in the waterfall.
Problem
Develop components in pattern library first,
integrate with Drupal later.
Solution
Front-end components may be used outside Drupal.
Problem
Be careful with separating Drupal logic from
component logic where possible.
Solution
Business needs
❖ Pattern library should reflect real-world sites
❖ Back-end work should not block front-end work
❖ Front-end may need to be used beyond Drupal
Pattern Lab and Drupal 8
Key Technology
Drupal Twig templates use components:

embed, include, extend
Pattern Lab
Drupal 8
Drupal template
Component template
Pattern Lab and Drupal 8
Key Technology
Data Transform Plugin in Pattern Lab 

can include patterns within yml files,

mirroring Drupal data patterns
news-page.yml
bio-page.yml
Pattern Lab integral to project success
Key Takeaway
Front-end work could start as designs were being
completed, and the pattern library stayed in sync
even as we moved towards and past launch.
Typography

Variable fonts for fun and profit
Difficult to maintain design consistency across 85+
sites when relying upon editors selecting photos.
Problem
Put extra time and effort into typography, 

which is not controlled by editors.
Solution
Having a variety of font weights helps typography,
but can slow down the site loading speed.
Problem
Variable fonts allow a single font file to deliver a
wide range of font weights.
Solution
IE11 does not support variable fonts.
Problem
Implement font loading strategy so that IE11 still
gets correct fonts, without some enhancements.
Solution
Large number of front-end components, each with
numerous typographic elements that need to
change responsively.
Problem
Standardize a type system to speed development.
Solution
Business needs
❖ High-quality typography elevates design without
requiring as much art direction as photographic images
❖ Site must load quickly despite variety of font weights
❖ Reduce time for building out numerous front-end
components
Source Serif Pro: Variable font
Proxima Nova: Webfont
Variable fonts in Firefox
Variable fonts in Firefox
Font loading
Key Technology
Developed matrix of font scenarios, then used proven font loading
techniques like FontFaceObserver, coupled with session variables and
preloading, to ensure fast page load experience.
Type size and style definitions
Key Technology
Defined variety of type sizes and how those varied by viewport.

Defined type styles that used type sizes, along with variable font changes
of size, weight and line height by viewport. Plus fallbacks.
Type sizes and styles
Type size definitions
Type style definitions
Coordinating typography terms
Key Strategy
Worked with designers to modify Sketch files to use type style names
consistently. This allowed front-end developers to check which type style
was applied in Sketch, then use that keyword in the mixin.
Type style in Sketch
Type style library in Sketch
Typography enhanced design & dev
Key Takeaway
Leveling up the site’s typography gave us a big win on design across 

all sites, and good communication with the design team helped 

make the front-end development work much more efficient.
Palettes

An alternative to subthemes
Subthemes can allow for variations in design for
different sites, but often get wildly out of control.
Problem
Limit per-site editorial control to selecting a color palette.
Solution
Using a class for each palette to vary colors within
components can result in really complicated CSS.
Problem
Use CSS Custom Properties to vary colors in components.
Solution
IE11 and CSS Custom Properties…
Problem
Use JS (CSS Vars Ponyfill) with some limitations so that
color palettes will work in IE11.
Solution
Icons need to vary based on color palette.
Problem
Use SVGs for illustration icons, customizing markup to
make use of CSS Custom Properties for stroke and fill.
Solution
Icon SVGs
Business needs
❖ 85+ sites need to differentiate each other visually,
sometimes by varying color choices
❖ Minimize maintenance costs of variations between sites
❖ Illustration icons also need to vary based on site colors
Drupal theme settings
Key Technology
Config set within the theme that can vary on a per site basis.

Created a visual selector to demonstrate the palette being selected.

Selection adds a class to HTML for use with CSS Custom Properties.
Selecting palette in theme
Pattern Lab: JS and session variables
Key Technology
For Pattern Lab, we used a simple form input and connected that with
some JS that set a session variable, as well as JS that checked the session
variable in order to add a class to the Pattern Lab HTML.
Selecting palette in Pattern Lab
CSS Custom Properties
Key Technology
Also known as CSS Variables, these have advantages over 

Sass variables, because they can change based on information 

available when somebody visits a site.
CSS Custom Properties
IE11 fallback: CSS Vars Ponyfill
Key Technology
The CSS Vars Ponyfill provides the most robust fallback for IE11, with
the limitations that custom properties must be set at the root level. This
required outputting separate stylesheets for each palette for IE11.
Defining swatches and palettes in yml
Key Technology
In order to ensure IE11 compatibility, we needed to create definitions for
swatches and how those swatches were used in palettes within yml, so we
could access the data through both Sass and custom Twig functions.
Swatch and palette definitions
Swatches, tints and shades
Key Strategy
To handle the variations of colors across palettes, we first defined 

an overall set of named swatches—a specific color—along with 

tints and shades of those swatches.
Tints and shades of swatches
Swatches and roles in palettes
Key Strategy
All palettes have a certain set of functional and global color roles.

We assign a specific swatch to each role for each palette.

That role gets associated with the swatch through CSS Vars.
Varying color roles across palettes
Using color roles with components
Key Strategy
Within component CSS, whenever you would assign a color value with a
variable, we instead use a Sass function with an argument with the
name of a color role. Sass turns this into a CSS Var.
Palette color functions
Varying link color per palette
Key Strategy
Because different palettes use different sets of hues, blue links worked
better with some palettes, green worked better with others. So some
complicated Sass was needed to redefine CSS Vars for links per palette.
Modern technology saves maintenance
Key Takeaway
Avoiding subthemes eliminates a huge risk from the maintenance plan
from the site. Developing the palette system did require a time
investment, but created much leaner CSS.
Accept that fallbacks are not perfect
Key Takeaway
The palette fallback for IE11 means a delay in colors displaying, 

because it relies upon JS to rewrite the CSS. However, the fallback

does work, and lower performance in IE11 was acceptable.
Stay on top of current browser technology
Key Takeaway
The solution developed to allow sites to vary their color palette 

without using subthemes was only possible due to an awareness of 

CSS Vars as an option. Having front-end devs in the room is key.
Planting a forest

Building a library of components
With large number of developers working on
implementation, consistency could be challenging.
Problem
Onboarding conversations help keep principles clear,
continue conversations with regular team chats.
Solution
Megh Plunkett, Lullabot
Great front-end implementation team
Front-end
Marlene Wanberg, Contractor
Cristina Chumillas, Contractor
Amanda Luker, Advomatic
Mario Hernandez, Media Current
David Barrentine, Media Current
Marc Drummond, Lullabot
Back-end
Hawkeye Tenderwolf, Lullabot
Marcos Cano, Lullabot
Project management
Darren Petersen, Lullabot
Donna Sumner, DSGA
Design
Rachel Hart, DSGA
Jason Pamental, Independent
Marissa Epstein, Lullabot
With a massive number of components to implement,
important for lead to review code for consistency.
Problem
Once patterns had been solidly established, appointed
Deputy Sheriff Megh Plunkett to help review code.
Solution
When a project gets large enough, you may want to
dedicate a team member who focuses primarily on
making sure code gets merged, answering questions
and helping with challenges.
… of course if you are primarily focused on reviewing
code, and you have 15–20 PRs to review, and you also
have important features that need to be developed…
just make sure to keep discussing priorities!
Lessons learned
Front-end development can help solve 

key business problems
Bring in senior front-end developer or architect
early enough to help identify and plan for 

key challenges
Front-end development is more than
implementing a design.
We are experts on how web pages are 

actually processed by browsers and 

how people actually interact with sites across a
wide variety of devices.
We can have a huge impact in making sure sites
are fast, usable, accessible and work like people
expect them to work.
Front-end developers are friendly!



It’s okay to talk to us!
Sometimes we even tell good jokes!
Georgia GovHub: a case study
Darren Petersen
Thursday, 10 a.m., Balcony A
@MarcDrummond
d.o. mdrummond

More Related Content

Similar to A forest of designs without subthemes

Architecting with Style
Architecting with StyleArchitecting with Style
Architecting with Style
Timothy Knight
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?
Russ Weakley
 
Volunteer.rb
Volunteer.rbVolunteer.rb
Volunteer.rb
Korab Hoxha
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for Beginners
D'arce Hess
 
The Trip to DITA
The Trip to DITAThe Trip to DITA
The Trip to DITA
ClearPath, LLC
 
Stc 2015 preparing legacy projects for responsive design - technical issues
Stc 2015   preparing legacy projects for responsive design - technical issuesStc 2015   preparing legacy projects for responsive design - technical issues
Stc 2015 preparing legacy projects for responsive design - technical issues
Neil Perlin
 
Reworking our-workflows
Reworking our-workflowsReworking our-workflows
Reworking our-workflows
nolly00
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers Perspective
Mediacurrent
 
Sketching in code
Sketching in codeSketching in code
Sketching in code
Dara Pressley
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by Shafeeq
DignitasDigital1
 
Unify Design & Deliverables
Unify Design & DeliverablesUnify Design & Deliverables
Unify Design & Deliverables
nathanacurtis
 
SageFrame Templating
SageFrame TemplatingSageFrame Templating
SageFrame Templating
MarshalP
 
Building resuable and customizable Vue components
Building resuable and customizable Vue componentsBuilding resuable and customizable Vue components
Building resuable and customizable Vue components
Filip Rakowski
 
Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applications
Vittorio Vittori
 
Lavacon 2014 responsive design in your hat
Lavacon 2014   responsive design in your hatLavacon 2014   responsive design in your hat
Lavacon 2014 responsive design in your hat
Neil Perlin
 
Client side performance compromises worth making
Client side performance compromises worth makingClient side performance compromises worth making
Client side performance compromises worth making
Cathy Lill
 
Creating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in MindCreating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in Mind
Nadya Rodionenko
 
Dita for the web: Make Adaptive Content Simple for Writers and Developer
Dita for the web: Make Adaptive Content Simple for Writers and DeveloperDita for the web: Make Adaptive Content Simple for Writers and Developer
Dita for the web: Make Adaptive Content Simple for Writers and Developer
Don Day
 
Master Pages for All Ages - George Solomon, Vibe Commerce
Master Pages for All Ages - George Solomon, Vibe CommerceMaster Pages for All Ages - George Solomon, Vibe Commerce
Master Pages for All Ages - George Solomon, Vibe Commerce
AspDotNetStorefront
 
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
Evan Mullins
 

Similar to A forest of designs without subthemes (20)

Architecting with Style
Architecting with StyleArchitecting with Style
Architecting with Style
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?
 
Volunteer.rb
Volunteer.rbVolunteer.rb
Volunteer.rb
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for Beginners
 
The Trip to DITA
The Trip to DITAThe Trip to DITA
The Trip to DITA
 
Stc 2015 preparing legacy projects for responsive design - technical issues
Stc 2015   preparing legacy projects for responsive design - technical issuesStc 2015   preparing legacy projects for responsive design - technical issues
Stc 2015 preparing legacy projects for responsive design - technical issues
 
Reworking our-workflows
Reworking our-workflowsReworking our-workflows
Reworking our-workflows
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers Perspective
 
Sketching in code
Sketching in codeSketching in code
Sketching in code
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by Shafeeq
 
Unify Design & Deliverables
Unify Design & DeliverablesUnify Design & Deliverables
Unify Design & Deliverables
 
SageFrame Templating
SageFrame TemplatingSageFrame Templating
SageFrame Templating
 
Building resuable and customizable Vue components
Building resuable and customizable Vue componentsBuilding resuable and customizable Vue components
Building resuable and customizable Vue components
 
Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applications
 
Lavacon 2014 responsive design in your hat
Lavacon 2014   responsive design in your hatLavacon 2014   responsive design in your hat
Lavacon 2014 responsive design in your hat
 
Client side performance compromises worth making
Client side performance compromises worth makingClient side performance compromises worth making
Client side performance compromises worth making
 
Creating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in MindCreating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in Mind
 
Dita for the web: Make Adaptive Content Simple for Writers and Developer
Dita for the web: Make Adaptive Content Simple for Writers and DeveloperDita for the web: Make Adaptive Content Simple for Writers and Developer
Dita for the web: Make Adaptive Content Simple for Writers and Developer
 
Master Pages for All Ages - George Solomon, Vibe Commerce
Master Pages for All Ages - George Solomon, Vibe CommerceMaster Pages for All Ages - George Solomon, Vibe Commerce
Master Pages for All Ages - George Solomon, Vibe Commerce
 
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
 

Recently uploaded

From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
Sease
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
Vadym Kazulkin
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
UiPathCommunity
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
christinelarrosa
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
Fwdays
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
DanBrown980551
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
Fwdays
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
zjhamm304
 

Recently uploaded (20)

From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
 

A forest of designs without subthemes

  • 1. Implementing Georgia.gov's front-end in Drupal 8 A forest of designs
 without subthemes Marc Drummond Senior Front-end Developer
 Lullabot
  • 2. Marc Drummond Senior Front-end Developer
 Lullabot
  • 3. Marc Drummond Leadership Team
 Drupal Diversity & Inclusion Group
 
 Speaker Diversity Initiative Lead
 Speaker Diversity Workshop September 21 & 28, 1–3:30 ET drupaldiversity.com
  • 5. But first… … something that is not a website.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14. –Steve Jobs “Most people make the mistake of thinking design is what it looks like. People think it’s this veneer— that the designers are handed this box and told, ‘Make it look good!’ “That’s not what we think design is. It’s not just what it looks like and feels like. 
 Design is how it works.”
  • 15. Front-end development is more than implementing a design. Front-end development can solve
 real business problems.
  • 16. We can use newer front-end techniques—including newer CSS—to address organizational needs,
 while preserving backwards compatibility.
  • 18. Key features to discuss ❖ Pattern library integration ❖ Drupal 8 and Pattern Lab ❖ Typography ❖ Variable fonts for fun and profit ❖ Palettes ❖ An alternative to subthemes
  • 19. Wrapping up ❖ Planting a forest ❖ Building out a library of components ❖ Lessons learned
  • 21. –Anna Debenham, A Pocket Guide to Front-End Style Guides “Style guides set a precedent, demonstrating 
 how the designer or developer expects
 something to be done in the future. “Front-end style guides come in many shapes and forms 
 but they all share a common purpose: to make maintaining 
 a site easier. A front-end style guide uses real code
 and works in the browser. “A style guide explains how things are going to look, whereas a pattern library tends to focus on how they work.”
  • 22. Pattern libraries often drift out of sync as
 site launch approaches. Problem Ensure site uses markup in pattern library. Solution
  • 23. Front-end work is often the last drop in the waterfall. Problem Develop components in pattern library first, integrate with Drupal later. Solution
  • 24. Front-end components may be used outside Drupal. Problem Be careful with separating Drupal logic from component logic where possible. Solution
  • 25. Business needs ❖ Pattern library should reflect real-world sites ❖ Back-end work should not block front-end work ❖ Front-end may need to be used beyond Drupal
  • 26. Pattern Lab and Drupal 8 Key Technology Drupal Twig templates use components:
 embed, include, extend
  • 31. Pattern Lab and Drupal 8 Key Technology Data Transform Plugin in Pattern Lab 
 can include patterns within yml files,
 mirroring Drupal data patterns
  • 34. Pattern Lab integral to project success Key Takeaway Front-end work could start as designs were being completed, and the pattern library stayed in sync even as we moved towards and past launch.
  • 36. Difficult to maintain design consistency across 85+ sites when relying upon editors selecting photos. Problem Put extra time and effort into typography, 
 which is not controlled by editors. Solution
  • 37. Having a variety of font weights helps typography, but can slow down the site loading speed. Problem Variable fonts allow a single font file to deliver a wide range of font weights. Solution
  • 38. IE11 does not support variable fonts. Problem Implement font loading strategy so that IE11 still gets correct fonts, without some enhancements. Solution
  • 39. Large number of front-end components, each with numerous typographic elements that need to change responsively. Problem Standardize a type system to speed development. Solution
  • 40. Business needs ❖ High-quality typography elevates design without requiring as much art direction as photographic images ❖ Site must load quickly despite variety of font weights ❖ Reduce time for building out numerous front-end components
  • 41. Source Serif Pro: Variable font
  • 43. Variable fonts in Firefox
  • 44. Variable fonts in Firefox
  • 45. Font loading Key Technology Developed matrix of font scenarios, then used proven font loading techniques like FontFaceObserver, coupled with session variables and preloading, to ensure fast page load experience.
  • 46. Type size and style definitions Key Technology Defined variety of type sizes and how those varied by viewport.
 Defined type styles that used type sizes, along with variable font changes of size, weight and line height by viewport. Plus fallbacks.
  • 47. Type sizes and styles
  • 50. Coordinating typography terms Key Strategy Worked with designers to modify Sketch files to use type style names consistently. This allowed front-end developers to check which type style was applied in Sketch, then use that keyword in the mixin.
  • 51. Type style in Sketch
  • 52. Type style library in Sketch
  • 53. Typography enhanced design & dev Key Takeaway Leveling up the site’s typography gave us a big win on design across 
 all sites, and good communication with the design team helped 
 make the front-end development work much more efficient.
  • 55.
  • 56.
  • 57. Subthemes can allow for variations in design for different sites, but often get wildly out of control. Problem Limit per-site editorial control to selecting a color palette. Solution
  • 58. Using a class for each palette to vary colors within components can result in really complicated CSS. Problem Use CSS Custom Properties to vary colors in components. Solution
  • 59. IE11 and CSS Custom Properties… Problem Use JS (CSS Vars Ponyfill) with some limitations so that color palettes will work in IE11. Solution
  • 60. Icons need to vary based on color palette. Problem Use SVGs for illustration icons, customizing markup to make use of CSS Custom Properties for stroke and fill. Solution
  • 62. Business needs ❖ 85+ sites need to differentiate each other visually, sometimes by varying color choices ❖ Minimize maintenance costs of variations between sites ❖ Illustration icons also need to vary based on site colors
  • 63. Drupal theme settings Key Technology Config set within the theme that can vary on a per site basis.
 Created a visual selector to demonstrate the palette being selected.
 Selection adds a class to HTML for use with CSS Custom Properties.
  • 65. Pattern Lab: JS and session variables Key Technology For Pattern Lab, we used a simple form input and connected that with some JS that set a session variable, as well as JS that checked the session variable in order to add a class to the Pattern Lab HTML.
  • 66. Selecting palette in Pattern Lab
  • 67. CSS Custom Properties Key Technology Also known as CSS Variables, these have advantages over 
 Sass variables, because they can change based on information 
 available when somebody visits a site.
  • 69. IE11 fallback: CSS Vars Ponyfill Key Technology The CSS Vars Ponyfill provides the most robust fallback for IE11, with the limitations that custom properties must be set at the root level. This required outputting separate stylesheets for each palette for IE11.
  • 70. Defining swatches and palettes in yml Key Technology In order to ensure IE11 compatibility, we needed to create definitions for swatches and how those swatches were used in palettes within yml, so we could access the data through both Sass and custom Twig functions.
  • 71. Swatch and palette definitions
  • 72. Swatches, tints and shades Key Strategy To handle the variations of colors across palettes, we first defined 
 an overall set of named swatches—a specific color—along with 
 tints and shades of those swatches.
  • 73. Tints and shades of swatches
  • 74. Swatches and roles in palettes Key Strategy All palettes have a certain set of functional and global color roles.
 We assign a specific swatch to each role for each palette.
 That role gets associated with the swatch through CSS Vars.
  • 75. Varying color roles across palettes
  • 76. Using color roles with components Key Strategy Within component CSS, whenever you would assign a color value with a variable, we instead use a Sass function with an argument with the name of a color role. Sass turns this into a CSS Var.
  • 78. Varying link color per palette Key Strategy Because different palettes use different sets of hues, blue links worked better with some palettes, green worked better with others. So some complicated Sass was needed to redefine CSS Vars for links per palette.
  • 79. Modern technology saves maintenance Key Takeaway Avoiding subthemes eliminates a huge risk from the maintenance plan from the site. Developing the palette system did require a time investment, but created much leaner CSS.
  • 80. Accept that fallbacks are not perfect Key Takeaway The palette fallback for IE11 means a delay in colors displaying, 
 because it relies upon JS to rewrite the CSS. However, the fallback
 does work, and lower performance in IE11 was acceptable.
  • 81. Stay on top of current browser technology Key Takeaway The solution developed to allow sites to vary their color palette 
 without using subthemes was only possible due to an awareness of 
 CSS Vars as an option. Having front-end devs in the room is key.
  • 82. Planting a forest
 Building a library of components
  • 83. With large number of developers working on implementation, consistency could be challenging. Problem Onboarding conversations help keep principles clear, continue conversations with regular team chats. Solution
  • 84. Megh Plunkett, Lullabot Great front-end implementation team Front-end Marlene Wanberg, Contractor Cristina Chumillas, Contractor Amanda Luker, Advomatic Mario Hernandez, Media Current David Barrentine, Media Current Marc Drummond, Lullabot Back-end Hawkeye Tenderwolf, Lullabot Marcos Cano, Lullabot Project management Darren Petersen, Lullabot Donna Sumner, DSGA Design Rachel Hart, DSGA Jason Pamental, Independent Marissa Epstein, Lullabot
  • 85. With a massive number of components to implement, important for lead to review code for consistency. Problem Once patterns had been solidly established, appointed Deputy Sheriff Megh Plunkett to help review code. Solution
  • 86. When a project gets large enough, you may want to dedicate a team member who focuses primarily on making sure code gets merged, answering questions and helping with challenges.
  • 87. … of course if you are primarily focused on reviewing code, and you have 15–20 PRs to review, and you also have important features that need to be developed… just make sure to keep discussing priorities!
  • 89. Front-end development can help solve 
 key business problems
  • 90. Bring in senior front-end developer or architect early enough to help identify and plan for 
 key challenges
  • 91. Front-end development is more than implementing a design. We are experts on how web pages are 
 actually processed by browsers and 
 how people actually interact with sites across a wide variety of devices. We can have a huge impact in making sure sites are fast, usable, accessible and work like people expect them to work.
  • 92. Front-end developers are friendly!
 
 It’s okay to talk to us! Sometimes we even tell good jokes!
  • 93. Georgia GovHub: a case study Darren Petersen Thursday, 10 a.m., Balcony A