Open-source projects categorized as atomic-css
Language filter: + JavaScript + TypeScript + CSS

Top 10 atomic-css Open-Source Projects

  • GitHub repo basscss

    Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library

    Project mention: An introduction to Tailwind CSS and utility classes | dev.to | 2021-04-07
  • GitHub repo styletron

    :zap: Toolkit for component-oriented styling

    Project mention: Just-In-Time: The Next Generation of Tailwind CSS | reddit.com/r/javascript | 2021-03-15

    [0] https://www.styletron.org/ [1] https://baseweb.design/blog/getting-started-with-styletron#getting-started-with-styletron

  • GitHub repo Fela

    State-Driven Styling in JavaScript

  • GitHub repo Atomizer

    A tool for creating Atomic CSS, a collection of single purpose styling units for maximum reuse.

  • GitHub repo react-atomic-design

    🔬 Boilerplate with the methodology Atomic Design using a few cool things.

    Project mention: React architecture | reddit.com/r/reactjs | 2021-02-19

    I feel like this frees you up to use things like Atomic design with your components, which helps on the more folder-structure side of things.

  • GitHub repo fractures

    Baseline atomic CSS toolkit.

    Project mention: CSS Deep | dev.to | 2021-02-26

    fractures/fractures - Baseline atomic CSS toolkit.

  • GitHub repo aesthetic

    🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more! (by aesthetic-suite)

  • GitHub repo snackui

    React + Native style system that lets you write once, run anywhere without compromise. Inline styles are statically extracted to CSS on web, or StyleSheet on native. Super fast & light.

    Project mention: Ask HN: What novel tools are you using to write web sites/apps? | news.ycombinator.com | 2021-04-04

    Cannot recommend gqless highly enough for making graphql actually fun to use and closer to something like meteor/firebase syntax[0].

    And I’ll self-promote, but I’ve been working on what I consider to be a “next generation” style system for React that solves my biggest issue with it currently: being able to performantly write styles in a nice syntax that optimize for both web and native. Called SnackUI, though it’s still in beta[1].

    [0] https://gqless.com

    [1] https://github.com/snackui/snackui

  • GitHub repo truss

    A TypeScript DSL for writing utility CSS in React/JSX (by homebound-team)

    Project mention: TailwindCSS JIT with Arbitrary Values | news.ycombinator.com | 2021-04-07

    Don't want to take away from Tailwind, it's great.

    That said, self-promotion disclaimer but if you like inline/utility CSS, and also like TypeScript/React/Emotion, we've got a "Tailwinds-ish" CSS-in-JS library that we've enjoyed so far:


  • GitHub repo rececss

    Minimalistic, fully customizable CSS utilities generator

    Project mention: An example of a CLI tool built with TypeScript following Clean Architecture | reddit.com/r/softwarearchitecture | 2021-04-18
NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2021-04-18.


What are some of the best open-source atomic-css projects? This list will help you:

Project Stars
1 basscss 5,607
2 styletron 3,149
3 Fela 2,003
4 Atomizer 1,165
5 react-atomic-design 996
6 fractures 359
7 aesthetic 179
8 snackui 64
9 truss 21
10 rececss 16