Switching to UnoCSS

This page summarizes the projects mentioned and recommended in the original post on dev.to

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.io
featured
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.
www.influxdata.com
featured
  • unocss

    The instant on-demand atomic CSS engine.

  • UnoCSS unlike other css frameworks is a css engine without any utility css of it's own, rather it uses different css framework's presets. They generally work with build tools and after mentioning the preset you like you can use that framework's classes in your projects right away. Guess what, you can give any number of presets or write your own preset and use it with UnoCSS. And like Windi CSS they use the on demand way of generating css. I am using next js in this website so the build tool used in next is webpack, also I was using tailwind with postcss previously, so the migration looks something like this,

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

  • As you can see from the above code, we have separate css for each value of padding. So instead of defining css manually everytime, you can simply define these helper css or use an existing css utility framework. I've been working with a lot of such utitlity frameworks, and people have their own utilty css'. Some of the famous css utility frameworks are Tailwind Css, Windi Css and Tachyons etc. So basically these utility frameworks will have a list of helper classes which provide basic css functionalities.

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

    Functional css for humans

  • As you can see from the above code, we have separate css for each value of padding. So instead of defining css manually everytime, you can simply define these helper css or use an existing css utility framework. I've been working with a lot of such utitlity frameworks, and people have their own utilty css'. Some of the famous css utility frameworks are Tailwind Css, Windi Css and Tachyons etc. So basically these utility frameworks will have a list of helper classes which provide basic css functionalities.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Are you still using the ternary operator to dynamically apply Tailwind styles?

    2 projects | dev.to | 9 Sep 2023
  • Additive styling with Crayons

    3 projects | dev.to | 19 May 2022
  • Bootstrap VS Tachyons

    3 projects | dev.to | 30 Jun 2021
  • Top 4 Tailwind CSS alternatives for 2021

    5 projects | dev.to | 29 Mar 2021
  • E-commerce checkout components built with Tailwind CSS and Flowbite

    1 project | dev.to | 7 May 2024