title: Elm: How would you build and style your UI?
body: <p>For the last few days I've learning about Elm, and it has been a refreshing experience. So much that I do not want to go back into JS land, :-(.</p>
  
  <p>My problem is that I still do not see a way to produce a web app with elm, and I would love some guidance and advise:</p>
  
  <p><a href="http://package.elm-lang.org/packages/evancz/start-app/2.0.0">evancz/start-app</a> is great for organising the app's structure.<br>
  <a href="http://package.elm-lang.org/packages/evancz/elm-effects/1.0.0">evancz/effects</a> together with <a href="https://github.com/ThomasWeiser/elmfire">elmfire</a> can handle talking to <a href="https://www.firebase.com/">Firebase</a>.</p>
  
  <p>But how would I build and style the UI?<br>
  Let's take a concrete example: a <a href="http://semantic-ui.com/modules/dropdown.html#/examples">styled select widget from Semantic-UI</a>.<br>
  It is implemented as a list of divs, together with some JS to handle the dropdown and multi-select.</p>
  
  <p>The alternatives I have found so far are:</p>
  
  <ol>
  <li>Include Semantic's CSS and JS (it requires JQuery) and use <a href="http://elm-lang.org/guide/interop">ports</a> to hook into the widget's JS events.</li>
  <li>Include only Semantic's CSS and try to build the functionality in Elm.</li>
  <li>Both build the functionality and style in Elm <a href="http://package.elm-lang.org/packages/circuithub/elm-bootstrap-html/6.3.1">(adam-r-kowalski/Elm-Css)</a>.</li>
  <li>Forget about Semantic and redo the site in Bootstrap using circuithub/elm-bootstrap-html.</li>
  </ol>
  
  <p>Are there other alternatives, or widgets that could be reused that I am missing?</p>
  
  <p>The <a href="https://github.com/TheSeamau5/TabbedPages">TheSeamau5/TabbedPages</a> container is certainly intimidating. 
  Would others widgets require this much work?</p>
  
  <p>Again, I'd love to use Elm for my project, but I do not have the knowledge nor the time to write all the widgets myself.</p>
  
  <p>For context, the widgets I am using from Semantic are:</p>
  
  <ul>
  <li>Two hamburger menus, one on each side of the screen.</li>
  <li>A styled select.</li>
  <li>Disclosure triangles, hiding/showing more content.</li>
  <li>A carrousel-like display of images, with prev/next and dots at the bottom.</li>
  </ul>
  
  <p>Thanks again for the work you are putting into Elm, and any advise you can give me.</p>
  
  <p>PS: I have also posted this question in elm's mailing list.</p>