Skip to content

Commit

Permalink
Update Docs: Pastanaga UI and Quanta
Browse files Browse the repository at this point in the history
Co-authored-by: Steve Piercy <[email protected]>
  • Loading branch information
jensens and stevepiercy committed Mar 21, 2024
1 parent f89c523 commit 627810d
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 17 deletions.
46 changes: 29 additions & 17 deletions docs/source/contributing/style-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,48 @@ myst:

## About design systems

A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.
So a Design System is not a deliverable, but a set of deliverables.
It constantly evolves with the product, tools, and new technologies.
A Design System serves as the definitive reference point consolidating all essential elements necessary for teams to design, implement, and advance a product.
It encompasses a collection of deliverables rather than being a singular output.
Continuously adapting alongside the product, tools, and emerging technologies, it undergoes constant evolution.

Volto (and thus, Plone 6) had a design system in the making for several years.
Albert Casado Celma (@albertcasado) had been working on it, and providing a lot of hints and advice about how Volto's UI/UX should be.
As stated at the beginning, a design system is a continuous effort, that evolves over time with the users' feedback and needs.
Volto, and thus Plone 6, underwent a gradual evolution of its design system over multiple years.

Albert gifted the community with Pastanaga UI some years ago, which was implemented during last years as default theme UI and UX in Volto itself. Although unfinished, it provided us with endless resources and patterns that we applied to Volto bit by bit.
## Volto and Pastanaga UI

Lately, Albert has evolved Pastanaga to match the current trends, the feedback of these last years and the lessons learned developing Volto projects. So he has evolved Pastanaga and created Quanta. You can think in Quanta in a PastanagaUI 2.0.

You can find some excerpts of how Quanta looks like in this PDF file: {download}`Quanta Spring 2021 <Quanta.pdf>`
Around 2017, Albert Casado Celma introduced Pastanaga UI, which became Volto's default theme UI/UX.
Despite being unfinished, it provided valuable resources and patterns gradually integrated into Volto.
Albert has played a crucial role in refining Volto's UI/UX, offering valuable insights and guidance.
As mentioned earlier, design systems evolve over time based on user feedback and changing needs.

## Tooling around a design system

Volto adopted some time ago [Storybook](https://storybook.js.org), a tool that is specific for build and show off the visual elements that a design system has in isolation. Storybook provides a sandbox to build and test these visual elements (components) in isolation, mock them to show different data and test edge cases and at the same time document them, on how to instantiate them and use them for the developers' own benefit.
Volto adopted some time ago [Storybook](https://storybook.js.org), a tool that interactively displays the visual elements of a design system.
Storybook provides a sandbox to build and test these visual elements (components) in isolation, mock them to show different data, and test edge cases.
At the same time, Storybook documents components for how to instantiate them and use them in development.

Not all Volto's visual components are covered yet in Storybook, but it has already a good foundation.
Look at the current components [Storybook build](https://6.docs.plone.org/storybook).

## Quanta, the design system for Plone 7

You can find the current Storybook build in: https://6.docs.plone.org/storybook
Recently, Albert updated Pastanaga UI to align with current trends and feedback, creating Quanta, a version 2.0 of Pastanaga UI.
This reflects ongoing refinement and enhancement of the design system.
Check out Quanta's appearance in this PDF: {download}`Quanta Spring 2021 <Quanta.pdf>`.

## Quanta, the design system for Plone 6
Its implementation has been challenging due to the community's emphasis on stability and the lack of demand from projects.
While Quanta offers significant improvements, updating JavaScript and CSS poses a barrier for many.
Stability remains a priority, especially considering the potential disruptions caused by incremental changes.

The idea is that Quanta will become the design system for Plone 6 when it's finished. For now, Pastanaga and Quanta are treated as preliminary work and style guide to help Volto and Plone 6 a reality.
The idea of incorporating Quanta aligns with the broader context of advancing headless CMS capabilities.
However, it necessitates the development of a new theming framework, which is currently underway.
Once all components are in place, Volto can be reassembled with Quanta.

It has been already some work on Quanta here and there, the idea is to adopt it bit by bit, since implementing it overnight would be impossible since maintaining both efforts, main and Quanta in sync would be crazy.
Although the timeline for Quanta's integration, potentially in Plone 7, remains uncertain, progress is being made on experimental packages.
Generating interest within the community is also a priority.

Quanta for now have the shape of a Volto addon: https://github.com/plone/volto-quanta
In the meantime, for upcoming projects, Volto with Pastanaga UI remains the recommended and viable option.

## Help to make Quanta a reality

Do you want to help Quanta a reality in Plone 6? Just ping the Volto Team in Github or in the Plone organization Volto Slack channel: https://plone.slack.com/?redir=%2Farchives%2FCQLBSUKRT to ask for access to the Quanta specs.
Do you want to help Quanta become a reality?
Just ping the Volto Team on GitHub or in the [Plone organization Discord](https://plone.org/community/chat) channel [`#frontend-volto`](https://discord.com/channels/786421998426521600/787308038050545666) to ask for access to the Quanta specs and how to help.
1 change: 1 addition & 0 deletions packages/volto/news/5903.documentation
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Update information about Quanta plans. [@jensens]

0 comments on commit 627810d

Please sign in to comment.