Design for Mobile First with Tachyons
Tachyons provides extensions (-ns, -m, and -l) to many of its classes to help you design for responsive layouts. This lesson walks you through designing for mobile first then adding a design for desktop.
[00:00] I've included tachyons, so I'll go ahead and create a P tag, say mobile first, then add a class of F1 just to bump the font up a bit.
[00:12] To design for mobile first, I'm going to add the class that represents how it should look on mobile, and I want there to be a border, so a solid border, b--solid, and so you see we have a border. If I open the dev tools and switch to device mode, you'll see we have a border at every size.
[00:31] I can make it so I only have a border on mobile by saying border:none, not small. Now only when it's small does it have a border. When it's not small the border is set to none, so border, no border.
[00:51] If you inspect that element, you'll see the media query is saying min width 30 EMs, set the border to none. When it goes small, that media query doesn't apply, and so you get a solid border.
[01:05] To design for desktop, you would say P, we'll do a class of F1, and the default is we don't want a border because that's for mobile. When it's large, also known as not small, we'll add the solid border, so not small.
[01:22] You can see it's kind of the flip where this is mobile, solid, mobile, none, desktop, none, desktop, solid. I'll say desktop second in here, and you can see when we're small we have the border on mobile and no border on the desktop, and when we get bigger, we add the border to the desktop and remove it from mobile, small, big.
[01:48] I'm going to duplicate this line and fine-tune this for large and medium devices, so I'll say large, medium. Remember, mobile is set to none. Mobile is none. Mobile is none, and then medium will have a solid border but not large.
[02:05] Then large will have a solid border but not medium, and we'll call this medium, hit save, and you can see now we're at medium and I'll go to large, medium, small. Where before, not small would have done medium and large, now we have a medium and a large.
[02:25] These extensions you'll find on many of the tachyons layout and formatting classes, so you can choose what should be mobile, which will be the class without the extension, and then you modify it for medium and/or desktop by adding the extensions you need to represent those.