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

• Codesandbox
• @quarkly/elements

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

• Props
• Aliases
• Theming

License

Licensed under MIT.