Mobile-first Elm responsive design in 2019

Learn
1

I would very much like to learn how to approach proper mobile-first responsive design, much like we do with CSS and media queries, but using elm and elephants/elm-ui, in what might become a good 2019 fashion. Are there any well-explained examples which are easy to understand?
(ie, not just “you use x” and expecting me to know what you mean in detail because, actually, I won’t)

3 Likes
2

I’m doing this right now.

It’s a slightly different paradigm, you don’t just define media-queries with Elm-UI, but it’s not too complicated.

You have to have some sort of window height and weight data in your model, it can be as simple as window : { width: Int, height: Int }.

You can get this data on first load by requesting the task Browser.Dom.getViewport, and converting the viewport.width and viewport.height properties to ints, and putting in your model. You can track resizes by subscribing to the Browser.Events.onResize event, which itself returns a width and height Ints.

Now in your view code, you can either check the window size yourself with if then else statements, like if model.window.width < 600 then mobileView model else desktopView model, or you can use Elm-UI’s handy classifyDevice function, which takes a { width: Int, height: Int } and returns a Device type which looks like this:

{ device: Phone 
               | Tablet 
               | Desktop 
               | BigDesktop 
, orientation: Landscape  
               | Portrait 
}

If you use classifyDevice, just pattern match on it:

    (Phone, Portrait) ->
           phoneView model
    (Tablet, Landscape) ->
           tabletView model
    ...etc

Let me know if that makes sense, if you need more, I’ll try to type up a simple example in Ellie.

4 Likes
3

I hope he doesn’t mind but I think @opsb’s CV code is a great, easy to understand example of responsive design with elm-ui.

1 Like
4

Thank you very much both of you (and also the referenced author). It looks plausible, I’ll have to sit down and see how I can fit it in with my stuff when I get time (too busy with actual work at the moment, no time for this programming stuff at all). Thanks.

Presumably the above-mentioned schemes take care of rotation when a person rotates their phone on the fly, and presumably the window width and height get that information from somewhere that updates live rather than just the first time.

5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.