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
Considerations: Speed to build a product, code maintainability/cleanliness, code clarity, optimizing file sizes, having a great looking product, easy development/learning
Sorry for the massive wall of text, and thanks if you made it through it!