Routing and using Bootstrap: An Elm Case Study — Pt II
As outlined in Part 1 of this series, we will look at using Elm as a topic selected for up-skilling and how through you can make the most out of your time.
Find a starting point
Once I had established my goal, to create a yoga website based on a Bootstrap template using Elm, I highlighted the essential requirements and started looking online for an existing starter / skeleton repository that addressed these requirements:
- Bootstrap integration
Address any concerns
I had decided to use Elm 0.18, as I had previously taken the 0.18 part of the Elm for Beginners course by James Moore, which I highly recommend, and it being the most recent. However, this made finding starter kits or a good app scaffold repository quite tricky. I was aiming for something like this Elmlang Scaffold Example by Gizra, but it was for 0.17 only.
It was not all plain sailing, though, as I found out this repository only included the Bootstrap framework for the outputted code, not direct integration with Elm, and it did not deal with routes. I had some work to do.
I found a fork of
elm-community/elm-route for 0.18: Bogdanp/elm-route. It seemed like a good route parsing repository to me:
- Define routes
- Match routes
- Convert routes to String
- Use route string in
Main.Elmto control app flow
I started by getting this working locally by installing the package:
elm package install Bogdanp/elm-route and getting the example routing app working first.
I then got this working in my fork of the
mathieul/brunch-with-elm-bootstraprepository. I was going to progress with my fork, but, after meeting with my Unleasher, he advised me to get this change included as a PR. More on this in the following post about contributing code.
Bootstrap in Elm
I had played around with and got another package working using Bootstrap 3, but following a discussion with the repository maintainer, a more suitable Bootstrap 4 compatible package was integrated.
The library for using Elm that was chosen was the rundis/elm-bootstraplibrary. Bootstrap 4 compatible and well supported.
After testing out and working with a few Bootstrap templates, I ended up going with the free for personal use Bell Template theme by BootBites.com.
It has a clean look, but, most importantly, it is Bootstrap 4, the importance of which I learned through my mistake with my first template selection on Bootstrap 3, which was not compatible with
This allows for outputting Bootstrap components through Elm:
view : Model -> Html Msg
view model =
Grid.container  -- Responsive fixed width container
[ CDN.stylesheet -- Inlined Bootstrap CSS for use with reactor
, navbar model -- Interactive and responsive menu
, mainContent model
This enables Bootstrap components composing via functions with parameters. See here for a complete list of currently supported components.
Why not start from scratch?
Both approaches have a time and place, and starting from scratch would certainly provide a more thorough understanding. However, in this case, I wanted to hit the ground running and achieve fast results towards my end goal, rather than achieve a precise understanding of all technicalities. That will come with time. I also wanted to be able to contribute back to an existing repository, not start my own.
What is next?
Outline Open Source Contributions
In the next post in 2 weeks time; Contributing to Open Source: An Elm Case Study — Pt III, I will provide details on how open-source contributions and discussions came up and how they were followed through.