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:

  • Routing
  • Bootstrap integration

Address any concerns

Overview

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.

I found Brunch + Elm 0.18 + Sass + Bootstrap 4, and it sounded perfect. I had not heard of Brunch before, but it seemed like a more lightweight version of Gulp.

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.

Routing

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.Elm to 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 rundis/elm-bootstrap.

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.

What? Why?

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.