Episode 16: Simple CSS Grids

[The Treehouse Show] 0:00 Hi, I'm Nick Pettit. >>And I'm Jason Seifer. >>And you're watching The Treehouse Show, 0:02 your weekly dose of Internet, where we talk about all things web design, 0:05 web development, and more. 0:08 [Seifer] In this episode, we'll be going over brand new CSS techniques, 0:10 the usual roundup of responsive design techniques, 0:13 and command line tools for web developers. 0:17 [Pettit] Let's check it out. 0:19 [The Treehouse Show] 0:25 [Pettit] First up is Simple Grid, 0:27 which is a barebones grid created for developers 0:29 who need a barebones grid. 0:33 [Seifer] So this is going to be something that gives you a lot to work with, 0:35 something that's complicated and gives you everything 0:38 you need to start doing a CSS framework? 0:40 [Pettit] It's barebones. >>Okay. >>Yeah. That's it, Jason. 0:43 The other cool thing about barebones grid is that it's also responsive, 0:48 as you would expect with most CSS grids these days. 0:53 When I was talking to Jason before the show, I said, 0:58 "What really is different about this grid?" 1:01 and we couldn't quite figure it out, but the thing is, 1:03 it is very simple, so it's probably a really good learning tool 1:07 if you are trying to figure out how to use something more complex 1:11 like Twitter Bootstrap, for example, 1:15 or if you're just trying to build your own grid from scratch. 1:17 [Seifer] It's also really lightweight, which is really nice 1:22 maybe if you are just prototyping a site. 1:24 [Pettit] Yeah. And I think it's very important for CSS grids like this 1:27 to be lightweight, especially when they're responsive 1:30 and trying to deliver content to mobile devices. 1:33 [Seifer] When you say "barebones" I think of the word "bear" and then space, "bones." 1:38 Like the bones of a bear rather than a lightweight grid. 1:43 [Pettit] Jason, you're pretty. 1:46 [Seifer] Next up is BootMetro. 1:49 This is a metro-style web framework. 1:51 This is going to include CSS, HTML, and JavaScript 1:53 if you want to start coding websites like Metro. 1:57 This is going to be much more important now that 2:00 Windows 8 has officially been released. 2:02 [Pettit] So, just for a second, "Metro" meaning 2:05 the design language used by Microsoft. >>Yes. 2:07 The design language used by Microsoft, not-- 2:11 it has nothing to do with clothes or style or anything like that. >>Got it. 2:13 [Seifer] So there's a bunch of different demos on the site that you can go over. 2:17 One thing that you'll see in a lot of Windows Metro apps 2:20 is something called this application bar, 2:23 and you can see it over on the bottom of the screen right here. 2:26 There are just tons of different tool bars 2:28 and things that you can add into your application. 2:31 They include different styling for tables 2:34 as well as dropdowns and kind of everything 2:37 that you would be expecting out of a framework these days. 2:39 So pretty easy. You can find the link to this BootMetro 2:44 in the show notes at youtube.com/gotreehouse. 2:48 [Pettit] Pretty nifty. Next up is typeset.css, 2:52 and this is just a style sheet that-- 2:56 well, they describe it as a no-nonsense CSS typographic reset 3:00 for user-generated content such as blog posts 3:06 or comments or form posts, etcetera. 3:09 And you can go ahead and click through on the left side here 3:12 and see the different kinds of styling that typeset.css provides. 3:16 It is as described. It's just a really simple 3:23 set of styling for user-generated content. 3:27 Just so there's not stuff that's breaking the page 3:30 or going really far outside the bounds of a particular content area, etcetera. 3:34 So pretty nice. >>So this is something that you would use, 3:40 maybe, instead of a full framework if you just want 3:43 to reset the styles on your blog comments and maybe forum threads. 3:46 Anywhere where people can actually enter stuff. 3:51 You just use that part rather than something like Bootstrap or BootMetro, 3:53 which is a whole complicated framework. 3:57 [Pettit] Exactly. Just pretty simple and straightforward. 3:59 So next up, we're going to check out web trends. 4:02 [Web Trends] 4:09 Like many websites, the site for Time Magazine has gone responsive, 4:12 and we've seen this happen with Boston Globe, USA Today, 4:17 which we covered on a previous episode, and now Time Magazine 4:21 has made their website responsive as well. 4:24 [Seifer] It almost seems like making a website responsive 4:27 is a web trend in itself. 4:30 [Pettit] That could be the case, Jason. 4:32 So if we look at Time Magazine's website, 4:34 it looks like a pretty standard news website, 4:37 but if we go ahead and resize the browser here, 4:40 [Seifer] Whoa! >>And make it a little bit smaller, 4:44 you can see how, as we resize it, Time will respond-- 4:47 not the concept of time itself, but Time Magazine. 4:54 That would be crazy. 4:58 Anyway, looking at the mobile version of Time here, 5:00 I think that there are a couple things that they didn't get quite right. 5:05 I really would much rather see just this view, 5:10 just the top news story with a picture and the top headline, 5:15 or maybe something more like this, where I get the top four headlines. 5:21 If you look up at the top here, they have the logo, 5:25 which I think is a little bit too large and branded. 5:28 Then they have this search box here, 5:31 which I don't really think is appropriate to show in this particular view. 5:34 I think it might go better down towards the bottom or something, 5:38 just because, when people come to a news site, 5:43 I don't think they're really looking to search immediately. 5:45 I think they're looking moreso to browse. 5:49 It's more of a passive activity where-- >>More like people 5:51 are going to be consuming the content rather than 5:55 be trying to enter things into it as soon as they hit a site. 5:58 [Pettit] Exactly. I think people are just hitting a site 6:02 to go ahead--or hitting a news site to go ahead and browse 6:04 and just see what the latest stuff is. 6:07 They don't necessarily want to go there to immediately search for an article 6:10 that they have in mind, or search for a topic that they're interested in. 6:13 So that seems a little bit off. 6:16 I also think these dropdown menus are a little much. 6:18 I think they could have consolidated this in some other way, 6:22 maybe put these topics down towards the bottom. 6:26 I don't know. The dropdown menus just seem wrong for this small of a screen. 6:30 [Seifer] Now, if you could change one thing about this, 6:36 what do you think it would be? >>I think I would just try to simplify it. 6:38 I think what's apparent here is that they took a pre-existing website 6:42 and then tried to make it responsive. 6:46 Which is a perfectly legitimate approach, 6:50 as long as you do it right and you make the mobile version really simple. 6:53 The reason you want to do mobile first 6:57 when you're doing responsive web designs and then working your way up 6:59 to those desktop layouts is so that you concentrate 7:02 on the core experience and make something really, really simple, 7:05 and then you add things on top of that as you go up to larger screen sizes. 7:09 So I think they got that a little bit wrong here. 7:14 It looks pretty cluttered for a mobile website. 7:17 I mean, this big feedback button is kind of ridiculous for a mobile site. 7:20 Anyway, there's a chance you could go wrong with a responsive site. 7:26 [Seifer] Interesting. So if you want to check this out, 7:32 maybe the old version, would that be going back in time? 7:35 [Pettit] That's very good, Jason. >>Thanks. >>I'm impressed. 7:39 I'm proud of you. >>No problem. So that was web trends. 7:42 Next up, we have an article on Smashing Magazine called, 7:47 "Powerful Command Line Tools for Developers." 7:49 This is actually a great article if you're maybe just getting into 7:53 how to use the terminal or the command line. 7:56 Check it out and get reaquainted with some 7:59 of the different tools available to you. 8:01 The first thing that they go over is a tool called Curl. 8:04 Curl will fetch web pages, files, and anything you need from the command line. 8:06 There are a ton of different options and things that you can do with Curl, 8:11 and there's a nice introduction on here. 8:14 There's also introduction to other tools such as 8:17 Ngrep, Netcat, Sshuttle, which is going to be for doing SSH tunneling 8:19 to your different servers, which also works with DNS. 8:27 Finally, there's also something called Siege, 8:33 which is an HTTP benchmarking tool. 8:35 You can do this to do testing of your web application 8:38 from the command line, so it'll go through and simulate 8:42 a bunch of different rapid connections to your web application. 8:45 From there, using that data, you can figure out what you need to optimize inside your app. 8:48 Anyway, it's a great roundup, and they actually tell you 8:54 how to use these tools on the site, so check that out. 8:57 [Pettit] That's really handy. You know, one thing I've said on the show before, 9:00 and I want to re-emphasize, is that I feel like a lot of designers 9:03 are sometimes afraid to use the terminal, they think it's just 9:06 really scary, and they'd rather stick to their HTMLing and CSSing 9:11 and Photoshop and stuff, but it's a really, really useful tool, 9:15 and it can make you a lot more independent 9:18 and make you a really powerful asset to a team of designers and developers. 9:21 [Seifer] So I guess if I were going to redo my Halloween costume, 9:27 and I was going to a party full of web designers, 9:30 I could be a terminal. >>That's right. >>And that would scare everybody. 9:32 [Pettit] That is pretty scary to some people. 9:36 Next up, and I'm going to say this wrong. 9:39 I think it's Macky-Sue? Makisu? 9:41 It's Japanese. >>I have nothing to offer. 9:45 [Pettit] Basically, this is a set of menus, 9:48 or dropdown menus, and I'll go ahead and toggle this 9:51 so you can see-- >>Wow, it rolls up! >>how these fold up 9:55 and how these fold back down, and each one of these 10:00 is just a different style or different pacing of animation. 10:03 They're titled after different types of sushi, 10:08 which I think is pretty cool. 10:10 If we go ahead and go over to the GitHub page, 10:14 it says it's an experimental CSS 3D dropdown concept, 10:18 and you can actually use it as, you guessed it, a jQuery plugin. 10:24 Now, when I first saw this, I thought, what the heck is the application of this? 10:28 And I think you'd want to use this on pages 10:33 that might be a little bit more flashy in your app. 10:37 So say, for example, you had a web application 10:39 that was like a subscription app, and you had a plans page, 10:43 and you wanted to show all of the features of the app. 10:48 You might say, learn more, and you can go ahead and click, 10:51 and it'll fold down like a sushi menu and show you 10:53 all of the features that you'll get with each different kind of plan. 10:58 I think it's a little bit flashy, but sometimes you do need that. 11:02 [Seifer] It's an interesting experiment. >>Yeah, I know. 11:07 As an experiment, it is very cool. 11:09 [Seifer] It's really cool to see what you can do with CSS these days. >>Definitely. 11:11 [Seifer] Finally, over on Kaushik Gopal's online journal, 11:15 there is "Yet Another Newb Guide to Git." 11:21 Now, if you don't know Git, or you're looking to learn, 11:24 this is just a fantastic starting point, 11:27 with casual references all the way up to intermediate and advanced uses of Git. 11:30 [Pettit] Who's Git? I've heard of this person, 11:37 but I don't know who this person is. 11:40 [Seifer] Git is a source control management system 11:42 that's pretty popular, works with GitHub, 11:45 and there's actually a walkthrough of how to use GitHub on here, as well. 11:48 [Pettit] Very cool. >>So if you know somebody who is wanting to learn Git, 11:51 definitely check out this page, which, again, you'll find in our show notes. 11:55 [Pettit] Awesome stuff. Now Jason, what did we learn today? 11:59 [Seifer] We learned nothing, Nick. >>Absolutely nothing? 12:03 [Seifer] We learned that the Web is a barren wasteland 12:05 full of time-wasting opportunities and cat pictures. 12:07 [Pettit] You should go to a library. >>Exactly. 12:10 If you want more information on anything we talked about 12:13 this week, head on over to our show notes at youtube.com/gotreehouse. 12:15 [Pettit] And, of course, if you'd like to follow us on Twitter, 12:21 I am @NICKRP. >>And I am @JSEIFER. 12:23 [Pettit] And if you'd like to check out more videos like this one 12:26 and learn about web design, web development, business, iOS or Android, 12:29 be sure to check us out at teamtreehouse.com. 12:33 Thanks so much for watching, and we'll see you next week. 12:36 [The Treehouse Show] 12:41

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

Sign up