Poll: How do you do styling?

[simonh1000]

As Elm programmers we have an interesting choice to make for styling, so what do you do?

• SCSS, CSS,…
• Elm-UI
• Elm-CSS

[Erkal_Selman]

I do styling with elm/html after having tried all the options you’ve given. Maybe add it to the list?

[simonh1000]

Ugh - didn’t think of that. Discourse rules prevent me changing polls subsequently, so anyone that does it like you should your reply

[atomkirk]

How is that different from css?

[antew]

Tailwinds (https://tailwindcss.com) is my favorite, it acts a design system for your app where can you define all of the colors, paddings, breakpoints, etc. It’s easy to customize and extend.

For reusability of styles you can make a Button.elm, ``Checkbox.elm` files that wrap up the common styles into reusable components.

It works great!

[simonh1000]

well they all end up with styles applied to html, but each gets there in a different way

[simonh1000]

me too - that’s css in my mind

[pdamoc]

With scss/css, the styling usually lives in its own files dedicated to styling. With elm/html, the styling lives with the rest of the attributes being declared with the style attribute.

[dzuk]

When I started with Elm, I initially used the CSS preprocessor I was already using (Stylus) but as I was getting into a certain stage of a big project I’ve been working on, it didn’t feel like it was cutting it and I had to send signals about user visual preferences through classes so then the styles could reflect those preferences and it was all-round heavy and clunky.

I decided that I wanted to move the large base of styles to Elm, and looked at elm-ui and elm-css. I opted with the latter because while elm-ui is impressive conceptually, it lacks fine-grained controls and certain accessibility features (like measurements in rems). It took months of work (especially because local CSS makes it a completely different paradigm you have to learn), but I’m much happier with the result :).

[DullBananas]

Are polls a new feature here?

[Sebastian]

We use plain CSS, atomic CSS (e.g Tailwind) and Elm CSS depending on the situation.

The vast majority is atomic CSS.
Then some components using plain CSS, e.g. button, selects, checkboxes, etc
And finally a tiny bit of elm-css for adhoc cases where the above doesn’t work well.

[Valian_Masdani]

Good ol’ bootstrap classes, at least for simple applications like my monthly subscription calculator. I tried elm bootstrap but a lot of things needed to be done in order to create simple things such as dropdown state etc. The good ol’ “classes” like in bootstrap or tailwind works best for me.
Besides, I find Bootstrap 5 interesting because I heard they were removing jQuery from their codebase so it should remove performance overheads due to jQuery api calls in Bootstrap JS code, including the 70kb jQuery overhead in v4. But even when they removed jQuery, the minified bundle size is still smaller in v5 than in v4.