Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[draft][material-ui][docs] Revamp templates page #42710

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

zanivan
Copy link
Contributor

@zanivan zanivan commented Jun 21, 2024

Closes #41469

⚠️ Work in progress ⚠️
This is an initial draft and further improvements are expected based on feedback and visual explorations.

Summary

This PR is a draft to explore various design alternatives for the templates page. The goal is to address as many points mentioned in issue #41469 as possible, ensuring a seamless and user-friendly experience.

Objectives:

Enhance the overall user experience on the templates page, providing a greater flexibility and functionality when interacting with templates and custom themes.

Key Features:

  1. Download Custom Theme: Users can now download custom themes directly from the templates page.
  2. Template Preview: Users can view a preview of a template before selecting or downloading it.
  3. Select Template Theme: Users have the option to choose a theme for their template before opening it.
  4. Preview Selected Theme: A preview of the selected theme is provided, giving users a clear idea of how the template will look with the chosen theme.
  5. Navigate Template Folder: Allow users to easily navigate through the template folder, making it simpler to find and select the desired template.
  6. Guides: Provide how-to-guides for using the templates and the themes.

Implementation Details:

Design improvements have been made to enhance the visual appeal and usability of the templates page. The full fledge prototype is available on Figma (feel free to leave comments)

Preview

👉 https://deploy-preview-42710--material-ui.netlify.app/material-ui/getting-started/templates/

image

Next Steps:

  • Review the design and functionality changes.
  • Gather feedback about the templates' files organization.
  • Gather feedback about the features, and how to build them.
  • Create the how-to-guides for using the templates and themes.

@zanivan zanivan added docs Improvements or additions to the documentation package: material-ui Specific to @mui/material design This is about UI or UX design, please involve a designer labels Jun 21, 2024
@zanivan zanivan self-assigned this Jun 21, 2024
@siriwatknp
Copy link
Member

@zanivan By clicking "Download theme", do you expect to download the whole project files or just a theme file?

@zanivan
Copy link
Contributor Author

zanivan commented Jul 3, 2024

@zanivan By clicking "Download theme", do you expect to download the whole project files or just a theme file?

Hey @siriwatknp, I think we still have to discuss this part. I'd love some feedback on the best approach for the template folder and theme structure. We discussed on this thread in the past, that the best approach would be to have a theme file per template folder—however, this is making things hard to maintain to keep consistent.

On the other hand, when we have too many components and more complex cases, like the dashboard template, we separated the theme in more files.

Summing things up, I would like to understand first what would be the best way to organize the theme file and the templates' folder, before defining this flow, and then compose a how-to-guide to teach users how to use this theme.


What I think we can focus in the meantime:

  1. Building the navigation bar for the template preview;
  2. Insert the templates on TOC
Screenshot 2024-07-03 at 09 03 23
  1. Grouping templates under the same category:
Screenshot 2024-07-03 at 09 04 18

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design This is about UI or UX design, please involve a designer docs Improvements or additions to the documentation package: material-ui Specific to @mui/material PR: out-of-date The pull request has merge conflicts and can't be merged
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

[material-ui][docs] Refine the free templates page
2 participants