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.

Sign up for GitHub

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

[website] Add vision block #24603

Merged
merged 8 commits into from
Jan 26, 2021
Merged

[website] Add vision block #24603

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
aa5d1e3
[website] Add vision block
oliviertassinari Jan 24, 2021
294d22c
implement aspect ratio
oliviertassinari Jan 24, 2021
8b51069
fix dom structure
oliviertassinari Jan 24, 2021
b86440d
Matt's wordin
oliviertassinari Jan 24, 2021
db85828
typo
oliviertassinari Jan 24, 2021
35a2deb
yarn prettier
oliviertassinari Jan 24, 2021
1564d6b
fix eslint
oliviertassinari Jan 24, 2021
a02fe9d
Matt's review
oliviertassinari Jan 26, 2021
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
265 changes: 140 additions & 125 deletions docs/pages/branding/about.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,139 @@ import BrandingRoot from 'docs/src/modules/branding/BrandingRoot';
import BrandingBeginToday from 'docs/src/modules/branding/BrandingBeginToday';
import BrandingDiscoverMore from 'docs/src/modules/branding/BrandingDiscoverMore';
import BrandingPersona from 'docs/src/modules/branding/BrandingPersona';
import BrandingQuote from 'docs/src/modules/branding/BrandingQuote';
import BrandingBulletItem from 'docs/src/modules/branding/BrandingBulletItem';

function BrandingVision() {
return (
<Container sx={{ my: 15 }}>
<Typography
variant="h3"
component="p"
sx={{ textAlign: 'center', maxWidth: 770, mx: 'auto', mb: 11 }}
>
<UnderlinedText>Our vision is</UnderlinedText> to provide material to build UIs. We have an
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
elegant React implementation of the Material Design guidelines that can be customized to
fully match your brand.
</Typography>
<Grid container alignItems="center" spacing={4}>
<Grid item xs={12} sm={6}>
<Box
sx={{
position: 'relative',
maxWidth: 470,
'& div': {
paddingTop: `${Math.round((1140 / 940) * 100)}%`,
},
'& img': {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
objectFit: 'cover',
},
}}
>
<div />
<img alt="" src="/static/branding/about/vision.png" loading="lazy" />
</Box>
</Grid>
<Grid item xs={12} sm={6}>
<Typography>
The Material Design guidelines are an incredible starting point, but they do not provide
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
guidance on all aspects or needs of an application. In addition to the
guidelines-specific implementation,{' '}
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
<b>
we want Material-UI to be whatever is generally useful for application development
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
</b>
, all in the spirit of the Material Design guidelines.
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
</Typography>
<Typography>
Therefore, Material-UI does not only implement the Material Design guidelines, but is
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
also a general use UI library of components. It also means we offer components or
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
combinations that are simply not addressed in the design guidelines.
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
</Typography>
</Grid>
</Grid>
<Box sx={{ my: 15 }}>
<Grid container alignItems="center" spacing={4}>
<Grid item xs={12} sm={6} sx={{ order: [2, 1] }}>
<Typography>
<b>
We focus on providing all the low-level tools needed to build a rich user-interface
with React.
</b>{' '}
We implement the Material Design specification (which is a bar set quite high), you
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
are able to take advantage of it for your own business with any style customization
Copy link
Member

Choose a reason for hiding this comment

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

(repetition)

Copy link
Member Author

Choose a reason for hiding this comment

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

What do you mean?

needed.
</Typography>
<Typography>
We want to see companies succeeding using Material-UI in a way that matches their
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
brand, close to the Material Design philosophy or not. We don&apos;t want them to feel
that their UI simply looks like another Google product.
</Typography>
</Grid>
<Grid item xs={12} sm={6} sx={{ order: [1, 2] }}>
<Box
sx={{
position: 'relative',
ml: 'auto',
maxWidth: 470,
'& div': {
paddingTop: `${Math.round((940 / 1140) * 100)}%`,
},
'& img': {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
objectFit: 'cover',
},
}}
>
<div />
<img alt="" src="/static/branding/about/focus.jpg" loading="lazy" />
</Box>
</Grid>
</Grid>
</Box>
<Grid container alignItems="center" spacing={4}>
<Grid item xs={12} md={6}>
<BrandingQuote
author={{
avatar: '/static/branding/about/olivier.jpg',
name: 'Olivier Tassinari',
title: 'Co-founder',
}}
sx={{ width: '100%', maxWidth: { md: 470 } }}
>
We believe that React is set on a course to dominate the way UIs are built on the web
for a very long time. We also believe that the next major iteration is coming with
low-code. Material-UI is at the forefront of this transformation.
Copy link
Member

Choose a reason for hiding this comment

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

Premature.

Copy link
Member Author

Choose a reason for hiding this comment

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

Suggested change
low-code. Material-UI is at the forefront of this transformation.
low-code. Material-UI aims to accelerate this transformation.

Copy link
Member

Choose a reason for hiding this comment

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

I meant for any kind of public pronouncement.

Copy link
Member Author

@oliviertassinari oliviertassinari Jan 25, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Low code is the trend towards writing less code, one could argue that @material-ui/core is already low code.

</BrandingQuote>
</Grid>
<Grid item xs={12} md={6}>
<Typography variant="h4" component="p">
From a developer&apos;s point of view, we want Material-UI to:
</Typography>
<Box component="ul" sx={{ m: 0, p: 0, mt: 2 }}>
<BrandingBulletItem>
Deliver on fully encapsulated/composable React components,
</BrandingBulletItem>
<BrandingBulletItem>Be themeable/customizable,</BrandingBulletItem>
<BrandingBulletItem>Be cross browser compatible and accessible,</BrandingBulletItem>
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
<BrandingBulletItem>
Promote developer joy, a sense of community, and an environment where new and
experienced developers can learn from each other.
</BrandingBulletItem>
</Box>
</Grid>
</Grid>
</Container>
);
}

