Responsiveness

Of course you're probably wondering how to make a responsive app with all of these layout primitives.

Well, if you are on board with the idea that putting layout in your view makes sense, and that responsiveness is mostly about layout...

Then it makes sense that the main place you'd handle responsiveness using this library would be in your view!

A Subscription to Window.Size

Your first step will be to set up a subscription to the Window.size using Window.resizes.

Once you have a subscription to the window size, you can use the Element.classifyDevice function which will captureWindow.Size into something more conveient.

There's no magic here, in fact, here's the entire classifyDevice function:

classifyDevice : Window.Size -> Device
classifyDevice { width, height } =
    { width = width
    , height = height
    , phone = width <= 600
    , tablet = width > 600 && width <= 1200
    , desktop = width > 1200 && width <= 1800
    , bigDesktop = width > 1800
    , portrait = width < height
    }

Then store the result of classifyDevice in your model as something like model.device.

Views that respond

Now you're ready to make your view responsive.

How about a layout that is normally a row, but if it's on a phone, it should render as a column?

viewFn model =
    let
        myLayout =
            if model.device.phone then
                column
            else
                row
    in
        myLayout MyStyle [spacing 20] 
           [ --all the children
           ]

That's pretty easy, it's just some simple elm code.

Let's say we want to go further by adjusting some attributes as well as switch the layout.

viewFn model =
    let
        myLayout style attrs children =
            if model.device.phone then
                column style (spacing 5 :: padding 10 :: attrs) children
            else
                row style (spacing 10 :: padding 40 :: attrs) children
    in
        myLayout MyStyle [spacing 20] 
           [ --all the children
           ]

We can capture all the behavior we want in a lightweight function.