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;