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;