/sequence-style-sheets

[WIP] an experiment in generative CSS

Primary LanguageJavaScript

sequence style sheets

an experiment in generating stylesheets out of scale sequences and basscss-style utility classes. wipppppppp

[ '.m0  { margin: 0.5rem; }',
  '.mt0  { margin-top: 0.5rem; }',
  '.mr0  { margin-right: 0.5rem; }',
  '.mb0  { margin-bottom: 0.5rem; }',
  '.ml0  { margin-left: 0.5rem; }',
  '.mxn0 { margin-right: -0.5rem; margin-left: -0.5rem; }',
  '.m1  { margin: 1rem; }',
  '.mt1  { margin-top: 1rem; }',
  '.mr1  { margin-right: 1rem; }',
  '.mb1  { margin-bottom: 1rem; }',
  '.ml1  { margin-left: 1rem; }',
  '.mxn1 { margin-right: -1rem; margin-left: -1rem; }',
  '.m2  { margin: 2rem; }',
  '.mt2  { margin-top: 2rem; }',
  '.mr2  { margin-right: 2rem; }',
  '.mb2  { margin-bottom: 2rem; }',
  '.ml2  { margin-left: 2rem; }',
  '.mxn2 { margin-right: -2rem; margin-left: -2rem; }',
  '.m3  { margin: 4rem; }',
  '.mt3  { margin-top: 4rem; }',
  '.mr3  { margin-right: 4rem; }',
  '.mb3  { margin-bottom: 4rem; }',
  '.ml3  { margin-left: 4rem; }',
  '.mxn3 { margin-right: -4rem; margin-left: -4rem; }',
  '.m4  { margin: 8rem; }',
  '.mt4  { margin-top: 8rem; }',
  '.mr4  { margin-right: 8rem; }',
  '.mb4  { margin-bottom: 8rem; }',
  '.ml4  { margin-left: 8rem; }',
  '.mxn4 { margin-right: -8rem; margin-left: -8rem; }' ]
[ '.p0  { padding: 0.5rem; }',
  '.py0 { padding-top: 0.5rem; padding-bottom: 0.5rem; }',
  '.px0 { padding-right: 0.5rem; padding-left: 0.5rem; }',
  '.p1  { padding: 1rem; }',
  '.py1 { padding-top: 1rem; padding-bottom: 1rem; }',
  '.px1 { padding-right: 1rem; padding-left: 1rem; }',
  '.p2  { padding: 2rem; }',
  '.py2 { padding-top: 2rem; padding-bottom: 2rem; }',
  '.px2 { padding-right: 2rem; padding-left: 2rem; }',
  '.p3  { padding: 4rem; }',
  '.py3 { padding-top: 4rem; padding-bottom: 4rem; }',
  '.px3 { padding-right: 4rem; padding-left: 4rem; }',
  '.p4  { padding: 8rem; }',
  '.py4 { padding-top: 8rem; padding-bottom: 8rem; }',
  '.px4 { padding-right: 8rem; padding-left: 8rem; }' ]