CSS for design systems
0 likes276 views
The document discusses design systems and CSS frameworks. It defines style guides, UI libraries, and design systems, and notes that design systems incorporate principles for working with design patterns and a shared visual language. The document also covers using HTML and CSS with frameworks like Bootstrap and React, CSS methodologies like BEM and SUIT, documenting components, and how design systems can improve shared language, consistency, productivity, and communication.
![— 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.”](https://image.slidesharecdn.com/adam-kudrna-190613133552/85/CSS-for-design-systems-8-320.jpg)
CSS for design systems
- 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
- 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
- 45. THINK DIFFERENT ◾ From page in, or ◾ from component out?
- 47. CSS METHODOLOGIES ◾ OOCSS ◾ SMACSS ◾ Atomic design ◾ BEM ◾ SUIT CSS
- 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
- 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