Elementary

Elementary is a library for creating atomic react components. Inspired by tachyons and styled-system.

Features

Any css properties - props
Simple writing media queries
Alias system
Scaling indents and font sizes
Support hover, focus ..etc as props
Fully themed
Mixins support

Demo

Installation and Usage

npm i @quarkly/elementary

npm i styled-components

Let's create element:

import React from 'react';
import ReactDom from 'react-dom';
import elementary from '@quarkly/elementary';

const Box = elementary.div();

ReactDom.render(
  <Box width={[1, 1 / 2, 1 / 4]} bgc={['red', 'green', 'blue']} height="300px" />,
  document.getElementById('root'),
);

Since Elementary is based on styled-components, the interface may be familiar to you.

const Box = elementary.div`
  border: 2px solid tomato;
`;

Advanced usage

import React from 'react';
import ReactDom from 'react-dom';
import elementary from '@quarkly/elementary';

const Box = elementary.div({
  effects: {
    hover: ':hover',
  },
  variant: 'boxes',
  rules: ['height', 'backgroundColor'],
});

ReactDom.render(
  <Box width={[1, 1 / 2, 1 / 4]} bgc={['red', 'green', 'blue']} height="300px" />,
  document.getElementById('root'),
);

First argument is the configuration:

rules - an array of css properties that we will use.
effects - what effects can be used from jsx (hover, focus ..etc)
variant - options for component styles from themes
name - componentName and default styles for this component from a theme

Docs

License

Licensed under MIT.