# Poll: How do you do styling?

**URL:** <https://discourse.elm-lang.org/t/poll-how-do-you-do-styling/6874>\
**Category:** Request Feedback\
**Created:** [February 6, 2021, 2:30pm UTC](https://discourse.elm-lang.org/t/poll-how-do-you-do-styling/6874 "2021-02-06T14:30:33Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![simonh1000](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/simonh1000/32/100_2.png) [@simonh1000](https://discourse.elm-lang.org/u/simonh1000)\
**Post date:** [February 6, 2021, 2:30pm UTC](https://discourse.elm-lang.org/t/poll-how-do-you-do-styling/6874/1 "2021-02-06T14:30:33Z")

</div>

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

_Poll ([view on site](https://discourse.elm-lang.org/t/poll-how-do-you-do-styling/6874/1))_

---

<div class="post-metadata">

**Author:** ![Erkal\_Selman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/erkal_selman/32/269_2.png) [@Erkal\_Selman](https://discourse.elm-lang.org/u/Erkal_Selman)\
**Post date:** [February 6, 2021, 3:10pm UTC](https://discourse.elm-lang.org/t/poll-how-do-you-do-styling/6874/2 "2021-02-06T15:10:37Z")

</div>

I do styling with [elm/html](https://package.elm-lang.org/packages/elm/html/latest/) after having tried all the options you’ve given. Maybe add it to the list?

---

<div class="post-metadata">

**Author:** ![simonh1000](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/simonh1000/32/100_2.png) [@simonh1000](https://discourse.elm-lang.org/u/simonh1000)\
**Post date:** [February 6, 2021, 3:24pm UTC](https://discourse.elm-lang.org/t/poll-how-do-you-do-styling/6874/3 "2021-02-06T15:24:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![atomkirk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/atomkirk/32/3799_2.png) [@atomkirk](https://discourse.elm-lang.org/u/atomkirk)\
**Post date:** [February 6, 2021, 4:05pm UTC](https://discourse.elm-lang.org/t/poll-how-do-you-do-styling/6874/4 "2021-02-06T16:05:12Z")

</div>

How is that different from css?

---

<div class="post-metadata">

**Author:** ![antew](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/antew/32/2102_2.png) [@antew](https://discourse.elm-lang.org/u/antew)\
**Post date:** [February 6, 2021, 4:31pm UTC](https://discourse.elm-lang.org/t/poll-how-do-you-do-styling/6874/5 "2021-02-06T16:31:23Z")

</div>

Tailwinds ([https://tailwindcss.com](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!

---

<div class="post-metadata">

**Author:** ![simonh1000](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/simonh1000/32/100_2.png) [@simonh1000](https://discourse.elm-lang.org/u/simonh1000)\
**Post date:** [February 6, 2021, 4:34pm UTC](https://discourse.elm-lang.org/t/poll-how-do-you-do-styling/6874/6 "2021-02-06T16:34:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![simonh1000](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/simonh1000/32/100_2.png) [@simonh1000](https://discourse.elm-lang.org/u/simonh1000)\
**Post date:** [February 6, 2021, 4:34pm UTC](https://discourse.elm-lang.org/t/poll-how-do-you-do-styling/6874/7 "2021-02-06T16:34:57Z")

</div>

me too - that’s css in my mind

---

<div class="post-metadata">

**Author:** ![pdamoc](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pdamoc/32/36_2.png) [@pdamoc](https://discourse.elm-lang.org/u/pdamoc)\
**Post date:** [February 6, 2021, 4:50pm UTC](https://discourse.elm-lang.org/t/poll-how-do-you-do-styling/6874/8 "2021-02-06T16:50:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dzuk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dzuk/32/5140_2.png) [@dzuk](https://discourse.elm-lang.org/u/dzuk)\
**Post date:** [February 6, 2021, 6:46pm UTC](https://discourse.elm-lang.org/t/poll-how-do-you-do-styling/6874/9 "2021-02-06T18:46:13Z")

</div>

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 :).

---

<div class="post-metadata">

**Author:** ![DullBananas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dullbananas/32/3709_2.png) [@DullBananas](https://discourse.elm-lang.org/u/DullBananas)\
**Post date:** [February 6, 2021, 9:41pm UTC](https://discourse.elm-lang.org/t/poll-how-do-you-do-styling/6874/10 "2021-02-06T21:41:39Z")

</div>

Are polls a new feature here?

---

<div class="post-metadata">

**Author:** ![Sebastian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/sebastian/32/98_2.png) [@Sebastian](https://discourse.elm-lang.org/u/Sebastian)\
**Post date:** [February 6, 2021, 10:45pm UTC](https://discourse.elm-lang.org/t/poll-how-do-you-do-styling/6874/11 "2021-02-06T22:45:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Valian\_Masdani](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/valian_masdani/32/3734_2.png) [@Valian\_Masdani](https://discourse.elm-lang.org/u/Valian_Masdani)\
**Post date:** [February 7, 2021, 4:24pm UTC](https://discourse.elm-lang.org/t/poll-how-do-you-do-styling/6874/12 "2021-02-07T16:24:45Z")

</div>

Good ol’ bootstrap classes, at least for simple applications like my [monthly subscription calculator](https://monty.vmasdani.my.id). I tried [elm bootstrap](http://elm-bootstrap.info/) 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.

 ![Screenshot from 2021-02-07 23-06-12](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/e/efc393f68bdba6de39f58e11f88a44509da158d0.png)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [February 17, 2021, 4:24pm UTC](https://discourse.elm-lang.org/t/poll-how-do-you-do-styling/6874/13 "2021-02-17T16:24:54Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.