Jin Su Park

Uniform CSS - A utility-first CSS framework and utility generator for Sass

by
Uniform CSS is a utility-first CSS framework and a fully configurable utility generator built for Sass. Load and configure directly in your main Sass project, and gain the power of a utility-first workflow without losing the productivity of Sass.

Add a comment

Replies

Best
Conor Muirhead
I was fortunate to find Uniform CSS a few weeks ago when searching for a tool to generate custom utility classes for the web app I work on. After a bit of thinking and tinkering, and a super helpful back-n-forth with @jinsupark, I'm in the middle of refactoring our front-end to use Uniform CSS across the app. So far it's been a total delight to work with, I've been able to easily make several customizations to match my app's needs. Really fantastic work @jinsupark, I'm a big fan, and hope to contribute to the project in coming months!
Jin Su Park
Thank you @conormuirhead for your kind words!
Jin Su Park
Hello Product Hunters! 👋🏼 Uniform CSS is a fully-configurable utility-first CSS framework and utility generator built for Sass. I built this project because I wanted to help web developers be more productive with the power of immensely flexible utility-first classes whilst still having all the great benefits that Sass provides out of the box. There are many utility-first CSS frameworks out there such as ACSS, BassCSS, Tachyon, and TailwindCSS. Here's a list of the awesome things you can do and how this project is unique and different: - You can load and configure directly in your main Sass project. - Configure almost every of how your utility classes are generated. Apply prefixes, change the delimiter, change shorthands, modify syntax — you name it! Uniform is configurable to the last detail. - Output a JSON schema of all your utility classes so that you can build your own class reference documentation. - Gain access to all your theme variables anywhere in your project with API Functions. - Extrapolate components when common design patterns emerge with the Apply mixin. - Enable Comma-Compression to avoid repeating the same property across pseudos. - Uniform follows a strict set of naming principles to ensure class names are concisely written, memorable, scalable, consistently named, and future-proof. If you're interested, please check out the documentation (https://uniformcss.com) and feel free to get in touch if you have any questions! Thanks again for checking this out!