next-md is a minimalistic ui library inspired by Material Design for next.js
npm i next-md
create a theme.js in your project root:
import {makeTheme} from 'next-md'
export default makeTheme({
colors: {
primary: '#7ec165',
secondary: '#fe761f'
}
})
export default themecreate a ./pages/_document.js with the Roboto fonts:
import Document, { Head, Main, NextScript } from 'next/document'
import flush from 'styled-jsx/server'
export default class MyDocument extends Document {
static getInitialProps
render () {
return (
<html>
<Head>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i' rel='stylesheet' />
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' />
</Head>
<body className="custom_class">
{this.props.customValue}
<Main />
<NextScript />
</body>
</html>
)
}
}
MyDocument.getInitialProps = ({ renderPage }) => {
const {html, head, errorHtml, chunks} = renderPage()
const styles = flush()
return { html, head, errorHtml, chunks, styles }
}
export default MyDocumentadd a ThemeProvider over your pages:
pages/index.js
import theme from '../theme'
export default () =>
<ThemeProvider theme={theme}>
<div>
{/* ... */}
</div>
</ThemeProvider>
your theme has a bunch of useful styled-jsx snippets and functions in it
add css transitions to your styled-jsx by importing animations:
import {animations} from '../theme'
const MyComponent = () =>
<div>
<style jsx>{`
/* Width and height will animate to 200px using Material Design's standard animation */
div {
width: 100px;
height: 100px;
${animations.standard('height width')}
}
div:hover {
width: 200px;
height: 200px;
}
`}</style>
</div>the Material Design animations have been condensed to:
animations.standard(properties)for standard transitionsanimations.large(properties)for large transitionsanimations.entrance(properties)for entrancesanimations.exit(properties)for exitsanimations.tempExit(properties)for temporary exits
use the recommended Material Design breakpoints by importing breakpoints:
import {breakpoints} from '../theme'
const MyResponsiveComponent = () =>
<div>
<style jsx>{`
div {
width: 100px;
}
/* breakpoints.sm activates when the window is 600px wide */
@media ${breakpoints.sm} {
div {
width: 200px;
}
}
`}</style>
</div>you can use the follow Material Design breakpoints:
- breakpoints.xs: (min-width: 480px)
- breakpoints.sm: (min-width: 600px) - Mobile landscape
- breakpoints.ms: (min-width: 840px)
- breakpoints.md: (min-width: 960px) - Tablet
- breakpoints.ml: (min-width: 1280px) - Desktop
- breakpoints.lg: (min-width: 1440px)
- breakpoints.xl: (min-width: 1600px)
you can use any of the Material Design colors by importing colors. Your theme colors will also be on this object:
import {colors} from '../theme'
const MyColorfulComponent = () =>
<div>
<style jsx>{`
div {
background-color: ${colors.red400};
color: ${colors.blue200};
border-color: ${colors.primary};
}
`}</style>
</div>add shadows to your components by importing elevations.
import {elevations} from '../theme'
// Has an elevation of 2
const MyComponent = () => <div>
<style jsx>{`
div {
${elevations.dp2}
}
`}</style>
</div>
// Has an elevation of 16
const MyComponent = () => <div>
<style jsx>{`
div {
${elevations.dp16}
}
`}</style>
</div>keep your elements on Material Design's 4px grid by using the g() function:
import {g} from '../theme'
const MyComponent = () =>
<div>
<style jsx>{`
div {
/* Width of 120px */
width: ${g(30)};
}
`}</style>
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent