zen-styled

Style props inspired by Emmet css shortcuts and styled-system.

Usage

import styled from 'styled-components';
import { margin, padding, color, pseudo } from '@berikiushi/zen-styled';

const Box = styled.div`
  ${margin}
  ${padding}
  ${color}
  ${pseudo}
`;

export default Box;

Each style function create set of component props.

<Box mb="16px" />
// margin-bottom: 16px;

<Box p="8px 16px" />
// padding: 8px 16px;

<Box c="#f49" />
// color: #f49;

<Box bgc="#f49" />
// background-color: #f49;

<Box _hover={{ backgroundColor: '#f49' }} />
// &:hover { background-color: #f49; }

Abbreviations

// layout
import { layout } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | -------------- | | d | display | | v | visibility | | fl | float | | va | vertical-align | | ov | overflow | | ovx | overflow-x | | ovy | overflow-y | | ovs | overflow-style |

// flexbox
import { flex } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | --------------- | | fxd | flex-direction | | fxw | flex-wrap | | jc | justify-content | | ali | align-items | | alc | align-content | | ord | order | | fxg | flex-grow | | fxsh | flex-shrink | | fxb | flex-basis | | als | align-self |

// positioning
import { position } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | ------------ | | pos | position | | t | top | | r | right | | b | bottom | | l | left | | z | z-index |

// sizing
import { size } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | ------------ | | bxz | box-sizing | | w | width | | h | height | | maw | max-width | | mah | max-height | | miw | min-width | | mih | min-height |

// margins
import { margin } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | ------------- | | m | margin | | mt | margin-top | | mr | margin-right | | mb | margin-bottom | | ml | margin-left |

// paddings
import { padding } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | -------------- | | p | padding | | pt | padding-top | | pr | padding-right | | pb | padding-bottom | | pl | padding-left |

// colors
import { color } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | ---------------- | | c | color | | bgc | background-color | | op | opacity |

// background
import { background } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | --------------------- | | bgi | background-image | | bgp | background-position | | bgpx | background-position-x | | bgpy | background-position-y | | bgr | background-repeat | | bgsz | background-size | | bga | background-attachment | | bgo | background-origin |

// typography
import { font } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | --------------- | | ff | font-family | | fz | font-size | | fw | font-weight | | fs | font-style | | fv | font-variant | | lh | line-height | | lts | letter-spacing | | ta | text-align | | td | text-decoration | | ti | text-indent | | tt | text-transform | | tov | text-overflow | | whs | white-space | | wow | word-wrap |

// borders
import { border } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | ------------- | | bd | border | | bdw | border-width | | bds | border-style | | bdc | border-color | | bt | border-top | | br | border-right | | bb | border-bottom | | bl | border-left | | bdr | border-radius |

// shadows
import { shadow } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | ------------ | | bxsh | boxShadow | | tsh | textShadow |

// list style
import { list } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | ------------------- | | lis | list-style | | lisp | list-style-position | | list | listStyle-type | | lisi | listStyle-image |

// animations
import { animation } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | ------------------------- | | anim | animation | | animdel | animation-delay | | animdir | animation-direction | | animdur | animation-duration | | animfm | animation-fill-mode | | animic | animation-iteration-count | | animn | animation-name | | animps | animation-play-state | | animtf | animation-timing-function |

// transform
import { transform } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | ---------------- | | trf | transform | | trfo | transform-origin | | trfs | transform-style |

// transitions
import { transition } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | -------------------------- | | trs | transition | | trsde | transition-delay | | trsdu | transition-duration | | trsp | transition-property | | trstf | transition-timing-function |

// columns
import { columns } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | ------------ | | colm | columns | | colmc | column-count | | colmf | column-fill | | colmg | column-gap | | colmr | column-rule | | colms | column-span | | colmw | column-width |

// interactions
import { interaction } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | -------------- | | cur | cursor | | ol | outline | | us | user-select | | pi | pointer-events |

// pseudo classes/elements
import { pseudo } from '@berikiushi/zen-styled';

| prop abbreviation | css property | | ----------------- | -------------------- | | _hover | :hover | | _focus | :focus | | _active | :active | | _visited | :visited | | _disabled | :disabled | | _checked | :checked | | _empty | :empty | | _readOnly | :read-only | | _required | :required | | _first | :first-of-type | | _last | :last-of-type | | _notFirst | :not(:first-of-type) | | _notLast | :not(:last-of-type) | | _even | :nth-of-type(even) | | _odd | :nth-of-type(odd) | | _before | ::before | | _after | ::after | | _firstLetter | ::first-letter | | _firstLine | ::first-line | | _selection | ::selection | | _placeholder | ::placeholder |

Custom Style Props

You can create your own sets of Style Props.

import styled from 'styled-components';
import { create } from '@berikiushi/zen-styled';

const customStyleProps = create({
  d: 'display',
  pos: 'position',
  t: 'top',
  r: 'right',
  b: 'bottom',
  l: 'left',
  w: 'width',
  h: 'height',
  m: 'margin',
  p: 'padding',
});

const Box = styled.div`
  ${customStyleProps}
`;

export default Box;

Custom Pseudo Props

You can create your own sets of Pseudo Props.

import styled from 'styled-components';
import { createPseudo } from '@berikiushi/zen-styled';

const customPseudoProps = create({
  _f: ':first-child',
  _l: ':last-child',
});

const Box = styled.div`
  ${customPseudoProps}
`;

export default Box;