styled-minimal
Minimal UI theme with styled-components, styled-system and polished.
Demo
Storybook: https://gilbarbara.github.io/styled-minimal/
Sandbox: https://k958nr9lno.codesandbox.io/
Setup
npm i styled-minimal styled-components
Warning: styled-minimal is intended to be used with styled-components v4. Some features may not work with older versions.
import Box Button Container Flex Heading from 'styled-minimal'; const MyComponent = return <Container> <Flex> <Heading>Hello</Heading> <Box ="auto" /> <Button>Click Me</Button> </Flex> </Container> ;;
Theming
Wrap your app in a ThemeProvider
with a theme object.
All components have style-system css props, like display
, fontSize
and much more that are also responsive.
For more information on these props, read styled-system API docs.
import ThemeProvider from 'styled-components';import Container from 'styled-minimal'; const theme = button: borderRadius: xs: '2px' sm: '3px' md: '4px' lg: '6px' xl: '8px' space: 0 4 8 12 16 24 32 64 128 breakpoints: xs: 0 ix: 400 md: 768 lg: 1024 xl: 1360 xxl: 1920 fontSizes: 12 14 16 18 22 26 32 48; const MyComponent = return <ThemeProvider => <Container ="flex">...</Container> </ThemeProvider> ;;