Can't decide between Elm-bootstrap or Semantic-UI (with and without JS)

Disclaimer: Posted this on Reddit yesterday as well, but then discovered this community is much larger so posting it here. Will also say I’m open to other ideas than the below 3 options as well.

I have three options at the moment that I’ve been racking my brain over for the last 24hours, and I can’t make the decision.

The best example of what our platform is would probably be something like RobinHood (the stock trading app). We’ll probably design it with mobile-responsiveness first, and then scale it up to full page app.

Option 1: Use Elm-bootstrap and Bootstrap 4.

Pros: It’s all in Elm, so I don’t have to worry about ports. I also think (but this is conjecture) that it’ll end up being cleaner than just using boostrap-css and doing all of the required JS pieces that are missing myself in Elm, because it uses aliases for things (like Bootstrap.grid etc), instead of say, div [class “grid-x grid-y”]. Feels like that may be a little cleaner, again though, conjecture. At the least it does save the port and interop requirements, which seems to be a big plus? Bootstrap resources online are common too due to its popularity, if I ever get stuck or need help with something design related it should be easy to find a solution.

Cons: The css classes seem confusing and messy (the names aren’t great and are not very descriptive). Bootstrap also seems to require a lot of bloaty nested HTML. I also don’t like the styling as much as Semantic. I’m also relying on the robustness and flexibility of the elm-bootstrap library (hopefully there are no bugs and it can do everything I need it to).

Option 2: Use Semantic-UI and their JS components

Pros: It’s very pretty, I love the styling. It seems to be more featureful and has cool features that’d be useful for Elm (like placeholders, which was just released in 2.4). The css classes are super clear and basically plain English, which I think will make it a lot easier to learn and use. It seems more concise in its use of HTML.

Cons: I’d have to use ports to handle all of the interop, and i have no idea how that’ll tie into Elm. I can imagine initialization problems abound (I presume page/view updating will require reinitialization, etc). I’ve heard that file-size is also larger than Bootstrap, but not sure how true that is anymore or how much bigger it is.

Option 3: Use Semantic-UI LESS

Pros: Same pros as above. The difference is that this doesn’t include the javascript, so I have no problems with interop.

Cons: I have to implement all of the javascript functionality myself. This is a sorta-con I guess, maybe this is a good thing, but maybe it’s a lot of work and I’d be better off just using something like Elm-bootstrap because this is all already done for me, and it’s done in Elm too.

Considerations: Speed to build a product, code maintainability/cleanliness, code clarity, optimizing file sizes, having a great looking product, easy development/learning

So far I’m leaning toward Bootstrap simply because my gut is telling me that this will be cleaner and require less work, but I really like Semantic-UI’s styling (really-really), and I want to use some of its cool features like placeholders (Bootstrap doesn’t have this). I’m just worried about either hand rolling the the JS and making it all myself in Elm if I use the “LESS only”, or worried about how nicely Elm will play with the Javascript using ports if I use their “full package”. Let me say that if there was an elm-semantic that did what Bootstrap did (reimplemented all the JS in elm) I’d probably use that.

Sorry for the massive wall of text, and thanks if you made it through it!

1 Like

If you haven’t already, you should also check out

We use it and find that it makes styling very easy. It may not be what you want as you need to implement the style yourself, but it’s easy enough to find a nice looking web page and implement its styling.

That would make your code really hard to work with, I would definitely advise against it. Ports force you to create a command for everything you want to do and then separately write the code to react to the result. That’s OK for things you want to treat as an external service, but styling is not one of those in my opinion. I guess there’s not many cases where you’re waiting for a result back from it. But still, using ports for the view just seems very likely to make you frustrated with your project!

From prior experience at work with both Bootstrap and Semantic-UI, I can say that on the CSS-side, Semantic-UI definitely is a lot cleaner, both in immediate usage (the naming of the classes) and extensibility (Bootstrap overrides many more things than it needs, over-uses !important and is quite restrictive in how you write your HTML.)

Compare Bootstrap’s Nav example with Semantic-UI’s Menu example and you immediately see the difference:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
<div class="ui menu">
  <div class="header item">
    Our Company
  <a class="item">
    About Us
  <a class="item">
  <a class="item">

Using Semantic ‘batteries included’ with JS will not work well: Most of the JS attaches event handlers to existing HTML elements, which Elm’s VDOM manager might replace at any time.

However, I have used Semantic-UI (only the CSS part, without the JS) in two different Elm-related projects now, and I am loving it! Most of the more involved JS-functionality Semantic-UI provides is based around:

  • Custom dropdowns or (searchable) selects: This might be the most ‘painful’ thing to miss, but something that can be emulated by one of the Elm Select wrappers (I’ve previously used SelectTwo) without that much of a hassle.
  • Opening/closing of modals. In the end, the actual visibility or not of the modal screens is managed by CSS classes, rather than JS-animations, so emulating this from Elm is very easy.

Does the Semantic example you provided also include the navbar toggle functionality? Seems that’s a big part of why the Bootstrap example is heftier. It’s still not as clean even without it though, I see what you’re saying there.

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