Atomize

screenshot of Atomize
react
styled-components

library for creating atomic react components

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.
react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

styled-components
Styled Components

Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.