Elm has a great package for producing nice looking sites using Google’s Material Design language with little effort, in elm-mdl, so let’s take advantage of it!
Project
We’ll start off with a new project, and add the package:
We’ll start off just pasting in the Counter.elm example from the elm-mdl repository’s examples:
OK, we can run this in the reactor with elm-reactor.
And visit it at http://localhost:8000. Click some buttons, and you can see material in action. Let’s expand on it and start adding some more components.
Layout
Layout provides an overall layout for your application. We’ll add one with just a header at first:
If you refresh, you can see we’re now using a header on our page. We’ll skip the drawer for now, but let’s add some tabs:
If you refresh, you can see we have tabs. However, those tabs don’t do anything yet. We can tell the layout what messages we’d like it to give us when we select a tab:
Now if we open up the developer tools we can see the selected tab’s index when we click the tab. Let’s provide a couple of different views depending on the selected tab.
And if you check it out now…it’s awful. Here’s why. Our viewCounter function is what’s adding on the Material CSS, so let’s remove it from there and add it to our main view function instead. Ultimately, you want this included in your html file probably.
Now let’s just play with one more thing today — colors. You can specify a color scheme to the Material.Scheme.topWithScheme function. Let’s try Teal with a LightGreen highlight:
This is nice but we don’t have any highlights. We can tell the layout which tab index is selected:
Alright, and that works. One last trick — that second element in the tabs 2 tuple is a list of styles. Let’s set their background to a lighter version of our scheme’s primary color:
Pretty easy!
Summary
In today’s episode we had a quick look at introducing Material Design Lite into a project, showing both how to get started with it as well as how to use the `Layout` module to build layouts rapidly.
I’m thrilled that this early in Elm’s existence we have such a fantastically well-constructed general purpose layout package. See you soon!
Resources
DailyDrip
If you liked this, you’re going to love DailyDrip. We send you new content about a programming topic you’re interested in, every weekday. It only takes around 5 minutes a day to continuously improve your development skills and stay on top of the constantly-changing programming landscape. We’ve got a ton of content for Elm and Elixir, with more every day and a lot more topics coming soon.
Win a copy of Richard Feldman’s Elm in Action
We’re giving away five copies of Elm in Action, if you want to learn Elm from the first book on Elm, by Richard Feldman himself, of all those videos you’ve watched on Elm.
