@mesaic/react-atomic

Atomic CSS as React components.

Stats

StarsIssuesVersionUpdatedCreatedSize
@mesaic/react-atomic
2.0.04 years ago4 years agoMinified + gzip package size for @mesaic/react-atomic in KB

Readme

License

Atomic CSS inspired React components that don't bloat your DOM.

In

  <Padding all={2}>
    <BackgroundColor color='primary'>
      <Color color='textColorOnPrimary'>
        Foo
      </Color>
    </BackgroundColor>
  </Padding>

Out

<div class="
  padding-left-2_3uQ
  padding-right-2_3jc
  padding-top-2_16R
  padding-bottom-2_3Fi
  background-color-accent_JJQ
  color-textColorOnPrimary-_4ij
">Foo</div>

Contract

This package expects your consuming environment to be setup in a particular way. (1) Variable names passed into createReplacements are expected to be available as css vars; you should include these in your css somewhere. Example: createReplacements({foregroundColors: ['baseColor', 'secondaryTextColor'], backgroundColors: ['primaryColor', 'secondaryColor']}) implies that the following css variable definitions should exist in your consumer CSS:

:root {
  /* arbitrary values chosen here */
  --baseColor: #333;
  --secondaryTextColor: #777;
  --primaryColor: blue;
  --secondaryColor: red;
}

(2) The following

Documentation

To run that demo on your own computer:

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.