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.
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
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.
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?
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?"
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
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
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
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
44. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
Organize the CSS
• Take inventory of all the interface elements and
categorize them
48. #WEBU18 @christinatruongFITC: Building a CSS Architecture for Design Systems
UI Patterns
Categorize UI patterns by their purpose:
• buttons
• forms
• media
• navigation
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.
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
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.
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