Elementary is a library for creating atomic react components. Inspired by tachyons and styled-system.
- 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
npm i @quarkly/elementarynpm i styled-componentsLet'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;
`;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
Licensed under MIT.
