@berikiushi/zen-styled v1.0.2

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';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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;