Skip to content

Latest commit

 

History

History
57 lines (40 loc) · 2.25 KB

README.md

File metadata and controls

57 lines (40 loc) · 2.25 KB

Atoms

A super light-weight component library for React, featuring basic component blocks (atoms) with support for light/dark mode.

Motivation

  • Simplicity and Lightweight: Designed for proof-of-concept projects and demos.
  • Starter Point for Custom Systems: Easily refactorable and extendable for more specific needs and design systems.
  • Component Purity: Components are pure, stateless, and effect-less, providing only the skin and variants.
  • TypeScript Integration: Types extend native HTML element interfaces with minimal adjustments and custom props.

Inspiration

  • MUI: Best experience but limited performance due to CSS-in-JS (Emotion).
  • Radix UI: Great performance with CSS modules, but specific look & feel and less customizable.
  • Bootstrap: Uses Sass mixins for consistency and maintainability, and a class names methodology inspired by modifier classes, but it is an overkill for simple projects and not originally designed for React.

Technologies

Helper Classes (Responsive)

All components use helper classes for the following properties:

  • Margin: my, mx, mt, mb, ml, mr
  • Padding: py, px, pt, pb, pl, pr
  • Display: d-block, d-none, d-flex
  • Flex Direction: dir-row, dir-col
  • Flex Align: align-start, align-center, align-end
  • Flex Justify: justify-start, justify-center, justify-end, justify-between
  • Space: 1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px, 5 = 20px, 6 = 24px, 7 = 28px, 8 = 32px

And all helper classes can be suffixed with a responsive class:

  • my-sm-4
  • py-sm-4
  • d-sm-none
  • etc ...

Breakpoints

All breakpoints are min-width based.

  • initial: 0px
  • xs: 540px
  • sm: 768px
  • md: 1025px
  • lg: 1280px

Points for Further Improvement

  • Component Documentation: Provide more detailed documentation for each component, including code and usage examples and customization options.
  • Unit Testing: Add unit tests and visual regression tests using Cypress.
  • Expand Library: Add more components, for example Drop-down, Menu, File Upload.