Episode 85: Flexbox, CSS and Sass Style Guides, HTML Frameworks

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching The Treehouse Show, your weekly dose of Internet 0:02 where we talk about all things web design, web development, and more. 0:04 >> In this episode, we'll be talking about Flexbox, 0:08 CSS and Sass style guides, HTML frameworks and more. 0:10 >> Let's check it out. 0:15 First up is a really cool blog post called Flexbox in the Real World. 0:16 >> Now Nick, when you say Flexbox in the real 0:26 world, do you mean like the Real World, the TV show? 0:28 And they have to use Flexbox in that job that they never show up to? 0:30 >> That's. 0:33 >> Like, oh no, it's Tech's fault. 0:34 No, it's not. 0:35 >> That's exactly what this blog post is not about. 0:36 It describes how to use Flexbox in the best case 0:41 scenario, where you only need to support bleeding edge browsers. 0:45 It sounds kinda dangerous, but that's the way they've described it. 0:49 And it also describes how to support Flexbox in browsers that 0:52 maybe don't support it just yet, such as Internet Explorer 8. 0:58 So in the best case scenario, they provide some markup; in fact, they 1:02 have a full demo page, which you can click and see right here. 1:06 And you can look at the source to see how that all works. 1:10 But then, further down the page here they give a couple of code examples of 1:14 what exactly you need to do, so, in this kind of outer div, you would put 1:18 webkit flex and then display flex as well, just below that and that should support 1:23 all the cutting edge browsers that you would 1:29 expect would support something super cool like Flexbox. 1:32 And then inside of that in these divs here, they give a 1:36 couple of more properties that allow you to use Flexbox as well. 1:40 However there's a couple of in between scenarios where 1:46 you could use this tool called Autoprefixer, which will 1:50 help you support a couple of more browsers, and 1:54 it will give you markup that looks like this. 1:57 You certainly wouldn't want to have to write all that yourself. 1:59 The third scenario is if you have to support IE 8, but it doesn't 2:02 have to look quite as nice, you can go ahead and use progressive enhancement. 2:06 However, if it does need to support IE8 and IE9 and it needs to look 2:12 exactly the same you're basically out of luck unfortunately. 2:17 They give a couple of small workarounds using 2:22 a couple of shims and things like that. 2:26 But really, it's kind of just a tough scenario, 2:29 and you're better off using something else besides Flexbox. 2:33 >> You know, it's, it's really interesting that we have 2:37 polyfills and shims for so much other functionality except that. 2:39 >> Uh-huh. 2:42 >> You know, especially with Flexbox being such a useful feature. 2:42 Well, it's just; yeah, it's tough. 2:46 But hopefully, browsers will support it in the future. 2:48 >> Yeah, I mean, I guess the good news is they're working on it, 2:51 >> Mm-hm. 2:53 >> So, you know, that's, that's good news. 2:54 You can take that to the bank. 2:56 >> You can just try your best; that's the best you can do. 2:58 >> That's, yeah. 3:00 >> One day at a time. 3:02 >> Changed you just changed my life for the better, Nick. 3:03 Next up, we have a blog post called My Current CSS and Sass Styleguide. 3:06 Now, we've talked about styleguides briefly here on the show before. 3:12 A styleguide is basically gonna be something that your whole 3:16 team can following when coding your HTML, CSS and or Javascript. 3:19 Now, in this particular blog post, Hugo is talking 3:25 about his CSS and Sass styleguide, and that is 3:29 going to be the naming conventions of the style 3:32 guide, and how exactly did I put this all together. 3:35 So if we look at the naming conventions he goes through, and, and 3:38 talks about something that he calls BEM, which is for Block Element Modifier. 3:41 Which he says is a clever and clean way to name your CSS classes. 3:47 If he does say so himself. 3:52 But this is actually a pretty good way of going through and naming your CSS. 3:54 So if we take a look at this. 3:58 Here is the block, which just starts out 4:00 the whole block that you're gonna be working on. 4:04 Then, you'll use two dashes if you wanna modify something in that block. 4:06 If you're talking about an element beneath that block, do two underscores and 4:10 then continue on and so forth with dashes for modifiers and so on. 4:15 And he even says below that, yes, double dashes and double underscores. 4:21 We'll see why in a moment. 4:25 So, why is that? 4:27 Well it's in cases where you're gonna be taking a bunch of steps; 4:29 you have a bunch of different directives 4:34 with different elements and things like that. 4:36 So there's also going to be naming conventions that 4:39 he goes into, such as using blue or primary color. 4:42 Hey, you can even use both of them. 4:46 Look at that, this is using Sass. 4:48 We define the variable, and then we define it again, 4:49 which is going to be easier to define later on. 4:53 Now, defining something like, say, blue and primary color, is going to be really 4:56 getting into an instance where say you're 5:01 changing the color scheme of an application. 5:02 Just refer to the primary color or you could change it later on. 5:06 So, there are bunch more options here in 5:09 the styleguide from naming break points, tabs versus spaces. 5:12 Always use two spaces. 5:16 Basically, we're just gonna declare that here. 5:17 Anyway, there's a lot more in depth if you take a look at the blog 5:20 post, so check that out in the show 5:23 notes, which you can get to at youtube.com/gotreehouse. 5:24 Or search for us in iTunes. 5:28 We are The Treehouse Show. 5:29 >> Well, next up is X-Jiff or X-Gif? 5:31 >> If you wanna say it incorrectly. 5:35 >> I, I mean. 5:37 >> That's GIF. 5:38 >> It is Graphic Interchange Format, so I do feel like it 5:38 should be pronounced GIF, but it's actually JIFF, according to the creator. 5:42 That debate will never end. 5:49 But X-Gif is the GIF tag that the internet deserves but doesn't need 5:50 right now, or they need it right now, but they don't deserve it. 5:57 I'm not sure. 6:00 But, basically, it allows you to do normal GIF playback, just like you would expect. 6:01 Or, you can do ping-pong playback, where it goes back and forth. 6:07 You can also adjust the speed with the little slider here, look at that. 6:12 Whoa, GIFs in slow motion, what's happening? 6:15 Or you can speed up playback. 6:18 You can also sync GIFs to audio. 6:20 And, this has been a highly requested feature of the GIF format. 6:23 Finally, we can watch moving pictures with sound on the Internet. 6:27 It's really amazing stuff. 6:32 You can stop and start it, and you can even explode a GIF 6:33 into its component frames, which is really nice if you're trying to debug it. 6:37 You can view the source for this on GitHub. 6:42 It is using web components, and you just have to import polymer, then you 6:45 import X-Gif, and then you can enjoy the limitless GIF possibilities. 6:51 Now, I was saying previously that X-Gif is the tag that the Internet 6:56 deserves but doesn't need it right now or needs it and doesn't deserve it. 7:01 Well, there's a couple people that do actually think 7:07 that we don't need another GIF format like this, 7:10 because the beauty of GIFs is that they work 7:13 in places where images might otherwise work as well. 7:16 So there's been a little bit of push back on this project. 7:20 In my opinion, I think it really depends on the specific context. 7:23 You know, if you're using it in a place where it makes sense, then that's great. 7:27 But if you're trying to support, you know, a ton of different 7:32 browsers way back, then you might wanna just rely on traditional GIFs. 7:35 >> I have a large collection of animated GIFs 7:41 that I like to send to people via text messages. 7:44 >> Nice. 7:47 >> Instead of using words. 7:47 >> I'd like to see that sometime. 7:49 >> You will. 7:50 Next up, we have a project called MixItUp. 7:52 This is a really cool project that is a 7:55 jQuery plugin that gives you animated, filtering, and sorting. 7:57 Well what in the world does that mean? 8:02 It, it's actually pretty cool. 8:05 If we take a look at the demo rate here. 8:06 Well, we'll take a look at that first, and then, and then see what's going on. 8:09 Here we have a bunch of different discs. 8:12 As you can see, a bunch of, bunch of 8:15 rectangles and they've got different colors and different numbers. 8:16 So right now, it's sorted randomly. 8:20 If we wanted to sort it in ascending order, whoa, look at that. 8:23 When you do that, everything just 8:26 rearranges, and it's it's all really smooth. 8:27 We can also sort it in descending order, filter by just 8:29 these blue ones or the green ones or nothing at all. 8:33 So, why in the world would you want something like this? 8:37 Well, go back to the GitHub page, and it says, it says it all there. 8:39 MixItUp plays nicely with your existing HTML and 8:44 CSS, making it a great choice for responsive layouts. 8:47 [COUGH] it als, does these animations really smoothly, as you saw before. 8:52 So it's super easy to use. 8:57 You can use data attributes to give it order. 8:58 You can filter by categories CSS classes, and you can even 9:01 sort it where it has right there by order ascending or descending. 9:07 That's all the HTML that we needed to see the demo back there. 9:11 So, anyway, this is a really, really awesome plugin. 9:17 Could be really good for portfolio sites. 9:20 Things like that. 9:22 Check it out. 9:23 >> Very nice stuff. 9:24 Well, next up, is Bootflat, which is a 9:25 UI toolkit for the popular Bootstrap front-end framework. 9:27 Basically it provides you with a Photoshop document, which, you know, if 9:33 you're a designer, you might wanna go ahead and create your designs in 9:38 Photoshop, and you have all of the components there that you would 9:41 need, but in addition to that, it's also a full theme for Bootstrap. 9:45 So, if we scroll down here, we can get 9:51 an idea of what this UI kit actually looks like. 9:54 In fact, if we just go to the Documentation, we 9:58 can look at these in a little bit more detail. 10:00 So, as the name implies, it has a flat design or a 10:03 flat theme, and there's all the different things that you get in Bootstrap. 10:08 But just slightly restyled so you have these nice, colorful button groups. 10:12 There's button drop downs, labels, badges, popovers, 10:19 tool tips, dropdowns, forms, and so much more. 10:23 Not all that to say about it, but if you 10:27 are designing your website using the Bootstrap framework and you just 10:29 want to get a framework in there really quick, maybe you're 10:33 rapidly prototyping, this is a really great way to do that. 10:36 >> Yeah, very, very nice. 10:39 I like the name too, Bootflat. 10:40 >> Makes sense. 10:42 >> You know if it's compatible with Bootstrap Foundation 5? 10:43 >> I think it is. 10:46 I mean, Bootstrap Foundation 5 is compatible with. 10:47 >> Everything. 10:50 >> Everything ever made. 10:51 >> Right. 10:52 Yeah, okay, good point. 10:52 >> Hm. 10:54 >> Next up, we have a blog post on getting started with Grunticon. 10:54 Grunticon is a nice plugin for the Grunt built system, that makes it 10:59 really easy to use icon fonts, made of SVG files embedded into CSS files. 11:05 Whoa! 11:11 That's so many acronyms and words and what does it actually do? 11:11 well, it's pretty easy to use. 11:15 So what we do, let's check it out right here. 11:17 We have a bunch of these SVG files, and if we want to make an icons set 11:19 out of that, we're gonna get these CSS 11:25 files after we've run it through the Grunticon command. 11:27 So it'll also fall back to PNGs, just in case the browser does not support SVG. 11:32 Once you do that you can get the element by using the 11:39 icon dash, whatever the file name was right there beforehand. 11:45 So, here we have data class equals icon dash bag. 11:50 If we scroll back up here, we can see that there is a bag.SVG in the SVGs folder. 11:54 And then, boom, you are good to go. 12:01 Once you have this all done it tells you how to set it up inside Grunt. 12:04 Once you have it all done, you can then 12:08 go ahead and change these files, using standard CSS. 12:09 You can see right here they added a grey background and some rounded corners. 12:13 So, super easy to use project and a really nice 12:18 alternative to icon fonts if you don't want to use those. 12:21 >> Very nice. 12:25 Well next up, is Grid List, and this project is actually pretty 12:26 similar to MixUp, in that you can rearrange different objects on the 12:30 page, and it does it all automagically; you don't have to worry 12:33 about, you know, all the complex positioning that you would have to do. 12:37 They have, the, their project up on GitHub, 12:41 but, that's boring, let's look at the demo. 12:44 >> [LAUGH] Yeah, that is. 12:46 >> I'm gonna go ahead and drag and drop these boxes around. 12:46 What? 12:50 What is happening? 12:50 >> Is this magic? 12:52 >> This is amazing. 12:52 Look at that. 12:53 And all of these boxes rearrange just like you would expect. 12:54 You can even click on these one, two, and 12:58 three X buttons to adjust the size of these boxes. 13:02 And it all happens dynamically. 13:05 And if you click these plus and minus buttons, you can actually zoom in or zoom 13:07 out from the grid, and they, again, all rearrange just like you'd expect. 13:13 So, this is pretty handy, there's a lot of different types of 13:20 websites that you could build with something like this, and it's actually 13:22 really easy to add to your site; you can just use it 13:27 as a jQuery plugin that's build on top of there agnostic GridList class. 13:30 And it gives you a ton of options. 13:36 Not gonna go into the details here because it is a pretty detailed. 13:39 One thing to keep in mind is that there are other 13:43 products that to do this, for example, Mixup is somewhat similar. 13:45 Might meet your needs just as effectively as 13:49 this project, so be sure to look at both. 13:51 There's another project called gridster that was, I think, called gridster.js. 13:53 And it did a similar thing. 13:58 But apparently, it's no longer in active development, and it does 14:01 have a couple of limitations that this project does not have. 14:04 So definitely be sure to check that out. 14:09 >> So, you're saying that if you don't want to 14:12 use Grid, there's definitely other options to mix it up? 14:13 >> That would be the case. 14:18 >> Next up, we have a project called F7. 14:20 Now, this not the function key on your keyboard 14:22 that we're talking about that generally does the rewind function. 14:25 No, this is Fully Featured HMTL Framework for Building iOS7 14:28 Apps, and we can see it right here in the window on this page. 14:33 So what in the world does this have? 14:38 Well, this provides a bunch of different 14:40 options for working with common iOS7 elements. 14:42 In this modal section, we can see, hey, here's an alert button. 14:46 Okay, wow, this looks really just like iOS 7, 14:50 and that is the whole point of this framework. 14:53 Now, it supports motes, it supports most functionality that 14:57 you would expect to see inside of iOS 7. 15:00 So we've got tabs, media lists, list view, a ton of different things. 15:03 Now, you might be wondering, hey, does this 15:09 support, you know, Android and things like that? 15:11 It may or may not work on there. 15:14 The point of this particular framework is to let you rapidly 15:15 prototype iOS7 applications, using just HTML 15:18 and then closely mimicking the behavior. 15:23 And for that it does a really, really nice job. 15:26 It gives you a lot of semantic classes. 15:28 Not a huge amount of markup, extra markup that you need 15:30 to add to you HTML pages to get all that working. 15:33 Like I said, it'd be great to 15:36 use for a prototyping functionality of an application. 15:37 >> Very nice stuff. 15:41 Well, that's all the time we have today. 15:41 I am @nickrp on Twitter. 15:44 >> And I am @jseifer. 15:45 For show notes and more information on anything we 15:46 talked about, check out our show notes at youtube.com/gotreehouse. 15:48 Also, search for us on iTunes, we are The Treehouse Show. 15:52 And speaking of Treehouse, if you'd like a free month of 15:56 Treehouse, follow the links at the bottom of the show note. 15:59 >> Of course, if you'd like to see more videos 16:03 like this one about web design, web development, mobile business 16:05 and so much more, be sure to check us out 16:09 at teamtreehouse.com and use that link to get a free month. 16:12 Thanks so much for watching, and we will see you next week. 16:16 [MUSIC] 16:19

You need to sign up for Treehouse in order to set up Workspace

Sign up