Build Responsive CSS Layouts with Tachyons
Building responsive css layouts is critical in any modern website. Tachyons makes this easy by designing for mobile first then enabling you to switch directions and positions of elements when the site scales up to desktop sizes. This lesson walks you through using Tachyons with flexbox and leveraging the flex-column and flex-row classes to respond to mobile and desktop sizes.
[00:00] We'll start our HTML with a main, which has children of a header, a section, and a footer. In our header, we'll say, "Header." In our footer, we'll say, "Footer." In our section, we'll have some "Lorem ipsum." 10 words of that will work.
[00:18] I'm going to add a couple of classes to some background. We'll do hot pink. We'll add that same one to the footer as well. Then we'll pin the footer to the bottom by using the class of flex, which will set the display to flex. That defaults to flex direction row, so we'll need to add flex column to set it back to column.
[00:47] Then a min height of uport height 100. All we need to do to get the footer to the bottom is add a class and a section to say flex auto, which is flex grow one, or fill in the rest of the space.
[01:03] You see that whole middle section is filling in that space. Then I'll add padding all around with four on the header. If you inspect that, you'll see that we have two ems of padding all around. For the footer, all I want is the vertical padding, so I'll say padding vertical four. You'll see that we have padding on the top and the bottom, but not on the sides.
[01:25] We'll bump up the fonts to F1 and F3. We have the basic layout for our site here. In the section, I want to have two different sections inside of it. Let's have two divs, a div next to another div.
[01:48] In here, I'll have 10 words of "Lorem." Here, I'll have 10 words of "Lorem." Then I'll add a background on this one. Background -- we'll do black, 30, so you can see the difference between the left and the right here, which is currently a top and bottom.
[02:02] This might be fine for mobile, but if I start pulling this out, it gets kind of weird where you'd think we'd want two columns next to each other. I can go ahead and set the display to flex for that. It defaults to two columns with flex direction row.
[02:22] Since we're designing for mobile first, I'm going to say column as my default. This will put it back to where it was. For this wide layout, I'll say flex row when it's not small.
[02:39] When I go back in, it switches to the column layout. When I come out here, it switches to row.