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.

Building a CSS Architecture for Design Systems

180 views

Published on

The rise in popularity of front-end frameworks such as Bootstrap has changed how we approach front-end development. Instead of building out one page design at a time, the focus has shifted to building components that can be re-used throughout the product design. While these front-end tools are useful, sometimes you need a more customized option. This talk focuses on how to set up your CSS architecture within your own design system to customize for your needs while making it maintainable, scalable and modular.

Published in: Technology
  • Be the first to comment

Building a CSS Architecture for Design Systems

  1. 1. FITC WEB UNLEASHED // TORONTO, ON // OCTOBER 2, 2018 with Building a CSS Architecture for Design Systems
  2. 2. Hi!I'm Christina. @christinatruong christinatruong.com
  3. 3. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems • What is a design system? • Why use a design system? • The pros and cons of open source frameworks • The planning process • Defining the CSS architecture • Writing modular CSS
  4. 4. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems getbootstrap.com
  5. 5. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems getbootstrap.com
  6. 6. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems What is a Design System? Front End Framework Style Guide UI/Component Library Design Patterns Sketch/Photoshop Kit Code Styles Documentation Principles and Philosophies CSS Architecture
  7. 7. Pattern, UI or Component Libraries #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems UX.MAILCHIMP.COM • Documentation for common design components • Usually includes code samples and guidelines
  8. 8. Front-end Frameworks #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems SEMANTIC-UI.COM • Similar to libraries but more detailed and complete • Includes more docs 
 (e.g. getting started, file structure, build tools, templates)
  9. 9. Style Guides #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems ABOUT.TWITTER.COM • Provides a shared vocabulary and central reference • Used to document any part of the system (e.g. libraries, frameworks, branding, writing, code)
  10. 10. Style Guides #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems ATLASSIAN.DESIGN • Provides a shared vocabulary and central reference • Used to document any part of the system (e.g. libraries, frameworks, branding, writing, code)
  11. 11. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Style Guides CODEGUIDE.CO • Provides a shared vocabulary and central reference • Used to document any part of the system (e.g. libraries, frameworks, branding, writing, code)
  12. 12. Other Docs #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems LIGHTNINGDESIGNSYSTEM.COM • Getting started guide • Core values, design and development principles • Release notes • Processes & resources • Whatever you need documented!
  13. 13. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems A design system contains standards, documentation, rules and guiding principles for the code, design and overall product.
  14. 14. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems But what should I include in my design system?
  15. 15. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems • What are you trying to achieve? • What pain points have you’ve experienced in the past? • What do you need to correct these issues?
  16. 16. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems styleguides.io
  17. 17. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Why Use a Design System?
  18. 18. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems “How much does it cost to build a 3 page website?” “How long will it take to make a 3 page website?” "How many pages do I need?"
  19. 19. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
  20. 20. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Ultimately, a project’s level of effort is much better determined by the functionality and components contained within those pages, rather than on the quantity of pages themselves. atomicdesign.bradfrost.com / Brad Frost
  21. 21. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Build components, not pages.
  22. 22. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems womenandtech.com
  23. 23. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems womenandtech.github.io/style_guide/
  24. 24. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
  25. 25. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Open Source 
 Frameworks & Libraries
  26. 26. Open Source Frameworks • Speeds up development • Components are pre-written, tested and standardized • Includes documentation • Straightforward setup • Does not require extensive knowledge of HTML, CSS or JS #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems PROS
  27. 27. Open Source Frameworks • Possibility for code bloat • Similar look and feel to other websites • Adding your own customizations may cancel out the time saving benefits • Must stick to the lexicon and rules of the framework #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems CONS
  28. 28. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Choose the option that is best for your project, not what is most popular.
  29. 29. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems The Planning Process
  30. 30. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems What Disciplines are Needed? • Design • Development • Content Strategy • Branding and Marketing • Anybody else?
  31. 31. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Planning the CSS Architecture • Reduce inheritance and specificity issues • Efficient and reusable • Maintainable and scaleable • Accessible & device agnostic • Well documented to support all devs • Define code styles and naming conventions
  32. 32. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Everybody needs to work together towards a common goal.
  33. 33. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Define the CSS Architecture
  34. 34. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems “Every line of code should appear to be written by a single person, no matter the number of contributors.” Mark Otto, codeguide.co
  35. 35. Style Guide #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems • Place the opening brace after the selector, closing brace on its own line • When grouping selectors, put each on its own line
  36. 36. Style Guide #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems • Put single declarations on one line, multiple declarations on separate lines
  37. 37. Style Guide #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems • Keep related styles together and order them based on the hierarchy of styles. • Use comments to label and organize the code blocks.
  38. 38. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Style Guide CODEGUIDE.CO "Enforce these, or your own, agreed upon guidelines at all times. Small or large, call out what's incorrect."
  39. 39. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Write Modular Code • Use object oriented / functional CSS • Separate structure from style, container from content • UI patterns and components are abstracted into reusable snippets • Styles can also be defined for a single purpose
  40. 40. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
  41. 41. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
  42. 42. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
  43. 43. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
  44. 44. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Organize the CSS • Take inventory of all the interface elements and categorize them
  45. 45. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Source: christinatruong.com
  46. 46. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Source: christinatruong.com Cards Icons Headings Buttons
  47. 47. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Categories • Colors • Typography • Icons • UI patterns and components
  48. 48. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems UI Patterns Categorize UI patterns by their purpose: • buttons • forms • media • navigation
  49. 49. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems cssstats.com
  50. 50. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems cssstats.com
  51. 51. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Organize the CSS • Take inventory of all the interface elements and categorize them • Start writing the CSS!
  52. 52. Base Styles #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems • Start with the building blocks • Define the base styles (e.g. CSS resets and default styles)
  53. 53. Colours #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems • Create a colour palette • Organize colors into groups (e.g. brand, accent, borders, etc.) black #000000 Default text color grey #929292 Border color grey-light #D6D5D5 Background color brand-green #82CA9C Primary, brand, accent color brand-blue #6DCFF6 Secondary, brand, accent color
  54. 54. Typography #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Text-based styles • font-size • font-weight • typeface / font-family • typographic scale H1 Heading H2 Heading H3 Heading H4 Heading H5 Heading H6 Heading This is a footnote. This is an intro paragraph. This is a regular paragraph.
  55. 55. Patterns & Components #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Build reusable UI patterns, components and the variations (if applicable).
  56. 56. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Organize the CSS • Take inventory of all the interface elements and categorize them • Start writing the CSS! • Define the naming conventions
  57. 57. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Naming Conventions • Use lowercase letters and separate words with a dash • Keep names short but descriptive 
 (.btn-submit vs .btn-s) • Use meaningful and functional names that describes the purpose (.btn-warning vs .btn-yellow).
  58. 58. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Naming Conventions • Use the same class name as a prefix for related styles
 (.btn and .btn-submit) • Use a prefix (or data-attributes) for JavaScript specific classes to separate styles from behaviour
 (.js-btn and .btn)
  59. 59. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems CSS Architecture Methodologies • SMACSS (Scalable and Modular Architecture for CSS) • Atomic Design Theory • ITCSS (Inverted Triangle CSS) • BEM (Block, Element, Modifier) 
  60. 60. SMACSS Scalable and Modular Architecture for CSS (smacss.com) #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
  61. 61. SMACSS #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Organize CSS into 5 categories: 1. Base: default styles 2. Layout: page sections, uses an "l-" prefix 3. Modules: reusable components 4. State: interactive state change, uses an "is-" prefix 5. Theme: look and feel
  62. 62. Atomic Design Atoms, molecules, organisms, templates, and pages #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
  63. 63. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems “Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.” atomicdesign.bradfrost.com
  64. 64. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems ATOMS MOLECULES ORGANISMS atomicdesign.bradfrost.com
  65. 65. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems TEMPLATES PAGES atomicdesign.bradfrost.com
  66. 66. ITCSS Inverted Triangle CSS #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
  67. 67. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems SETTINGS TOOLS GENERIC ELEMENTS OBJECTS COMPONENTS TRUMPS csswizardry.com
  68. 68. BEM Block, Element, Modifier #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
  69. 69. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems EN.BEM.INFO BLOCK - A reusable and independent page component. ELEMENT - A composite part of a block that can't be used separately. MODIFIER - An entity that defines the appearance, state, or behavior of a block or element.
  70. 70. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Need more convincing?
  71. 71. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems A design system is an investment.
  72. 72. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Benefits of a Design System • Promotes consistency across disciplines (UX, design and development) • Reduces repetitive work with pattern libraries and modular code • Provides front-end support and custom tool kits 
 (useful for team members that don't specialize in FE)
  73. 73. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Benefits of a Design System • Centralize reference guides and documentation • Requires collaboration across teams, improve communication • A more thoughtful approach to building the product
  74. 74. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Recap • Design systems consist of many parts; use as much or as little as you need • Open source frameworks may suit your needs, or you may choose to create your own • Plan the process and assemble a team as required; make sure everyone is on board
  75. 75. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Recap • Define the rules and methodology for the CSS architecture before writing any code • Prepare for the ongoing nature of creating a design system and focus on the long-term benefits
  76. 76. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems Additional Resources & Credits • OOCSS: github.com/stubbornella/oocss/wiki • Functional CSS: jon.gold/2015/07/functional-css • ITCSS: creativebloq.com/web-design/manage-large-css- projects-itcss-101517528 • Icons by Creaticca Creative Agency: www.flaticon.com • Source code images: carbon.now.sh
  77. 77. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems linkedin.com/learning lynda.com Check out my course!
  78. 78. @christinatruong christinatruong.com

×