Consider trumpeting apply + headless

[michaellenaghan]

When I first saw what your framework was capable of, this is what I immediately thought of: that I could use it to very efficiently write traditional CSS — like the examples on your Extracting Components and Helper Mixins pages:

.parent {
  @include apply('p-40 shadow-2xs radius-2xl');
  &__child {
    @include apply('hover.opacity-50 p-24 md.p-64');
  }
}

That is remarkably concise. And maintainable. Combine it with your headless mode, and — holy cow.

That's something special.

(Maybe Tailwind can be used that way, but if it can, I missed it. Well — I know it can almost be used that way. I just don't remember seeing examples as terse and complex as yours.)

As an extra bonus, I even discovered that I could still "include" reset and standard with headless output, e.g.:

@use "uniform" as * with (
  $config: (
    output: headless,
    includes: (
        reset,
        standard
    ),
  ),
);

So with UniformCSS I can be far more productive; I can produce only the CSS I want; and all I need is a SASS compiler.

🤯

At the moment you document this, but in pieces; I think headless is only mentioned on the build settings page, and apply on the two pages I gave above.

I think you should consider pulling the all of those pieces together in one spot, to tell this story. Because this feels like something I haven't really seen before.

I should say: I'm mostly a mobile developer rather than a web developer. But when I do web development I tend to start with a CSS framework. No matter how good the framework is, I always end up having to eventually work around hard-coded assumptions. It seems like your framework — library? — might give me another option.

It's almost like a CSS framework construction kit.

[jinsupark]

Hey, @michaellenaghan 👋 thank you so much! This is really valuable feedback, you have given me something new to think about. I think you're right I do think those things are truly special and I should really lead with those features in promoting this project.

I think I might re-visit the new website to better reflect what you mentioned here today thanks!

I agree with your sentiment about CSS frameworks. Uniform CSS is designed to be flexible and used as a helper library to help customize/generate the utilities you need. Whereas frameworks like Tailwind I think lean more towards being a utility-maximalist approach.

Just to let you know here is what's coming next for the Uniform project:

• Uniform Icons library (open source)
• Uniform UI (similar to Tailwind UI but completely open source)
• New Uniform CSS Website / Documentation Site

The Uniform UI is an interesting project because it will be utilizing Uniform CSS exactly how you've described it "CSS framework construction kit". It is still in its early stages but there are interesting opportunities to allow for customizations whilst still utilizing the utility-first nature. For instance, I am currently exploring the possibility of the following workflow for customizations:

@use "uniform" as * with (
  $uniform-ui-config
);
@use "uniform-ui" as * with (
  $config: (
    button: (
      hover-state: 'bg-blue-600 bold color-white ...',
      active-state: '...'
    ),
    accordion: (
      ...
    )

  )
)

Just something I am exploring, the cool thing about passing in $uniform-ui-config is that this can be further extended to support other types of framework/theme libraries with a drop of a variable as well. So one quick thing I explored when having a discussion with @mdo was the possibility of building out the popular Bootstrap CSS framework via Uniform CSS as the engine to extrapolate its components.

[jinsupark]

If you are ever interested in jumping on a call or have any other further questions please let me know! I did the same with @conormuirhead and found it to be very helpful in discovering improvements and opportunities. He is actually the one that helped inspire most of the v1.2 features such as JSON output https://github.com/ThinkUniform/uniformcss/releases/tag/1.2.0

[conormuirhead]

Uniform CSS is designed to be flexible and used as a helper library to help customize/generate the utilities you need.

Just wanted to chime in to say that over at Rewatch we love this aspect of Uniform. It's been a fantastic tool to help with automating the generation of a custom set of utility classes that we need.

Also highly recommend meeting up with @jinsupark, he's super generous, kind, and always helpful!

[michaellenaghan]

Wow.

In that case, I'm going to throw two more ideas at you.

First, this is a very interesting article about "Space in Design Systems". It proposes a small number of t-shirt sized classes that cover a lot of common cases. Those ideas might be a good fit for uniform as an optional module — but they'd probably be an even better fit for uniform-ui. (To be clear, I'm highlighting the ideas in the article rather than the specific examples. The examples are quite good, but they're really a starting point for a certain kind of thinking. I think that thinking is very much in line with yours.)

Second, I'd suggest adding a "prose" module of some sort. Many websites have user-generated content that has only basic markup, no classes. Many frameworks have been adding modules that style such content, but within a specific scope. For example, Bulma's module is called Content. (Many frameworks seem to use the word "prose", so that's what I went with. But I like Bulma as an example.) I was wondering about whether or not to suggest that for uniform, and decided it wasn't in line with what you were doing. But it's definitely a perfect fit for uniform-ui. (It's probably obvious after a second of thought, but scoping the prose styling allows you to keep your non-prose styling for li and such in their "reset" state.)

Today is my first day of using UniformCSS, so let me get a little more experience under my belt.

(The videos, which as you know I found almost by accident, were a huge help in getting me off to a very fast start.)

[michaellenaghan]

One more thing to be aware of, on the off chance you aren't: Bootstrap's Responsive Font Size module. Docs are here, code is here. (It's independent of Bootstrap proper, and it's used for all responsive sizing, not just font sizing.)

[michaellenaghan]

As I added additional styles I discovered that, for this approach to work, I had to set css-variables to false in $config. Without that I was getting, for example:

.some-class {
  font-size: var(--font-lg);
  line-height: var(--font-lg-leading);
}

but no --font-lg or --font-lg-leading var declarations.

That's kind of just a documentation issue. But maybe in headless mode css-variables should default to false? And, separately, maybe in headless mode there's some way of generating just vars, so that runtime configuration is still an option? (But maybe not; as things stand today you'd probably end up generating a lot of vars that weren't actually used by the custom crafted CSS?)

[michaellenaghan]

I think I'm going to finish today the project I started yesterday. I'm going to add a long "experience report" here later on. In the meantime, I'm going to log a few issues related to what I've discovered so far.

[michaellenaghan]

I wanted to give a bit of an experience report...

I'm re-styling an existing site, and trying to match the existing look. I had an emergency today that took much of the day; if it hadn't been for that I would have finished today, one day after I started.

That is, without question, the most productive I've ever been with any CSS framework I've ever used.

In fact, I can make an apples-to-apples comparison because I recently moved the same site to a new CSS framework! That took many days. Not just that: I didn't start making changes until I had spent a couple of days, in my off hours, learning the new framework.

I started learning Uniform yesterday.

And here's a key point: the nature of what I had to do was fundamentally different.

With the previous framework, with all previous frameworks, I had to learn about the existing components, and learn how to customize them. That almost always involved customizations the framework makers didn't anticipate. Those kinds of customizations always ended up feeling like hacks. (In fact, that was why I made the framework switch in the first place: I felt like I was fighting the framework before this last one too much, and I didn't like that. It was a good framework; it just wasn't a good match for the look I wanted.)

With Uniform, the process has been far more straightforward.

===

My approach with Uniform was to remove all of the existing class names from the templates, and then insert meaningful BEM-style class names. After that I created a CSS file, added the classes, and went to work filling out the styles.

As I said, far more straightforward!

Other than learning the framework, one chunk of my time was spent working out the responsive behaviour I wanted, and then how to make it happen. That's what I described in #33. Another chunk — this is what I still have to finish — was filling out a "prose" module like the one I described in an earlier comment.

From my perspective both of those are reusable components rather than one-off customizations.

===

I've ended up with about the same number of lines of CSS that I had with the other framework — maybe 400 or so. But. Roughly 1/3 of that is the responsive sizing configuration. And another 1/3 is the "prose" configuration. As I said, those are both reusable. So maybe 1/3 or so is the actual styling of this specific site.

Again, though, there's a big difference.

What I've ended up with is the site's entire style defined in one file. Because I've used a BEM-style approach (except for the "prose" thing) everything is a class and nothing is ever nested. I can read all of the styling, right there, from top-to-bottom. That is not at all like the previous framework, any previous framework, where I'm configuring and tweaking components that are defined elsewhere. (And by "elsewhere" I mean in vendor files in an entirely different tree.)

That's the input. And then there's the output...

With the other framework I had to work to get it down to ~90KB (uncompressed). (I was trying to avoid using extra tooling like PurgeCSS.) Uniform is generating ~500 lines. In total! That includes the reset and the starter, which make up about a third of that!

And it is completely readable.

===

What you've created is an amazing work of both great imagination and great skill.

Part of what I mean by that is: before seeing it, I couldn't have imagined it.

And part of what I mean by that is: having seen it, I still can't believe the incredible quality of what I'm seeing.

I was able to accomplish what I wanted to accomplish in about one day. And I know there are things the framework can do that I haven't even touched on yet.

It's been quite a while since I was so thoroughly impressed by a new technical tool.

Congrats! A stunning accomplishment.

[jinsupark]

When I created this project, I simply wanted to build something that would help improve my workflow and allow me to be more productive. Since then it has grown into a fully-customizable CSS framework open-source project and is now a core part of the front-end stack at our company. For us personally, it has allowed us to build prototypes extremely quickly, and drastically improve the hand-off process between design and implementation.

There are tons of other great projects out there in this space but my mission was pretty simple. I love Sass and the out-of-the-box features that it provides therefore I wanted to utilize its power to build a utility framework that's beautifully designed, easy to use, and powerful.

Fundamentally, Uniform CSS is a utility-first CSS generator/library/framework that is designed specifically for maximum unopinionated flexibility. Due to the API-like nature of utility classes, I try to put a lot of time and thought into the overall nomenclature of the words and syntax used so that classes are both predictable and scalable.

To hear that this project has helped you in a similar way brings me absolute joy and excitement! 👍 🤩

Thank you for your kind words and support it really made my weekend! I see a bright future ahead for Uniform and I can't wait to share with you the next big major release.

Could I ask, how did you come across this project?