Slides by Adam Kudrna - Design Systems Meetup June 2019.

1. CSSFOR
DESIGN SYSTEMS
ADAM KUDRNA { DSC MEETUP PRAHA 11/06/2019 }

2. 1. DESIGN SYSTEMS AND UI LIBRARIES
2. WORKING WITH HTML
3. WORKING WITH CSS
4. DOCS AND MAINTENANCE
5. SUMMARY

3. 1. DESIGN SYSTEMS AND UI LIBRARIES
2. WORKING WITH HTML
3. WORKING WITH CSS
4. DOCS AND MAINTENANCE
5. SUMMARY

5. — Alla Kholmatova
“There isn’t a standard definition of design
system within the web community.”

6. — Alla Kholmatova
“Traditionally, a style guide focuses on styles,
such as iconography styles, colors and typography,
while a patterns library includes a broader
set of patterns.”

7. — Alla Kholmatova
”A pattern library is a tool to capture, collect,
and share design patterns and guidelines
for their usage.”

8. — Alla Kholmatova
“[In this book,] by design system I mean a set
of connected patterns and shared practices,
coherently organized to share the purposes
of a digital product.”

9. DEFINITION
◾ Style guide: basic graphic guidelines
◾ UI library: style guide + design patterns
◾ Design system: principles of work with design
patterns, visual language

10. Design system
Pattern/UI library
Style guide

17. Style guide
Pattern/UI library
Design system

18. DEFINITION
◾ Style guide: basic graphic guidelines
◾ UI library: style guide + design patterns
◾ Design system: principles of work with design
patterns, visual language
css

19. 1. DESIGN SYSTEMS AND UI LIBRARIES
2. WORKING WITH HTML
3. WORKING WITH CSS
4. DOCS AND MAINTENANCE
5. SUMMARY

21. HTML

23. Bootstrap

24. React

25. React

26. REUSABLE COMPONENTS

27. APPLICATION
PROGRAMMING
INTERFACE

28. FOR DESIGNERS:
WHAT IT CAN DO

29. React

30. React

31. Twig

32. Twig

33. Smarty

34. Smarty

35. LAYOUT CAN BE REUSABLE

40. 1. DESIGN SYSTEMS AND UI LIBRARIES
2. WORKING WITH HTML
3. WORKING WITH CSS
4. DOCS AND MAINTENANCE
5. SUMMARY

43. Specificity
Explicity
Reach
!important
Preprocessor (LESS, SASS)

45. THINK DIFFERENT
◾ From page in, or
◾ from component out?

46. .product-list__item__rating
.rating

47. CSS METHODOLOGIES
◾ OOCSS
◾ SMACSS
◾ Atomic design
◾ BEM
◾ SUIT CSS

48. .block__element--modifier
BEM

49. .Component-descendant—-modifier
SUIT CSS
.Component.isActive
.namespace-Component

50. DESIGN IN CODE

54. CODE QUALITY

55. CODE QUALITY
◾ Coding style
◾ Linters (Stylelint, ESlint…)
◾ Tests
◾ Code review

57. 1. DESIGN SYSTEMS AND UI LIBRARIES
2. WORKING WITH HTML
3. WORKING WITH CSS
4. DOCS AND MAINTENANCE
5. SUMMARY

58. HOW TO DOCUMENT?

64. COMPONENT DOCS
◾ Name
◾ (Changelog)
◾ Description
◾ Example
◾ Variants

65. 1. DESIGN SYSTEMS AND UI LIBRARIES
2. WORKING WITH HTML
3. WORKING WITH CSS
4. DOCS AND MAINTENANCE
5. SUMMARY

66. SHARED LANGUAGE

67. CONSISTENCY

68. PRODUCTIVITY

69. PATTERN LIBRARY FIRST

70. — Rachel Andrew
”A pattern library or a style guide enables the
creation of documentation along with all of your
components. I start all of my projects by working
on the CSS in the pattern library.”

71. EASE OF USE

72. COMMUNICATION

74. DÍKY!
@FRONTENDGARDEN | @ADAMKUDRNA | ADAMKUDRNA.COM