function BrandingTeam() {
return (
Expand Down Expand Up @@ -490,6 +623,7 @@ function BrandingSupportUs() {
export default function Page() {
return (
<BrandingRoot>
<BrandingVision />
<BrandingTeam />
<BrandingCompany />
<BrandingContributors />
Expand All @@ -513,8 +647,7 @@ export default function Page() {
// import Avatar from '@material-ui/core/Avatar';
// import { experimentalStyled as styled } from '@material-ui/core/styles';
// import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
// import Quote from 'docs/src/modules/branding/Quote';
// import BulletItem from 'docs/src/modules/branding/BulletItem';
// import BrandingBulletItem from 'docs/src/modules/branding/BrandingBulletItem';
// import UnderlinedText from 'docs/src/modules/branding/UnderlinedText';
// import Persona from 'docs/src/modules/branding/Persona';
// import ArrowCirleIcon from 'docs/src/modules/branding/icons/ArrowCircle';
Expand Down Expand Up @@ -855,128 +988,10 @@ export default function Page() {
// <Typography variant="h2">
// Our values
// </Typography>
// <BulletItem>Transparency, most of our work is public</BulletItem>
// <BulletItem>Creating a safe, high-trust team</BulletItem>
// <BulletItem>Building incredible developer experiences</BulletItem>
// <BulletItem>Maintaining a healthy working environment</BulletItem>
// <BulletItem>Deliver web experiences that feel amazing</BulletItem>
// </Grid>
// </Grid>

// <Grid container className="MuiGrid-centered" alignItems="center">
// <Grid item>
// <Typography variant="h3" align="center">
// <UnderlinedText>Our vision is</UnderlinedText> to provide material to build UIs. We
// have an elegant React implementation of the Material Design guidelines that can be
// customized to fully match your brand.
// </Typography>
// </Grid>
// </Grid>

// <Grid container spacing={1} alignItems="center">
// <Grid item md={6} xs={12} className="MuiGrid-panel">
// <Box
// component="img"
// alt="Dozen UI elements and blocks"
// src="/static/branding/about/vision.png"
// sx={{ width: '100%' }}
// />
// </Grid>
// <Grid item md={6} xs={12} className="MuiGrid-panel MuiGrid-smallLeftSpacing">
// <Typography>
// The Material Design guidelines are an incredible starting point, but they do not
// provide guidance on all aspects or needs of an application. In addition to the
// guidelines-specific implementation,{' '}
// <b>
// we want Material-UI to be whatever is generally useful for application development
// </b>
// , all in the spirit of the Material Design guidelines.
// </Typography>
// <Typography>
// Therefore, Material-UI does not only implement the Material Design guidelines, but is
// also a general use UI library of components. It also means we offer components or
// combinations that are simply not addressed in the design guidelines.
// </Typography>
// </Grid>
// </Grid>

// <Grid container spacing={1} alignItems="center">
// <Grid item md={6} xs={12} className="MuiGrid-panel MuiGrid-smallLeftSpacing">
// <Typography>
// <b>
// We focus on providing all the low-level tools needed to build a rich user-interface
// with React.
// </b>{' '}
// We implement the Material Design specification (which is a bar set quite high), you
// are able to take advantage of it for your own business with any style customization
// needed.
// </Typography>
// <Typography>
// We want to see companies succeeding using Material-UI in a way that matches their
// brand, close to the Material Design philosophy or not. We don&apos;t want them to feel
// that their UI simply looks like another Google product.
// </Typography>
// </Grid>
// <Grid item md={6} xs={12} className="MuiGrid-panel">
// <Box
// component="img"
// alt="Bunch of legos"
// src="/static/branding/about/focus.jpg"
// sx={{ width: '100%' }}
// />
// </Grid>
// </Grid>

// <Grid container spacing={1}>
// <Grid item lg={6} md={12} className="">
// <Quote
// author={{
// avatar: '/static/about/olivier.jpg',
// name: 'Olivier Tassinari',
// title: 'Co-founder',
// }}
// >
// We believe that React is set on a course to dominate the way UIs are built on the web
// for a very long time. We also believe that the next major iteration is coming with
// low-code. Material-UI is at the forefront of this transformation.
// </Quote>
// </Grid>
// <Grid item lg={6} md={12} className="MuiGrid-panel MuiGrid-panel-horizontalSpacing-xs">
// <Typography variant="h4">
// From a developer&apos;s point of view, we want Material-UI to:
// </Typography>
// <BulletItem>Deliver on fully encapsulated/composable React components,</BulletItem>
// <BulletItem>Be themeable/customizable,</BulletItem>
// <BulletItem>Be cross browser compatible and accessible,</BulletItem>
// <BulletItem>
// Promote developer joy, a sense of community, and an environment where new and
// experienced developers can learn from each other.
// </BulletItem>
// </Grid>
// </Grid>

// <Grid container className="MuiGrid-team MuiGrid-panel MuiGrid-relative" spacing={1}>
// <Box
// component="img"
// src="/static/branding/block4.svg"
// alt=""
// sx={{
// width: 210,
// height: 170,
// position: 'absolute',
// right: { xs: '5%', md: '10%' },
// top: 'calc(100% - 120px)',
// }}
// />
// <Grid item xs={12}>
// <Typography variant="h2">
// Team
// </Typography>
// </Grid>
// <Grid item lg={7} xs={12}>
// <Typography>
// Material-UI is maintained by a group of invaluable core contributors, with the massive
// support and involvement of the community.
// </Typography>
// <BrandingBulletItem>Transparency, most of our work is public</BrandingBulletItem>
// <BrandingBulletItem>Creating a safe, high-trust team</BrandingBulletItem>
// <BrandingBulletItem>Building incredible developer experiences</BrandingBulletItem>
// <BrandingBulletItem>Maintaining a healthy working environment</BrandingBulletItem>
// <BrandingBulletItem>Deliver web experiences that feel amazing</BrandingBulletItem>
// </Grid>
// </Grid>
29 changes: 29 additions & 0 deletions docs/src/modules/branding/BrandingBulletItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import * as React from 'react';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import CheckIcon from 'docs/src/modules/branding/icons/Check';

interface BrandingBulletItemProps {
children?: React.ReactNode;
}

export default function BrandingBulletItem(props: BrandingBulletItemProps) {
const { children, ...other } = props;
return (
<Box component="li" {...other} sx={{ display: 'flex' }}>
<CheckIcon
sx={{
display: 'inline-block',
width: 24,
height: 24,
background: 'rgba(255,255,255,0.4)',
color: 'primary.main',
borderRadius: '50%',
mr: 2,
mt: '2px',
}}
/>
<Typography component="span">{children}</Typography>
</Box>
);
}
1 change: 1 addition & 0 deletions docs/src/modules/branding/BrandingPersona.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export default function BrandingPersona(props: BrandingPersonaProps) {
'& img': {
borderRadius: '50%',
display: 'block',
bgcolor: 'greyD7',
mb: 1,
},
}}
Expand Down
54 changes: 54 additions & 0 deletions docs/src/modules/branding/BrandingQuote.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import * as React from 'react';
import { experimentalStyled as styled } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';

interface BrandingQuoteProps {
author?: {
avatar?: string;
name?: string;
title?: string;
};
children: React.ReactNode;
}

const BrandingQuote = styled((props: BrandingQuoteProps) => {
const { author = {}, children, ...other } = props;
return (
<div {...other}>
<Box
component="img"
src="/static/branding/about/quote.svg"
loading="lazy"
sx={{ width: 32, height: 24, mb: 3, display: 'block' }}
alt=""
/>
<Typography component="p" variant="h4">
&quot;{children}&quot;
</Typography>
<Box
sx={{
display: 'flex',
alignItems: 'center',
mt: 3,
'& img': {
mr: 2,
borderRadius: '50%',
},
}}
>
<img width="48" height="48" loading="lazy" src={author.avatar} alt="" />
<Typography variant="body2">
{author.name}
{', '}
{author.title}
</Typography>
</Box>
</div>
);
})(({ theme }) => ({
background: theme.palette.greyF3,
padding: theme.spacing(5),
}));

export default BrandingQuote;
Loading