styled-minimal

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 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>
  );
};