settle-down VS pollen

i'm very guilty of making entire sites with style="margin: 10px; padding: 10px; etc." every style I want right there inline. Inline styles FTW! I would always say: "I'm just getting it working and some css person can clean this up later."

Now I use tailwind and I've learned their wonderful little syntax for mr-x or p-y and it does feel a little like inline style days. But I do make this file https://github.com/andrewarrow/settle-down/blob/main/assets/... with some stuff so I can say like "btn-main" over and over.

Like all languages you can make a mess or make something wonderful. It's also really hard to remove your own bias from the project itself and the drama (or lackthereof). I happen to love go, honey moon started in 2016 and hasn't stopped for me yet. Today's commits: https://github.com/andrewarrow/settle-down/tree/main/app

Start at welcome_controller.go and follow the flow. Notice no structs for the sake of structs I make heavy use of map[string]any which serialized to json so nicely without as `json` modifiers.

Well it's strange what you discover when trying to code what you thought would be "simple." Hello HN, I want to show my new creation called "settle-down". It's a simple independent contractor with N clients invoice pdf creation tool.

I started down the PDF creation side using a PDF library with direct drawString, drawLine, etc. functions. But the complexities of using this library made me search github and I found:

https://github.com/TheFpiasta/BuisnessPDF

It's a very nice pdf invoice generation tool! But it just so happened to be in German and for German addresses and currency etc.

I forked it: https://github.com/andrewarrow/BuisnessPDF

And slowly but surely I found where I needed to add Address format changes and $ money symbol changes, etc. So without further ado I give you a free SaaS version available here:

https://many.pw/sd

Video demo here:

https://www.youtube.com/watch?v=rwtd9uLnh3M

And it's all open source if you don't want to use the SaaS version:

https://github.com/andrewarrow/settle-down

So frameworks like https://www.pollen.style/ are doing this. Personally I still prefer the tailwind approach.

I do think that the real value of Tailwind comes from the utility classes, rather than css-in-html paradigm. You could achieve the same, for example, with Pollen.css [0] or Open Props [1].

[0] https://github.com/heybokeh/pollen

[1] https://github.com/argyleink/open-props

Tailwind is a great option to look into, I really enjoy it, but if you want something a bit more in-between, you can check out frameworks like https://www.pollen.style. There you get a framework of consistent CSS variables you can use, while still writing all your vanilla CSS yourself with full control of everything.

It uses UnoCSS (think TailwindCSS but super customizeable) with Pollen (which is similar to open props).

Very similar to Pollen (https://www.pollen.style), though it looks a little more complicated.

IMO the main value of Tailwind is that it's a step function over your units and colors, which helps bring better consistency and dev speed to UI implementation.

Tailwind's "write class names instead of CSS" approach makes sense in the component-based systems most apps are built in these days, where pretty much any repeated markup will be turned into a component. It performs better than scoped styles and is less complicated.

A CSS variable approach like Open Props or Pollen is, in my experience, better if you're not using a component-based system (ie. conventional HTML) and therefore have repeated markup patterns. Having a simple class name to apply to repeated markup is much more maintainable than trying to copy/paste a long tailwind string around.

Pollen and Open Props are two popular examples of such token first frameworks. If you are not familiar with CSS Custom Properties (also called CSS variables), I recently wrote about how to use them to create a CSS Style API layer.

In the last few years, a new set of frameworks with a radically different concept drew the attention of frontend developers. These frameworks are now extremely popular in the frontend world, and you’re likely already familiar with them: Tailwind CSS and Pollen.