Styled-kit NPM

styled-kit

Installation

npm install styled-kit

styled-kit depends on styled-components, so make sure you have that installed

npm install styled-components

Usage

import Div from 'styled-kit/Div'

<Div column listTop={24}>
  <h1>Hello</h1>
  <h2>Hello</h2>
</Div>

Div is a helper wrapper component that makes it easy to position its children using flex attributes.

Live demo

🚧 In progress

Available props

Flex properties

Prop	CSS
`row`	`flex-direction: row;`
`rowReverse`	`flex-direction: row-reverse;`
`column`	`flex-direction: column;`
`columnReverse`	`flex-direction: column-reverse;`
`wraps`	`flex-wrap: wrap;`
`justifyStart`	`justify-content: flex-start;`
`justifyEnd`	`justify-content: flex-end;`
`justifyCenter`	`justify-content: center;`
`justifyBetween`	`justify-content: space-between;`
`justifyAround`	`justify-content: space-around;`
`justifyEvenly`	`justify-content: space-evenly;`
`itemsStart`	`align-items: flex-start;`
`itemsEnd`	`align-items: flex-end;`
`itemsCenter`	`align-items: center;`
`itemsBaseline`	`align-items: baseline;`
`itemsStretch`	`align-items: stretch;`
`contentStart`	`align-content: flex-start;`
`contentEnd`	`align-content: flex-end;`
`contentCenter`	`align-content: center;`
`contentBetween`	`align-content: space-between;`
`contentAround`	`align-content: space-around;`
`contentStretch`	`align-content: stretch;`

Self flex properties

Prop	CSS
`flex={X}`	`flex: X;`
`flexNone`	`flex: none;`
`selfAuto`	`align-self: auto;`
`selfStart`	`align-self: flex-start;`
`selfEnd`	`align-self: flex-end;`
`selfCenter`	`align-self: center;`
`selfBaseline`	`align-self: baseline;`
`selfStretch`	`align-self: stretch;`

Props that looks like name={X} accepts a value that is either number or string. If it's number and, it will be converted to pixels for props that require them, so:

width={100}: width: 100px; height="100": height: 100%; flex={5}: flex: 5;

Size

Prop	CSS
`width={X}`	`width: X;`
`height={X}`	`height: X;`
`minWidth={X}`	`min-width: X;`
`minHeight={X}`	`min-height: X;`
`maxWidth={X}`	`max-width: X;`
`maxHeight={X}`	`max-height: X;`
`radius={X}`	`border-radius: X;`

Space

Prop	CSS
`margin={X}`	`margin: X;`
`marginTop={X}`	`margin-top: X;`
`marginRight={X}`	`margin-right: X;`
`marginBottom={X}`	`margin-bottom: X;`
`marginLeft={X}`	`margin-left: X;`
`padding={X}`	`padding: X;`
`paddingTop={X}`	`padding-top: X;`
`paddingRight={X}`	`padding-right: X;`
`paddingBottom={X}`	`padding-bottom: X;`
`paddingLeft={X}`	`padding-left: X;`

Instead of using paddingTop or marginLeft, you can also use abbreviated pTop, mLeft, and so on.

Position

Prop	CSS
`relative`	`position: relative;`
`absolute`	`position: absolute;`
`fixed`	`position: fixed;`
`sticky`	`position: sticky;`
`top={X}`	`top: {X};`
`right={X}`	`right: {X};`
`bottom={X}`	`bottom: {X};`
`left={X}`	`left: {X};`
`z={X}`	`z-index: {X};`

Text

Prop	CSS
`font={X}`	`font: {X};`
`fontFamily={X}`	`font-family: {X};`
`fontSize={X}`	`font-size: {X};`
`fontWeight={X}`	`font-weight: {X};`
`lineHeight={X}`	`line-height: {X};`
`letterSpacing={X}`	`letter-spacing: {X};`
`textAlign={X}`	`text-align: {X};`
`color={X}`	`color: {X};`

Lists

Add margin to every child except first or last one, depending on the chosen direction. Used to add space between child items.

Prop	CSS
`listLeft={X}`	`> *:not(:first-child) { margin-left: {X}; }`
`listRight={X}`	`> *:not(:last-child) { margin-right: {X}; }`
`listTop={X}`	`> *:not(:first-child) { margin-top: {X}; }`
`listBottom={X}`	`> *:not(:last-child) { margin-bottom: {X}; }`

X is optional here and is 8px by default

You can also use columnTop and columnBottom. They work the same as listTop and listBottom, but also come with flex-direction: column;.

Other

Prop	CSS
`overflow={X}`	`overflow: {X};`

Helpers

Prop	CSS
`background={X}`	`background: ${X};`
`backgroundImage={URL}`	`background-image: url({URL});`
`cover`	`background-size: cover;`
`contain`	`background-size: contain;`
`layer`	`position: absolute; top: 0; right: 0; bottom: 0; left: 0;`
`square={X}`	`width: {X}; height: {X};`
`circle`	`border-radius: 50%;`
`fullHeight`	`min-height: 100vh;`
`hide`	`display: none;`
`clickable`	`cursor: pointer;`
`noPointerEvents`	`pointer-events: none;`
`overlay`	Creates a semi-transparent red overlay over a `<Div />`, may come in useful when debugging layout. Accept a string with a color name if you want something other than red.

Media queries

You can use CSS media queries with <Div />

First, you need to import styled-components's ThemeProvider and pass it a theme with styledKitMediaQueries key where you put your media queries. Query needs to have a name and a valid value. Here's an example:

import { ThemeProvider } from 'styled-components'
import Div from 'styled-kit/Div'
import createQueries from 'styled-kit/utils/createQueries'

const styledKitMediaQueries = createQueries({
  mobile: '(max-width: 767px)',
  desktop: '(min-width: 768px)'
})

function App() {
  return (
    <ThemeProvider theme={{ styledKitMediaQueries }}>
      <Div mobile="color: pink;" desktop="color: powderblue;">
        Hello!
      </Div>
    </ThemeProvider>
  )
}

You can name your queries however you want. In this example, they're called "mobile" and "desktop", and now all Divs can accept props of the same names.

<Div desktop="flex-direction: column;" /> Simple CSS string <Div desktop={{ flexDirection: 'column' }} /> Object notation (the same that style prop accepts) <Div desktop={{ column: true }} /> Object notation unsing Div's properties <Div desktop={['column']} /> Array notation, works with Div's boolean properties only

All results in the same flex-direction: column; CSS getting attached to <Div /> on screens at least 768px wide

Enjoy! 💙