[docs] Add custom responsive font size demo

mui · Jan 17, 2020 · 312e1db · 312e1db
1 parent 9d47dc1
commit 312e1db
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 8 deletions.
diff --git a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+
+const theme = createMuiTheme();
+
+theme.typography.h3 = {
+  fontSize: '1.2rem',
+  '@media (min-width:600px)': {
+    fontSize: '1.5rem',
+  },
+  [theme.breakpoints.up('md')]: {
+    fontSize: '2rem',
+  },
+};
+
+export default function ResponsiveFontSizes() {
+  return (
+    <div>
+      <ThemeProvider theme={theme}>
+        <Typography variant="h3">Responsive h3</Typography>
+      </ThemeProvider>
+    </div>
+  );
+}
diff --git a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+
+const theme = createMuiTheme();
+
+theme.typography.h3 = {
+  fontSize: '1.2rem',
+  '@media (min-width:600px)': {
+    fontSize: '1.5rem',
+  },
+  [theme.breakpoints.up('md')]: {
+    fontSize: '2rem',
+  },
+};
+
+export default function ResponsiveFontSizes() {
+  return (
+    <div>
+      <ThemeProvider theme={theme}>
+        <Typography variant="h3">Responsive h3</Typography>
+      </ThemeProvider>
+    </div>
+  );
+}
diff --git a/docs/src/pages/customization/typography/typography.md b/docs/src/pages/customization/typography/typography.md
@@ -32,7 +32,7 @@ const theme = createMuiTheme({
 To self-host fonts, download the font files in `ttf`, `woff`, and/or `woff2` formats and import them into your code.
 
 ⚠️ This requires that you have a plugin or loader in your build process that can handle loading `ttf`, `woff`, and
-`woff2` files. Fonts will *not* be embedded within your bundle. They will be loaded from your webserver instead of a
+`woff2` files. Fonts will _not_ be embedded within your bundle. They will be loaded from your webserver instead of a
 CDN.
 
 ```js
@@ -48,7 +48,8 @@ const raleway = {
     local('Raleway-Regular'),
     url(${RalewayWoff2}) format('woff2')
   `,
-  unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF',
+  unicodeRange:
+    'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF',
 };
 ```
 
@@ -73,7 +74,7 @@ const theme = createMuiTheme({
 <ThemeProvider theme={theme}>
   <CssBaseline />
   {children}
-</ThemeProvider>
+</ThemeProvider>;
 ```
 
 ## Font size
@@ -100,6 +101,7 @@ const theme = createMuiTheme({
 The computed font size by the browser follows this mathematical equation:
 
 ![font-size](/static/images/font-size.gif)
+
 <!-- https://latex.codecogs.com/gif.latex?computed&space;=&space;specification&space;\frac{typography.fontSize}{14}&space;\frac{html&space;font&space;size}{typography.htmlFontSize} -->
 
 ### HTML font size
@@ -124,7 +126,7 @@ html {
 }
 ```
 
-*You need to apply the above CSS on the html element of this page to see the below demo rendered correctly*
+_You need to apply the above CSS on the html element of this page to see the below demo rendered correctly_
 
 {{"demo": "pages/customization/typography/FontSizeTheme.js"}}
 
@@ -136,17 +138,19 @@ You can use [media queries](/customization/breakpoints/#api) inside them:
 ```js
 const theme = createMuiTheme();
 
-theme.typography.h1 = {
-  fontSize: '3rem',
+theme.typography.h3 = {
+  fontSize: '1.2rem',
   '@media (min-width:600px)': {
-    fontSize: '4.5rem',
+    fontSize: '1.5rem',
   },
   [theme.breakpoints.up('md')]: {
-    fontSize: '6rem',
+    fontSize: '2.4rem',
   },
 };
 ```
 
+{{"demo": "pages/customization/typography/CustomResponsiveFontSizes.js"}}
+
 To automate this setup, you can use the [`responsiveFontSizes()`](/customization/theming/#responsivefontsizes-theme-options-theme) helper to make Typography font sizes in the theme responsive.
 
 {{"demo": "pages/customization/typography/ResponsiveFontSizesChart.js", "hideHeader": true}}