styled-one

What?

All in <One /> styled-component

Why?

Bacause, you want to change style via props but too lazy to handle each CSS Property.

Installation

yarn add styled-one styled-components or npm i -S styled-one styled-components

And then import it

import One from "styled-one";

How?

You write your base style:

const Box = styled(One)`
  border-radius: 4px;
  padding: 10px;
`;

And you can tweak your <Box />:

<Box margin={10} borderTopLeftRadius={8}>
  Box Content
</Box>

Props

<One /> support almost CSS properties. Just pass it in camelCase to your component.

<One margin="2em" padding={10} border="1px solid red" borderTop="1px solid blue" borderBottomColor="black" />

Responsive

<One margin="2em" responsive={{ md: { marginTop: "20px" } }} />

Breakpoints	min-width	max-width
md	576px	-
md	768px	-
lg	992px	-
xl	1200px	-
only-xs	-	575px
only-sm	576px	767px
only-md	768px	991px
only-lg	992px	1199px

Shorthand property

Everything look like CSS, so styled-one support shorthand property as well.

Example:

<One margin="20px 1em 10px 0" />

And you can mix it!

Unit(s)

For easy to read code, I prefer set value as number will be px, and string for everything else.

Example:

<One margin={20} marginTop="2rem" marginBottom="5%" />

margin: 2rem 20px 5% 20px

Grid system

styled-one is not shipped with any grid system. I'll consider add it later. But with Flex and Grid, maybe you does not need it anymore.

Utilities

<Flex />

Extended from One with some specific props for css flex.

Usage:

import { Flex } from 'styled-one'

<Flex inline>
  <Flex flex={1}>Item 1</Flex>
  <Flex>Item 2</Flex>
</Flex>

Props	Type	Description
inline	boolean	display: inline-flex;
column	boolean	flex-direction: column;

<Grid />

Extended from One with some specific props for css grid.

Usage:

import { Grid } from 'styled-one'

<Grid row={2} column={2} columnWidth={200} rowHeight={[200, '1fr']}>
  <div>Item 1 - 1</div>
  <div>Item 1 - 2</div>
  <Flex>Item 2 - 1</Flex>
  <div>Item 2 - 2</div>
</Grid>

Props	Type	Description
inline	boolean	display: inline-grid;
column	number
row	number
columnWidth	number, array, string
rowHeight	number, array, string

Legal

Released under MIT license.

Copyright © 2018-present Thanh Trang