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

[docs] Improve Toolpad templates section #44914

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions docs/data/material/getting-started/templates/templates.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,19 @@ title: New Free React Templates
Our curated collection of free Material UI templates includes a dashboard, a marketing page, a checkout flow, sign-in and sign-up pages, and a blog.
You can download each one directly from the source code or via CodeSandbox or StackBlitz.

:::info
If you're looking to build internal tools and dashboards quickly, head to [Toolpad Core examples](https://mui.com/toolpad/core/introduction/examples/#featured-examples) for functional apps with authentication, routing and theming already integrated.
:::

All templates feature a custom theme and a default Material Design 2 theme, with light and dark modes for both.
You can toggle through each of these style options in the top right corner of the live previews.

Sections of each layout are defined either by comments or use of separate files, so you can extract parts of a page (such as a hero unit or a footer) for reuse in other pages.
These templates can be combined with one of the [example projects](/material-ui/getting-started/example-projects/) to form a complete starter app.

:::info
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't love the back-to-back callouts here. Maybe we should move the Toolpad callout up higher? It could work after line 15: "...from the source code or via CodeSandbox or StackBlitz."

If you're looking to build internal tools and dashboards quickly, head to [Toolpad Core examples](http://mui.com/toolpad/core/introduction/examples/#featured-examples) for functional apps with authentication, routing and theming already integrated.
:::

If you see any room for improvement, please feel free to open an [issue](https://github.com/mui/material-ui/issues/new/choose) or a [pull request](https://github.com/mui/material-ui/pulls) on GitHub.
:::

{{"component": "modules/components/MaterialFreeTemplatesCollection.js"}}

Expand All @@ -44,13 +46,13 @@ You can find complete templates and themes like those shown below in the <a href

## Toolpad Core (beta)

If you're looking to build internal tools and dashboards fast, but don't want to start building from scratch, you can find examples of functional dashboardswith authentication, routing, and theming already integratedin the [featured examples](http://mui.com/toolpad/core/introduction/examples/#featured-examples) section of the Toolpad Core docs.
If you're looking to build internal tools and dashboards fast, but don't want to start building from scratch, you can find examples of functional dashboardswith authentication, routing, and theming already integratedin the [featured examples section](https://mui.com/toolpad/core/introduction/examples/#featured-examples) of the Toolpad Core docs.

<a href="https://mui.com/toolpad/core/introduction/examples/#featured-examples">
<span class="only-light-mode">
<img src="/static/images/toolpad-core-template-light.png" alt="The Toolpad Core template comes with authentication, navigation and theming integrated" width="2280" height="1200" style="display: block;" />
<img src="/static/images/toolpad-core-template-light.png" loading="lazy" alt="The Toolpad Core template comes with authentication, navigation and theming integrated" width="2400" height="1362" style="display: block;" />
</span>
<span class="only-dark-mode">
<img src="/static/images/toolpad-core-template-dark.png" alt="The Toolpad Core template comes with authentication, navigation and theming integrated" width="2280" height="1200" style="display: block;"/>
<img src="/static/images/toolpad-core-template-dark.png" loading="lazy" alt="The Toolpad Core template comes with authentication, navigation and theming integrated" width="2400" height="1362" style="display: block;"/>
</span>
</a>
Binary file modified docs/public/static/images/toolpad-core-template-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/public/static/images/toolpad-core-template-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading