Meet Quanta - Plone's Style Guide
0 likes22 views
- Albert Casado created the Barceloneta theme in 2015 and the Pastanaga UI and Icons projects in 2017 which eventually led to the creation of Quanta in 2020. - Quanta is a design system and style guide for PastanagaUI that includes pre-built reusable design blocks and ensures consistent code and design. - The style guide is integrated with Plone 6 blocks and supports living documentation through tools like Storybook and StyleGuideDist.
Meet Quanta - Plone's Style Guide
- 2. A bit of history Albert Casado Celma @albertcasado Barceloneta Theme (2015) Pastanaga UI (2017) Pastanaga Icons (2017)
- 3. A bit of history Late 2017
- 4. A bit of history 2018
- 8. Albert: The truth is that I only wanted to update Voltos logo, somehow I ended up creating Quanta as well
- 9. A bit of history 2020
- 12. Whats a style guide?
- 13. Why a style guide matters? Faster deliverables Design consistency One-stop guide to reference New team members first stop Code and design linked Standardize code DRY
- 14. Design systems
- 15. Design systems Pre-built blocks Ranging from basic to complex Can be reused and combined They play well with each other Standardize code DRY
- 16. Works extremely well with Plone 6 blocks model
- 19. New times, new workflows How is it going Figma Sketch Zeplin Adobe XD How it started PDF files Image files Adobe PhotoShop Adobe Illustrator
- 22. Style Guide driven development
- 23. Storybook driven development Unit Test Code StoryBook Acceptance Test
- 27. Quanta Universal Rules Foundamentals Builders Text Form Code Bits Knobs Controls Fields Indicators Panels Dialogs Modules Base Ground Activatable Modules
- 28. PastanagaUI and Quanta fundamentals Simplify and focus Dont make the user think Let the user go with the flow Happy path action Structured visual hierarchy as building blocks Earn the user trust every day Make the user feel understood Treat the user as a person