Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/robertkirsz/styled-kit

styled-components ui
Last synced: 24 days ago
JSON representation
Host: GitHub
URL: https://github.com/robertkirsz/styled-kit
Owner: robertkirsz
License: mit
Created: 2019-01-08T18:37:36.000Z (about 6 years ago)
Default Branch: master
Last Pushed: 2023-01-04T22:10:53.000Z (about 2 years ago)
Last Synced: 2024-04-25T13:42:35.480Z (9 months ago)
Topics: styled-components, ui
Language: JavaScript
Homepage:
Size: 4.38 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 21
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

        # styled-kit

## Installation

```bash

npm install styled-kit

```

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

```bash

npm install styled-components

```

## Usage

```js

import Div from 'styled-kit/Div'



  Hello

  Hello



```

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 `
`, 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 `
`

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:

```js

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 (

    

      


        Hello!

      

    

  )

}

```

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.

`
` Simple CSS string

`` Object notation (the same that `style` prop accepts)

`` Object notation unsing Div's properties

`
` Array notation, works with Div's boolean properties only

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

Enjoy! 💙

[![npm version](https://img.shields.io/npm/v/styled-kit.svg?color=blue)](https://www.npmjs.com/package/styled-kit) [![GitHub license](https://img.shields.io/npm/l/styled-kit.svg?color=blue)](https://github.com/robertkirsz/styled-kit/blob/master/LICENSE)