atomic-css

Open-source projects categorized as atomic-css
Edit details
Language: + TypeScript + JavaScript + SCSS + CSS
Topics: CSS functional-css css-in-js React css-framework
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
Sponsored

Top 19 atomic-css Open-Source Projects

  • unocss

    The instant on-demand atomic CSS engine.

    • Project mention: Tailwind CSS v4.0.0 Alpha | news.ycombinator.com | 2024-03-06

    I wish tailwind would support attributify like https://github.com/unocss/unocss, which is much more readable for complex layouts:

      link

  • tamagui

    Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.

    • Project mention: Exploring the Best UI Component Libraries for React Native apps | dev.to | 2024-03-29

    Tamagui is a UI kit that aims to bridge the gap between React and React Native applications by addressing the fundamental parts of an app, such as styling, theming, and cross-platform components, while keeping app performance in mind. It utilizes an optimizing compiler to significantly improve performance by hoisting objects and CSS at build-time. Its main advantage is that it creates a consistent design system across web and native platforms. Some major highlights of Tamagui are:

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo

  • basscss

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

  • panda

    🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️

    • Project mention: Show HN: Tailwind Nested VSCode Extension | news.ycombinator.com | 2024-04-22

  • styletron

    :zap: Toolkit for component-oriented styling

  • Fela

    State-Driven Styling in JavaScript

  • react-atomic-design

    🔬 How the Atomic Design methodology can create a great design system from scratch and make better developers.

    • Project mention: Atomic design | /r/reactjs | 2023-06-17

    https://github.com/danilowoz/react-atomic-design maybe this as an example

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo

  • Atomizer

    A library to create small, reusable CSS that scales as your website grows.

    • Project mention: Are you still using the ternary operator to dynamically apply Tailwind styles? | dev.to | 2023-09-09

    Tailwind CSS is a CSS framework that has gained incredible popularity, with usage skyrocketing 40% in three years, according to the State of CSS 2022. It offers benefits such as development speed, maintainability, and gzip optimization. As a result, it is expected to exceed 50% in the 2023 survey. However, the readability of Tailwind CSS decreases sharply as the style becomes more complex, which is a typical disadvantage of the utility-first approach. Personally, I recommend my library, CSS Lube, but in this article, I would like to introduce some simple tips that can improve the developer experience when using the Atomic CSS approach.

  • packages

    💎 Monorepository for Stylify packages. Stylify uses CSS-like selectors to generate Extremely optimized utility-first CSS dynamically based on what you write 💎. (by stylify)

  • mojocss

    The Atomic CSS Framework for crafting gorgeous UIs without shipping any CSS.

    • Project mention: Exploring Mojo CSS: A Developer’s Guide | dev.to | 2024-04-10

    Mojo CSS is a modern CSS framework that aims to simplify the process of styling web applications. It provides a set of pre-designed components and utilities that can be easily customized to create unique and visually appealing designs. Mojo CSS is built on top of modern CSS features like CSS variables, Flexbox, and Grid, making it easy to create responsive layouts and interactive components.

  • fractures

    Only the good parts

  • 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)

  • uniformcss

    A fully configurable utility class generator and CSS framework built for Sass projects.

  • mlut

    Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity (by mr150)

    • Project mention: mlut - a new word in the Utility-First CSS approach | /r/Frontend | 2023-09-02

    Thank you for reading my story! I would be very grateful for any feedback on the project. If you like it, please put a star on the Github. Also, you can share this tread on Twitter. All this will help a lot to promote the project!

  • rececss

    Minimalistic, fully customizable CSS utilities generator

  • truss

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

    • Project mention: StyleX – Meta's Styling Library | news.ycombinator.com | 2023-12-05

    Nice! We copied StyleX's "type-safe extensions" in Truss [1] so things like `` are allowed (setting margin is fine) while disallowing `` (anything "not margin") that would mess up the components internal impl details with a compile error.

    That said, we don't actually use the feature that much, vs. higher-level logical props like ``.

    I know we're supposed to use build-time CSS-in-JS these days, but afaiu they don't support the rare-but-handy "just spread together ~4-5 different object literals from ~random different conditionals + props", i.e. intermixing styles some inside the component + outside the component, which emotion handles really well.

    Basically this [2]. StyleX says it does "cross-file styles"...but can it support that? I kinda assume not, but I'm not sure.

    [1]: https://github.com/homebound-team/truss#xstyles--xss-extensi...

    [2]: https://github.com/homebound-team/beam/blob/main/src/compone...

  • windblade

    UnoCSS preset based on Tailwind with multiple improvements

  • s

    S is a micro-library (<1 KB) to define CSS declarations as props and creates atomic classes from them (by fustak-dev)

    • Project mention: Fustak: SQLite with replicas at edge. Fast builds using esbuild and Rust | /r/programming | 2023-08-21

  • sass-system

    A style system generator and utility-first CSS framework

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
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).

atomic-css related posts

Index

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

Project Stars
1 unocss 15,386
2 tamagui 9,992
3 basscss 5,829
4 panda 4,681
5 styletron 3,322
6 Fela 2,259
7 react-atomic-design 1,730
8 Atomizer 1,525
9 packages 417
10 mojocss 380
11 fractures 366
12 aesthetic 203
13 uniformcss 150
14 mlut 57
15 rececss 32
16 truss 31
17 windblade 14
18 s 0
19 sass-system 0

Sponsored
Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com