https://github.com/gilbarbara/styled-minimal

Minimal UI theme with styled-components
https://github.com/gilbarbara/styled-minimal

styled-components ui ui-components ui-kit

Last synced: 2 months ago
JSON representation

Minimal UI theme with styled-components

• Host: GitHub
• URL: https://github.com/gilbarbara/styled-minimal
• Owner: gilbarbara
• License: mit
• Created: 2018-08-01T12:25:04.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-03-21T18:12:45.000Z (almost 5 years ago)
• Last Synced: 2024-10-23T08:58:17.866Z (3 months ago)
• Topics: styled-components, ui, ui-components, ui-kit
• Language: JavaScript
• Homepage: https://gilbarbara.github.io/styled-minimal/
• Size: 6.23 MB
• Stars: 17
• Watchers: 4
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# styled-minimal

[![Build Status](https://travis-ci.org/gilbarbara/styled-minimal.svg?branch=master)](https://travis-ci.org/gilbarbara/styled-minimal) [![Dependencies](https://david-dm.org/gilbarbara/styled-minimal.svg)](https://david-dm.org/gilbarbara/styled-minimal) [![Maintainability](https://api.codeclimate.com/v1/badges/b3fbca883ccee4aab843/maintainability)](https://codeclimate.com/github/gilbarbara/styled-minimal/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/b3fbca883ccee4aab843/test_coverage)](https://codeclimate.com/github/gilbarbara/styled-minimal/test_coverage)

Minimal UI theme with [styled-components](https://www.styled-components.com/), [styled-system](https://github.com/jxnblk/styled-system) and [polished](https://github.com/styled-components/polished).

#### Demo

Storybook: [https://gilbarbara.github.io/styled-minimal/](https://gilbarbara.github.io/styled-minimal/)  

Sandbox: [https://k958nr9lno.codesandbox.io/](https://k958nr9lno.codesandbox.io/)

## Setup

```bash

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.

```jsx

import { Box, Button, Container, Flex, Heading } from 'styled-minimal';

const MyComponent = () => {

  return (

    

      

        Hello

        

        Click Me

      

    

  );

};

```

## Theming

Wrap your app in a `ThemeProvider` with a [theme](./utils/theme.js) 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](https://github.com/jxnblk/styled-system/blob/master/docs/api.md) API docs.

```jsx

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 (

    

      ...

    

  );

};

```