Model a Layout with row, column and spacing with elm-ui
In this lesson we will start to get to know the row and column functions in elm-ui to help us layout our application. We will choose the mobile first approach in which we will display everything in one column, show how to handle two columns and explain that later when we do responsible we will be able to play a bit more with this. Since the concept of margin does not exist in elm-ui, in this lesson we learn how to solve it by using spacing and we will talk about padding in a future lesson.
Flavio Corpa: [0:00] You might have noticed that we're using Element.layout, but since it's the beginning, we use the double dot to expose everything which is inside of the Element module. We don't need to call Element.layout anymore. We can just call it layout, and everything works the same.
[0:18] We're going to be giving my row of stuff a more decent name. We're going to call it dashboard. We're going to be playing with these elements here. We're going to remove this and give it a name of attributes, and I'll pass it here. Instead of a row, we want to display everything in one column.
[0:43] Notice what it's happened. Everything is vertically aligned, so we're no longer working in one row, but we're working in two columns. This element is different because it has an ally so we're going to fix that to have three elements. In fact, we need four elements for our dashboard. We're going to say that we want to have a centerX. Now everything is centered.
[1:12] What if we want to have within the same column an element that has two columns? Then we need to get back to row again. My element, my element. This is exactly how we would have one column inside another one.
[1:30] You notice by default, there is no separation. How do we work this out? In Elm-UI, there is no concept of margins, there's something called spacing. For example, if we wanted to divide these elements, we would say spacing and give it a number of pixels, of 10, and they will split. For our example, we want to be mobile first, and we'll keep everything in just a single column. We will add two columns later.
[1:57] What we're going to do now is to give to our main layout some properties. We're going to say Background.color and pass rgb5, which is how you use colors in Elm-UI, 238 241 245.
[2:15] You might have noticed the change but now as a background color we are not having white, we're having a faded grey. Now we're going to be doing the same with this element. Say that we want a Background.color of rgb255 228 231 235.
[2:36] Now at least we get to see that we have a different element here. We're going to give it a spacing of 15 and now our dashboard is ready for our next steps, to turn my elements into the card we want to repeat in our dashboard.