Atomize

Overview

Atomize is a library for creating atomic React components. Inspired by tachyons and styled-system, Atomize allows you to create components that support atomic CSS and themes. It provides features such as setting styles for specific media breakpoints, using variables from themes in composite CSS properties, and support for hover and other pseudo-classes. Atomize also offers short aliases for each property, making it easier to use and configure components.

Features

• Atomic CSS and Themes: Create components that support atomic CSS and themes, allowing for reusable and modular code.
• Media Breakpoints: Set styles for specific media breakpoints, making it easy to create responsive designs.
• Theme Variables: Use variables from the theme in composite CSS properties, enabling consistent styling across the application.
• Hover and Pseudo-Classes: Support for hover and any other pseudo-classes, allowing for interactive and dynamic styling.
• Short Aliases: Short aliases for each property, making it more convenient and intuitive to use.
• Advanced Usage: Advanced features such as alias properties and component inheritance are provided for more flexibility in styling.
• Quarkly Integration: Atomize can be used to create widgets in Quarkly, a platform for building interactive web apps, making it easy to create and customize components without the need to add a theme module.

Installation

To use Atomize, you need to set up dependencies. Atomize serves as a wrapper around styled-components and has a similar API. Simply install Atomize using npm or yarn:

npm install atomize

or

yarn add atomize

Once installed, you can import and use Atomize in your React components:

import { Div } from "atomize";

const MyComponent = () => (
  <Div bg="blue" p="2rem">
    This is an Atomize component
  </Div>
);

Summary

Atomize is a library that allows you to create atomic React components with support for themes and atomic CSS. It offers features such as media breakpoints, theme variables, hover and pseudo-classes, and short aliases. Atomize can be easily integrated into your React projects and provides a convenient and flexible way to style components. Additionally, it offers integration with Quarkly, making it easy to create and customize components within the Quarkly platform.