“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.
Key features to discuss
❖ Pattern library integration
❖ Drupal 8 and Pattern Lab
❖ Variable fonts for fun and proﬁt
❖ An alternative to subthemes
❖ 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.
Ensure site uses markup in pattern library.
Front-end work is often the last drop in the waterfall.
Develop components in pattern library ﬁrst,
integrate with Drupal later.
Front-end components may be used outside Drupal.
Be careful with separating Drupal logic from
component logic where possible.
❖ Pattern library should reﬂect 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
Drupal Twig templates use components:
embed, include, extend
Diﬃcult to maintain design consistency across 85+
sites when relying upon editors selecting photos.
Put extra time and eﬀort into typography,
which is not controlled by editors.
Having a variety of font weights helps typography,
but can slow down the site loading speed.
Variable fonts allow a single font ﬁle to deliver a
wide range of font weights.
IE11 does not support variable fonts.
Implement font loading strategy so that IE11 still
gets correct fonts, without some enhancements.
Large number of front-end components, each with
numerous typographic elements that need to
Standardize a type system to speed development.
❖ 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
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 deﬁnitions
Deﬁned variety of type sizes and how those varied by viewport.
Deﬁned type styles that used type sizes, along with variable font changes
of size, weight and line height by viewport. Plus fallbacks.
Coordinating typography terms
Worked with designers to modify Sketch ﬁles 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.
Typography enhanced design & dev
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 eﬃcient.
❖ 85+ sites need to diﬀerentiate 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
Conﬁg 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.
Pattern Lab: JS and session variables
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.
IE11 fallback: CSS Vars Ponyﬁll
The CSS Vars Ponyﬁll 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.
Deﬁning swatches and palettes in yml
In order to ensure IE11 compatibility, we needed to create deﬁnitions 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.
Swatches, tints and shades
To handle the variations of colors across palettes, we ﬁrst deﬁned
an overall set of named swatches—a speciﬁc color—along with
tints and shades of those swatches.
Swatches and roles in palettes
All palettes have a certain set of functional and global color roles.
We assign a speciﬁc swatch to each role for each palette.
That role gets associated with the swatch through CSS Vars.
Using color roles with components
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.
Varying link color per palette
Because diﬀerent palettes use diﬀerent sets of hues, blue links worked
better with some palettes, green worked better with others. So some
complicated Sass was needed to redeﬁne CSS Vars for links per palette.
Modern technology saves maintenance
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
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
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.
Onboarding conversations help keep principles clear,
continue conversations with regular team chats.
Megh Plunkett, Lullabot
Great front-end implementation team
Marlene Wanberg, Contractor
Cristina Chumillas, Contractor
Amanda Luker, Advomatic
Mario Hernandez, Media Current
David Barrentine, Media Current
Marc Drummond, Lullabot
Hawkeye Tenderwolf, Lullabot
Marcos Cano, Lullabot
Darren Petersen, Lullabot
Donna Sumner, DSGA
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.
Once patterns had been solidly established, appointed
Deputy Sheriﬀ Megh Plunkett to help review code.
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!
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
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
Thursday, 10 a.m., Balcony A