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-componentsWarning: 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 mx="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 theme={theme}>
<Container display="flex">...</Container>
</ThemeProvider>
);
};