1.0.2 • Published 5 years ago

@berikiushi/zen-styled v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
5 years ago

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 abbreviationcss property
ddisplay
vvisibility
flfloat
vavertical-align
ovoverflow
ovxoverflow-x
ovyoverflow-y
ovsoverflow-style
// flexbox
import { flex } from '@berikiushi/zen-styled';
prop abbreviationcss property
fxdflex-direction
fxwflex-wrap
jcjustify-content
alialign-items
alcalign-content
ordorder
fxgflex-grow
fxshflex-shrink
fxbflex-basis
alsalign-self
// positioning
import { position } from '@berikiushi/zen-styled';
prop abbreviationcss property
posposition
ttop
rright
bbottom
lleft
zz-index
// sizing
import { size } from '@berikiushi/zen-styled';
prop abbreviationcss property
bxzbox-sizing
wwidth
hheight
mawmax-width
mahmax-height
miwmin-width
mihmin-height
// margins
import { margin } from '@berikiushi/zen-styled';
prop abbreviationcss property
mmargin
mtmargin-top
mrmargin-right
mbmargin-bottom
mlmargin-left
// paddings
import { padding } from '@berikiushi/zen-styled';
prop abbreviationcss property
ppadding
ptpadding-top
prpadding-right
pbpadding-bottom
plpadding-left
// colors
import { color } from '@berikiushi/zen-styled';
prop abbreviationcss property
ccolor
bgcbackground-color
opopacity
// background
import { background } from '@berikiushi/zen-styled';
prop abbreviationcss property
bgibackground-image
bgpbackground-position
bgpxbackground-position-x
bgpybackground-position-y
bgrbackground-repeat
bgszbackground-size
bgabackground-attachment
bgobackground-origin
// typography
import { font } from '@berikiushi/zen-styled';
prop abbreviationcss property
fffont-family
fzfont-size
fwfont-weight
fsfont-style
fvfont-variant
lhline-height
ltsletter-spacing
tatext-align
tdtext-decoration
titext-indent
tttext-transform
tovtext-overflow
whswhite-space
wowword-wrap
// borders
import { border } from '@berikiushi/zen-styled';
prop abbreviationcss property
bdborder
bdwborder-width
bdsborder-style
bdcborder-color
btborder-top
brborder-right
bbborder-bottom
blborder-left
bdrborder-radius
// shadows
import { shadow } from '@berikiushi/zen-styled';
prop abbreviationcss property
bxshboxShadow
tshtextShadow
// list style
import { list } from '@berikiushi/zen-styled';
prop abbreviationcss property
lislist-style
lisplist-style-position
listlistStyle-type
lisilistStyle-image
// animations
import { animation } from '@berikiushi/zen-styled';
prop abbreviationcss property
animanimation
animdelanimation-delay
animdiranimation-direction
animduranimation-duration
animfmanimation-fill-mode
animicanimation-iteration-count
animnanimation-name
animpsanimation-play-state
animtfanimation-timing-function
// transform
import { transform } from '@berikiushi/zen-styled';
prop abbreviationcss property
trftransform
trfotransform-origin
trfstransform-style
// transitions
import { transition } from '@berikiushi/zen-styled';
prop abbreviationcss property
trstransition
trsdetransition-delay
trsdutransition-duration
trsptransition-property
trstftransition-timing-function
// columns
import { columns } from '@berikiushi/zen-styled';
prop abbreviationcss property
colmcolumns
colmccolumn-count
colmfcolumn-fill
colmgcolumn-gap
colmrcolumn-rule
colmscolumn-span
colmwcolumn-width
// interactions
import { interaction } from '@berikiushi/zen-styled';
prop abbreviationcss property
curcursor
oloutline
ususer-select
pipointer-events
// pseudo classes/elements
import { pseudo } from '@berikiushi/zen-styled';
prop abbreviationcss 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;