Skip to content
This repository has been archived by the owner on May 22, 2020. It is now read-only.
/ elementary Public archive

Library for creating atomic react components

License

Notifications You must be signed in to change notification settings

quarkly/elementary

Repository files navigation

Elementary

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


Build Status Coverage Version MIT License

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.