Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A forest of designs without subthemes


Published on

Implementing's front-end in Drupal 8.

Published in: Technology
  • Login to see the comments

  • Be the first to like this

A forest of designs without subthemes

  1. 1. Implementing's front-end in Drupal 8 A forest of designs
 without subthemes Marc Drummond Senior Front-end Developer
  2. 2. Marc Drummond Senior Front-end Developer
  3. 3. Marc Drummond Leadership Team
 Drupal Diversity & Inclusion Group
 Speaker Diversity Initiative Lead
 Speaker Diversity Workshop September 21 & 28, 1–3:30 ET
  4. 4. front-end 85+ sites
  5. 5. But first… … something that is not a website.
  6. 6. –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.”
  7. 7. Front-end development is more than implementing a design. Front-end development can solve
 real business problems.
  8. 8. We can use newer front-end techniques—including newer CSS—to address organizational needs,
 while preserving backwards compatibility.
  9. 9. Conversation—early and often—is key.
  10. 10. Key features to discuss ❖ Pattern library integration ❖ Drupal 8 and Pattern Lab ❖ Typography ❖ Variable fonts for fun and profit ❖ Palettes ❖ An alternative to subthemes
  11. 11. Wrapping up ❖ Planting a forest ❖ Building out a library of components ❖ Lessons learned
  12. 12. Pattern library integration Drupal 8 and Pattern Lab
  13. 13. –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.”
  14. 14. Pattern libraries often drift out of sync as
 site launch approaches. Problem Ensure site uses markup in pattern library. Solution
  15. 15. Front-end work is often the last drop in the waterfall. Problem Develop components in pattern library first, integrate with Drupal later. Solution
  16. 16. Front-end components may be used outside Drupal. Problem Be careful with separating Drupal logic from component logic where possible. Solution
  17. 17. 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
  18. 18. Pattern Lab and Drupal 8 Key Technology Drupal Twig templates use components:
 embed, include, extend
  19. 19. Pattern Lab
  20. 20. Drupal 8
  21. 21. Drupal template
  22. 22. Component template
  23. 23. Pattern Lab and Drupal 8 Key Technology Data Transform Plugin in Pattern Lab 
 can include patterns within yml files,
 mirroring Drupal data patterns
  24. 24. news-page.yml
  25. 25. bio-page.yml
  26. 26. 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.
  27. 27. Typography
 Variable fonts for fun and profit
  28. 28. 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
  29. 29. 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
  30. 30. IE11 does not support variable fonts. Problem Implement font loading strategy so that IE11 still gets correct fonts, without some enhancements. Solution
  31. 31. 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
  32. 32. 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
  33. 33. Source Serif Pro: Variable font
  34. 34. Proxima Nova: Webfont
  35. 35. Variable fonts in Firefox
  36. 36. Variable fonts in Firefox
  37. 37. 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.
  38. 38. 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.
  39. 39. Type sizes and styles
  40. 40. Type size definitions
  41. 41. Type style definitions
  42. 42. 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.
  43. 43. Type style in Sketch
  44. 44. Type style library in Sketch
  45. 45. 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.
  46. 46. Palettes
 An alternative to subthemes
  47. 47. 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
  48. 48. 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
  49. 49. IE11 and CSS Custom Properties… Problem Use JS (CSS Vars Ponyfill) with some limitations so that color palettes will work in IE11. Solution
  50. 50. 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
  51. 51. Icon SVGs
  52. 52. 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
  53. 53. 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.
  54. 54. Selecting palette in theme
  55. 55. 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.
  56. 56. Selecting palette in Pattern Lab
  57. 57. 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.
  58. 58. CSS Custom Properties
  59. 59. 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.
  60. 60. 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.
  61. 61. Swatch and palette definitions
  62. 62. 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.
  63. 63. Tints and shades of swatches
  64. 64. 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.
  65. 65. Varying color roles across palettes
  66. 66. 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.
  67. 67. Palette color functions
  68. 68. 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.
  69. 69. 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.
  70. 70. 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.
  71. 71. 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.
  72. 72. Planting a forest
 Building a library of components
  73. 73. 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
  74. 74. 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
  75. 75. 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
  76. 76. 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.
  77. 77. … 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!
  78. 78. Lessons learned
  79. 79. Front-end development can help solve 
 key business problems
  80. 80. Bring in senior front-end developer or architect early enough to help identify and plan for 
 key challenges
  81. 81. 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.
  82. 82. Front-end developers are friendly!
 It’s okay to talk to us! Sometimes we even tell good jokes!
  83. 83. Georgia GovHub: a case study Darren Petersen Thursday, 10 a.m., Balcony A
  84. 84. @MarcDrummond d.o. mdrummond