@quarkly/atomize

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

Features

All CSS rules can be specified via props
Support for media queries
Short aliases for each property
Support for hover and any other pseudo-classes via props
Fully customizable themes

Demo

Install and Usage

npm i @quarkly/atomize styled-components

Create a component:

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

const Box = atomize.div();

ReactDom.render(
  <Box width="100px" bgc="red" height="300px" />,
  document.getElementById('root')
);

Advanced usage

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

const Box = atomize.div({
  effects: {
    hover: ':hover',
  },
  variant: 'boxes',
  name: 'Box',
});

ReactDom.render(
  <Box
    width="100px"
    hover-bgc="blue"
    md-bgc="yellow"
    bgc="red"
    height="300px"
  />,
  document.getElementById('root'),
);

The first argument is configuration:

effects - a hash table of effects (hover, focus, etc.)
name - component name

The second argument is default props.

API Reference

atomize

import atomize from '@quarkly/atomize';

This is the default export. This is a wrapping over styled from styled-components.

getTransfrom

import { getTransform } from '@quarkly/atomize;

The method that returns a function by name to transform the value.

getTransform(name: string): function

name - method name for a transform

transformVar

import { transformVar } from '@quarkly/atomize;

Transform of CSS variables

transformVar(key: string, value: string): string;

splitCSSRule

import { splitCSSRule } from '@quarkly/atomize;

Breaks the CSS string into an array of rules.

splitCSSRule<T>(rule: T, separator?: string): Array<T>

themeDefault

import { themeDefault } from '@quarkly/atomize;

Default theme for using CSS variables and defining breakpoints.

dict

import { dict } from '@quarkly/atomize;

Dictionary for defining configuration of CSS rules

type CSSRule = {
  alias: string;
  type: Array<string> | string;
  <key>: string;
}

alias - name abbreviation
type - CSS value type

aliasesDict

import { aliasesDict } from '@quarkly/atomize;

Dictionary of abbreviations generated from dict

type Alias =  Omit<CSSRule, "alias"> & {
  name: string;
  <key>: string;
}

aesarine/atomize