WIP

Atomics aims at creating a truely functional and completely reactive CSS tool kit.

This is work in progress, but lets just say that this function call:

atx(
  d('fx'), fxd('col'), p(0), m(0), c('black'), bgc('@primaryOne'),
  hover(c('@standOut'), bgc('grey:100')),
  rxMd(p(1), m(1), fxd('row')),
  rxLg(p(2), m(2), fxd('row'))
);

generates this:

[ 'display: flex;',
  'flex-direction: column;',
  'padding: 0rem;',
  'margin: 0rem;',
  'color: #22292f;',
  'background-color: #512da8;',
  '&:hover { color: #00acc1; };',
  '&:hover { background-color: #f5f5f5; };',
  '@media (min-width: 768px) { padding: 0.25rem; };',
  '@media (min-width: 768px) { margin: 0.25rem; };',
  '@media (min-width: 768px) { flex-direction: row; };',
  '@media (min-width: 992px) { padding: 0.5rem; };',
  '@media (min-width: 992px) { margin: 0.5rem; };',
  '@media (min-width: 992px) { flex-direction: row; };' ]

... a list of styling directives which can be used in conjunction with css in js libraries such as emotion, for example

<div css={atx(
  d('fx'), fxd('col'), p(0), m(0), c('black'), bgc('@primaryOne'),
  hover(c('@standOut'), bgc('grey:100')),
  rxMd(p(1), m(1), fxd('row')),
  rxLg(p(2), m(2), fxd('row'))
)}>
  Some text
</div>