Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 984 of the free egghead.io lessons, plus get CSS content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Build Responsive CSS Layouts with Tachyons

2:47 CSS lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Ivan

This might be unrelated, but what plugin do you use on Visual Code to generate the html from the stuff you wrote here i.e. when you typed div+div to generate <div></div><div></div>

In reply to egghead.io
Avatar
Tristan

that's https://emmet.io/ available for most editors

In reply to Ivan
Avatar
Bogdan

Hi, this atomic approach to css is great. I think is worth a few more videos at least if not a full course. Excellent work and thank you for this. I am using basscss since a while but tachyons seems more eveolved from what i see.

In reply to egghead.io

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.

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.

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.

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.

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.

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.

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.

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.

When I go back in, it switches to the column layout. When I come out here, it switches to row.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?