Creating Living Style Guides

on YouTube ↗34m

" summary

A project with Trulia produces a living style guide that lives in code, reuses partials and enforces component structure, shrinking HTML by 48% and achieving 60% faster time to first byte while removing ~135 KB of unused CSS; tools include grep for duplication, a typography finder, SCSS mixins with rem fallbacks, component-level Handlebars and JS, a 24-column grid, and automated watchers, and the redesign increases search results page views by about 11%.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 16:41USE HEURISTICS AND COMMON SENSE
3. 17:19FOR EACH COMPONENT, THREE OPTIONS
4. 20:53CREATE SMALL FILES
5. 22:11HOW WE COMPILE OUR COMPONENTS
6. 28:40HARD TO CALCULATE? CREATE HELPERS
7. 30:59A HANDLEBARS FILE PER COMPONENT
8. 32:33GRIDS VARIABLES

" related talks

• 57mCSS preprocessor performanceNicole Sullivan · Web Directions Code 2013
• 49mLiving Styleguide in your Drupal projects: Benefit from component driven design.Knud Frank · Frontend United 2017
• 42mDesigning Inspired Style GuidesAndy Clarke · Talk.CSS max-content Edition
• 42mThe Dream of Styleguide Driven DevelopmentSara Vieira · React Alicante 2017
• 30mLiving Style Guide Driven DevelopmentChris LoPresto · EmberConf 2016
• 45mYour Styleguide is an APILuke Wertz · MidCamp 2017
• 01h 05mStyleguide-Driven DevelopmentTatiana Kolesnikova, Arvid Torset · NDC London 2018
• 37mThe ABC of Coded Style GuidesHenning Muszynski · React Alicante 2018