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.

1. FITC WEB UNLEASHED // TORONTO, ON // OCTOBER 2, 2018
with
Building a CSS
Architecture for
Design Systems

2. Hi!I'm Christina.
@christinatruong
christinatruong.com

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. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
getbootstrap.com

5. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
getbootstrap.com

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. 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. 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. 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. 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. #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. 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. #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. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
But what should I include in
my design system?

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. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
styleguides.io

17. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
Why Use a Design System?

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. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems

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. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
Build components,
not pages.

22. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
womenandtech.com

23. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
womenandtech.github.io/style_guide/

24. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems

25. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
Open Source
Frameworks & Libraries

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. 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. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
Choose the option that is
best for your project, not
what is most popular.

29. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
The Planning Process

30. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
What Disciplines are Needed?
• Design
• Development
• Content Strategy
• Branding and Marketing
• Anybody else?

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. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
Everybody needs to work
together towards a common goal.

33. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
Define the CSS Architecture

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. 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. Style Guide
#WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
• Put single declarations
on one line, multiple
declarations on
separate lines

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. #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. #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. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems

41. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems

42. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems

43. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems

44. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
Organize the CSS
• Take inventory of all the interface elements and
categorize them

45. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
Source: christinatruong.com

46. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
Source: christinatruong.com
Cards Icons
Headings
Buttons

47. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
Categories
• Colors
• Typography
• Icons
• UI patterns and components

48. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
UI Patterns
Categorize UI patterns by their purpose:
• buttons
• forms
• media
• navigation

49. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
cssstats.com

50. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
cssstats.com

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. 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. 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. 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. Patterns &
Components
#WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
Build reusable UI
patterns, components
and the variations (if
applicable).

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. #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. #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. #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. SMACSS
Scalable and Modular Architecture for CSS (smacss.com)
#WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems

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. Atomic Design
Atoms, molecules, organisms, templates, and pages
#WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems

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. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
ATOMS
MOLECULES
ORGANISMS
atomicdesign.bradfrost.com

65. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
TEMPLATES PAGES
atomicdesign.bradfrost.com

66. ITCSS
Inverted Triangle CSS
#WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems

67. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
SETTINGS
TOOLS
GENERIC
ELEMENTS
OBJECTS
COMPONENTS
TRUMPS
csswizardry.com

68. BEM
Block, Element, Modifier
#WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems

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. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
Need more convincing?

71. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
A design system is an
investment.

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. #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. #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. #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. #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. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
linkedin.com/learning lynda.com
Check out my course!

78. @christinatruong
christinatruong.com