Skip to content

Commit

Permalink
[docs] Small polish on mui#32643
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed May 30, 2022
1 parent 381b26f commit 60aeef8
Show file tree
Hide file tree
Showing 7 changed files with 45 additions and 26 deletions.
17 changes: 9 additions & 8 deletions docs/data/base/getting-started/overview/overview.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
# MUI Base - Overview

<p class="description">MUI Base is a library of blank ("unstyled") React UI components and low-level hooks.</p>
<p class="description">MUI Base is a library of headless ("unstyled") React UI components and low-level hooks.</p>

## Introduction

MUI Base is a library of unstyled React UI components.
It features the same robust engineering as [Material UI](/material-ui/getting-started/overview/), but without implementing Material Design.
The components were extracted from [Material UI](/material-ui/getting-started/overview/).
It features the same robust engineering but without implementing Material Design.

It includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components.

With MUI Base, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engine or theme.

:::info
**Note:** _as of Q2 2022, Base is currently still in alpha._
**Note:** as of today, MUI Base is in alpha.

We're adding new components regularly, and you're welcome to contribute!
We're adding new components and features regularly, and you're welcome to contribute!

Look for the [`package: base` label](https://github.com/mui/material-ui/labels/package%3A%20base) on open [issues](https://github.com/mui/material-ui/issues) and [pull requests](https://github.com/mui/material-ui/pulls) in the `@mui/material-ui` GitHub repository to see what other community members are working on, and feel free to submit your own.
Look for the [`package: base`](https://github.com/mui/material-ui/labels/package%3A%20base) label on open issues and pull requests in the `mui/material-ui` repository on GitHub to see what other community members are working on, and feel free to submit your own.
:::

## Advantages of MUI Base
Expand All @@ -29,9 +30,9 @@ Look for the [`package: base` label](https://github.com/mui/material-ui/labels/p

## MUI Base vs. Material UI

MUI Base features many of the same components as [Material UI](/material-ui/getting-started/overview/), but _without the Material Design implementation_.
MUI Base features many of the same components as [Material UI](/material-ui/getting-started/overview/), but without the Material Design implementation.

Base is not packaged with any default theme or built-in style engine.
MUI Base is not packaged with any default theme or built-in style engine.
This makes it a great choice if you need complete control over how your app's CSS is implemented.

You could think of MUI Base as the "skeletal" or "headless" version of Material UI—in fact, future versions of Material UI will use Base components and hooks for their foundational structure.
You could think of MUI Base as the "skeletal" or "headless" version of Material UI—in fact, the future versions of Material UI (starting with v6) will use these components and hooks for their foundational structure.
2 changes: 1 addition & 1 deletion docs/data/base/getting-started/usage/usage.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# MUI Base - Usage
# Usage

<p class="description">Learn the basics of working with MUI Base components.</p>

Expand Down
34 changes: 24 additions & 10 deletions docs/data/joy/getting-started/overview/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,57 @@

<p class="description">Joy UI is a library of beautifully designed React UI components.</p>

Joy UI is a library of React UI components. It features foundational components such as the ones you'd find in Material UI.
Joy UI is a library of React UI components.
It features foundational components such as the ones you'd find in Material UI.
It comes with a beautifully designed default theme so you can rapidly start your own design system.

You should see Joy UI as your starting point.
It includes a lot of customization features and the capability for you to match it to your desired look and feel.

:::warning
**Note:** as of Q2 2022, Joy UI is currently in active development, with an alpha version soon to be released.
We're adding new components and features regularly, and you're welcome to contribute! Look for the [`joy` label](https://github.com/mui/material-ui/pulls?q=is%3Aopen+is%3Apr+label%3Ajoy) on open [issues](https://github.com/mui/material-ui/issues) and [pull requests](https://github.com/mui/material-ui/pulls) in the `@mui/material-ui` repository on GitHub to see what other community members are working on, and feel free to submit your own.
**Note:** as of today, Joy UI is in active development, with an alpha version soon to be released.

We're adding new components and features regularly, and you're welcome to contribute!

Look for the [`package: joy`](https://github.com/mui/material-ui/labels/package%3A%20joy) label on open issues and pull requests in the `mui/material-ui` repository on GitHub to see what other community members are working on, and feel free to submit your own.
:::

## Advantages of Joy UI

- **Ship faster:** Joy UI gives you a significant amount of prebuilt components you need to develop web apps, with a sleek and carefully designed look and feel, allowing it to achieve a good-looking result without a dedicated designer.
- **Extensive customization:** you're encouraged to customize each and every tiny piece of the Joy UI components so they match your desired design.
- **Accessibility in mind:** Joy UI components are built on top of [MUI Base unstyled components and low-level hooks](/base/getting-started/overview/), giving you support for several accessibility features out of the box. We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation.
- **Accessibility in mind:** Joy UI components are built on top of [MUI Base unstyled components and low-level hooks](/base/getting-started/overview/), giving you support for several accessibility features out of the box.
We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation.

## Principles

### Keep it essential

Joy should work with the least amount of effort possible. We're striving for the essential only, both in the component API and design (look & feel). Components should have only what they need to do the job. What is considered essential will be drawn from MUI's experience over the years developing component libraries like this one, as well as from benchmarks of modern API and design guidelines—especially when it comes to developing web apps.
Joy UI should work with the least amount of effort possible.
We're striving for the essential only, both in the component API and design (look & feel).
Components should have only what they need to do the job.
What is considered essential will be drawn from MUI's experience over the years developing component libraries like this one, as well as from benchmarks of modern API and design guidelines—especially when it comes to developing web apps.

### Looks great out-of-the-box

Joy needs to be simple yet characteristic. Visual attributes such as scale, size, and density should be consistent across all of the components so they live together nicely. We aim to spark delight with simplicity and attention to detail. You should feel like your UI looks great from the start.
Joy UI needs to be simple yet characteristic.
Visual attributes such as scale, size, and density should be consistent across all of the components so they live together nicely.
We aim to spark delight with simplicity and attention to detail.
You should feel like your UI looks great from the start.

### Encourage creativity

We're aiming for Joy to be entirely customizable, and seen as a great starting point. This is meant to encourage you to extend, change, and revamp how Joy looks. Be creative by making it your own.
We're aiming for Joy UI to be entirely customizable, and seen as a great starting point.
This is meant to encourage you to extend, change, and revamp how Joy UI looks.
Be creative by making it your own.

### Focus on developer experience

A great developer experience is not only the quality of the code we ship but also how clear the documentation is, and what learning resources are available for developers. We hope that bundling it all together brings joy.
A great developer experience is not only the quality of the code we ship but also how clear the documentation is, and what learning resources are available for developers.
We hope that bundling it all together brings joy.

## Joy UI vs. Material UI

Joy UI is meant to feature the same list of components you'd find in Material UI, with similar philosophy around component API and customization extensibility, but without the Material Design implementation.
Joy UI is meant to feature the same list of components you'd find in Material UI, with similar philosophy around component API and customization extensibility, but without the Material Design aesthetic.

If you ever wanted to use Material UI for the breadth of supported components, carefully written component API, and reliability of a tried and tested library but hesitated because of Material Design, Joy UI is here to solve that for you and act as the best alternative for that.
If you ever wanted to use Material UI for the breadth of supported components, carefully written component API, and reliability of a tried and tested library but hesitated because of Material Design, Joy UI is here to solve that for you and act as the best alternative.
2 changes: 1 addition & 1 deletion docs/data/joy/getting-started/usage/usage.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Joy UI - Usage
# Usage

<p class="description">Learn the basics of working with Joy UI components in three quick steps.</p>

Expand Down
10 changes: 6 additions & 4 deletions docs/data/material/getting-started/overview/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,25 @@ It includes a comprehensive collection of prebuilt components that are ready for
Material UI is beautiful by design, and features a suite of customization options that make it easy to implement your own custom design system on top of our components.

:::info
Material UI currently supports Material Design v2.
Material UI v5 supports Material Design v2.
Adoption of v3 is tentatively planned for Material UI v6.
You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/29345) for future updates.
:::

## Advantages of Material UI

- **Ship faster:** thousands of open-source contributors have poured countless hours into these components. Focus on your core business logic—we've got your UI covered.
- **Ship faster:** thousands of open-source contributors have poured countless hours into these components.
Focus on your core business logic—we've got your UI covered.
- **Beautiful by default:** we're meticulous about our implementation of Material Design, ensuring that every Material UI component meets the highest standards of form and function.
- **Cross-team collaboration:** Material UI's intuitive developer experience reduces the barrier to entry for back-end devs and less technical designers, empowering teams to collaborate more effectively.
- **Reliability:** Material UI is almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul. When you build with Material UI, you can count on our community's support for years to come.
- **Reliability:** Material UI is almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul.
When you build with Material UI, you can count on our community's support for years to come.
- **Design kits:** streamline your workflow and boost consistency between designers and developers by using our [design kits](https://mui.com/design-kits/) in your favorite design tool.

## Material UI vs. MUI Base

Material UI and [MUI Base](/base/getting-started/overview/) feature many of the same UI components, but MUI Base comes without any default styles or styling solution.

Material UI is _comprehensive_ in that it comes packaged with default styles, and is optimized to work with [Emotion](https://emotion.sh/docs/introduction) (or [styled-components](https://styled-components.com/)).
Material UI is _comprehensive_ in that it comes packaged with default styles, and is optimized to work with [emotion](https://emotion.sh/docs/introduction) (or [styled-components](https://styled-components.com/)).

MUI Base, by contrast, could be considered the "skeletal" or "headless" counterpart to Material UI—in fact, Material UI v6 will use MUI Base components and hooks for its foundational structure.
4 changes: 3 additions & 1 deletion docs/src/modules/components/MarkdownElement.js
Original file line number Diff line number Diff line change
Expand Up @@ -230,8 +230,10 @@ const Root = styled('div')(({ theme }) => ({
border: '1px solid',
borderRadius: theme.shape.borderRadius,
'& > p': {
margin: 0,
color: 'inherit',
'&:last-child': {
margin: 0,
},
},
'& ul, li': {
color: 'inherit',
Expand Down
2 changes: 1 addition & 1 deletion docs/src/route.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const ROUTES = {
about: '/about/',
handbook: 'https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b',
baseDocs: '/base/getting-started/overview/',
materialDocs: '/material-ui/getting-started/installation/',
materialDocs: '/material-ui/getting-started/overview/',
joyDocs: '/joy-ui/getting-started/overview/',
systemDocs: '/system/basics/',
materialIcons: FEATURE_TOGGLE.enable_redirects
Expand Down

0 comments on commit 60aeef8

Please sign in to comment.