Episode 16: Simple CSS Grids


In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about simple grids, command line tools for developers, and the usual dose of response web design.

Video Transcript

  • 0:00

    [The Treehouse Show]

  • 0:02

    Hi, I'm Nick Pettit. >>And I'm Jason Seifer. >>And you're watching The Treehouse Show,

  • 0:05

    your weekly dose of Internet, where we talk about all things web design,

  • 0:08

    web development, and more.

  • 0:10

    [Seifer] In this episode, we'll be going over brand new CSS techniques,

  • 0:13

    the usual roundup of responsive design techniques,

  • 0:17

    and command line tools for web developers.

  • 0:19

    [Pettit] Let's check it out.

  • 0:25

    [The Treehouse Show]

  • 0:27

    [Pettit] First up is Simple Grid,

  • 0:29

    which is a barebones grid created for developers

  • 0:33

    who need a barebones grid.

  • 0:35

    [Seifer] So this is going to be something that gives you a lot to work with,

  • 0:38

    something that's complicated and gives you everything

  • 0:40

    you need to start doing a CSS framework?

  • 0:43

    [Pettit] It's barebones. >>Okay. >>Yeah. That's it, Jason.

  • 0:48

    The other cool thing about barebones grid is that it's also responsive,

  • 0:53

    as you would expect with most CSS grids these days.

  • 0:58

    When I was talking to Jason before the show, I said,

  • 1:01

    "What really is different about this grid?"

  • 1:03

    and we couldn't quite figure it out, but the thing is,

  • 1:07

    it is very simple, so it's probably a really good learning tool

  • 1:11

    if you are trying to figure out how to use something more complex

  • 1:15

    like Twitter Bootstrap, for example,

  • 1:17

    or if you're just trying to build your own grid from scratch.

  • 1:22

    [Seifer] It's also really lightweight, which is really nice

  • 1:24

    maybe if you are just prototyping a site.

  • 1:27

    [Pettit] Yeah. And I think it's very important for CSS grids like this

  • 1:30

    to be lightweight, especially when they're responsive

  • 1:33

    and trying to deliver content to mobile devices.

  • 1:38

    [Seifer] When you say "barebones" I think of the word "bear" and then space, "bones."

  • 1:43

    Like the bones of a bear rather than a lightweight grid.

  • 1:46

    [Pettit] Jason, you're pretty.

  • 1:49

    [Seifer] Next up is BootMetro.

  • 1:51

    This is a metro-style web framework.

  • 1:53

    This is going to include CSS, HTML, and JavaScript

  • 1:57

    if you want to start coding websites like Metro.

  • 2:00

    This is going to be much more important now that

  • 2:02

    Windows 8 has officially been released.

  • 2:05

    [Pettit] So, just for a second, "Metro" meaning

  • 2:07

    the design language used by Microsoft. >>Yes.

  • 2:11

    The design language used by Microsoft, not--

  • 2:13

    it has nothing to do with clothes or style or anything like that. >>Got it.

  • 2:17

    [Seifer] So there's a bunch of different demos on the site that you can go over.

  • 2:20

    One thing that you'll see in a lot of Windows Metro apps

  • 2:23

    is something called this application bar,

  • 2:26

    and you can see it over on the bottom of the screen right here.

  • 2:28

    There are just tons of different tool bars

  • 2:31

    and things that you can add into your application.

  • 2:34

    They include different styling for tables

  • 2:37

    as well as dropdowns and kind of everything

  • 2:39

    that you would be expecting out of a framework these days.

  • 2:44

    So pretty easy. You can find the link to this BootMetro

  • 2:48

    in the show notes at youtube.com/gotreehouse.

  • 2:52

    [Pettit] Pretty nifty. Next up is typeset.css,

  • 2:56

    and this is just a style sheet that--

  • 3:00

    well, they describe it as a no-nonsense CSS typographic reset

  • 3:06

    for user-generated content such as blog posts

  • 3:09

    or comments or form posts, etcetera.

  • 3:12

    And you can go ahead and click through on the left side here

  • 3:16

    and see the different kinds of styling that typeset.css provides.

  • 3:23

    It is as described. It's just a really simple

  • 3:27

    set of styling for user-generated content.

  • 3:30

    Just so there's not stuff that's breaking the page

  • 3:34

    or going really far outside the bounds of a particular content area, etcetera.

  • 3:40

    So pretty nice. >>So this is something that you would use,

  • 3:43

    maybe, instead of a full framework if you just want

  • 3:46

    to reset the styles on your blog comments and maybe forum threads.

  • 3:51

    Anywhere where people can actually enter stuff.

  • 3:53

    You just use that part rather than something like Bootstrap or BootMetro,

  • 3:57

    which is a whole complicated framework.

  • 3:59

    [Pettit] Exactly. Just pretty simple and straightforward.

  • 4:02

    So next up, we're going to check out web trends.

  • 4:09

    [Web Trends]

  • 4:12

    Like many websites, the site for Time Magazine has gone responsive,

  • 4:17

    and we've seen this happen with Boston Globe, USA Today,

  • 4:21

    which we covered on a previous episode, and now Time Magazine

  • 4:24

    has made their website responsive as well.

  • 4:27

    [Seifer] It almost seems like making a website responsive

  • 4:30

    is a web trend in itself.

  • 4:32

    [Pettit] That could be the case, Jason.

  • 4:34

    So if we look at Time Magazine's website,

  • 4:37

    it looks like a pretty standard news website,

  • 4:40

    but if we go ahead and resize the browser here,

  • 4:44

    [Seifer] Whoa! >>And make it a little bit smaller,

  • 4:47

    you can see how, as we resize it, Time will respond--

  • 4:54

    not the concept of time itself, but Time Magazine.

  • 4:58

    That would be crazy.

  • 5:00

    Anyway, looking at the mobile version of Time here,

  • 5:05

    I think that there are a couple things that they didn't get quite right.

  • 5:10

    I really would much rather see just this view,

  • 5:15

    just the top news story with a picture and the top headline,

  • 5:21

    or maybe something more like this, where I get the top four headlines.

  • 5:25

    If you look up at the top here, they have the logo,

  • 5:28

    which I think is a little bit too large and branded.

  • 5:31

    Then they have this search box here,

  • 5:34

    which I don't really think is appropriate to show in this particular view.

  • 5:38

    I think it might go better down towards the bottom or something,

  • 5:43

    just because, when people come to a news site,

  • 5:45

    I don't think they're really looking to search immediately.

  • 5:49

    I think they're looking moreso to browse.

  • 5:51

    It's more of a passive activity where-- >>More like people

  • 5:55

    are going to be consuming the content rather than

  • 5:58

    be trying to enter things into it as soon as they hit a site.

  • 6:02

    [Pettit] Exactly. I think people are just hitting a site

  • 6:04

    to go ahead--or hitting a news site to go ahead and browse

  • 6:07

    and just see what the latest stuff is.

  • 6:10

    They don't necessarily want to go there to immediately search for an article

  • 6:13

    that they have in mind, or search for a topic that they're interested in.

  • 6:16

    So that seems a little bit off.

  • 6:18

    I also think these dropdown menus are a little much.

  • 6:22

    I think they could have consolidated this in some other way,

  • 6:26

    maybe put these topics down towards the bottom.

  • 6:30

    I don't know. The dropdown menus just seem wrong for this small of a screen.

  • 6:36

    [Seifer] Now, if you could change one thing about this,

  • 6:38

    what do you think it would be? >>I think I would just try to simplify it.

  • 6:42

    I think what's apparent here is that they took a pre-existing website

  • 6:46

    and then tried to make it responsive.

  • 6:50

    Which is a perfectly legitimate approach,

  • 6:53

    as long as you do it right and you make the mobile version really simple.

  • 6:57

    The reason you want to do mobile first

  • 6:59

    when you're doing responsive web designs and then working your way up

  • 7:02

    to those desktop layouts is so that you concentrate

  • 7:05

    on the core experience and make something really, really simple,

  • 7:09

    and then you add things on top of that as you go up to larger screen sizes.

  • 7:14

    So I think they got that a little bit wrong here.

  • 7:17

    It looks pretty cluttered for a mobile website.

  • 7:20

    I mean, this big feedback button is kind of ridiculous for a mobile site.

  • 7:26

    Anyway, there's a chance you could go wrong with a responsive site.

  • 7:32

    [Seifer] Interesting. So if you want to check this out,

  • 7:35

    maybe the old version, would that be going back in time?

  • 7:39

    [Pettit] That's very good, Jason. >>Thanks. >>I'm impressed.

  • 7:42

    I'm proud of you. >>No problem. So that was web trends.

  • 7:47

    Next up, we have an article on Smashing Magazine called,

  • 7:49

    "Powerful Command Line Tools for Developers."

  • 7:53

    This is actually a great article if you're maybe just getting into

  • 7:56

    how to use the terminal or the command line.

  • 7:59

    Check it out and get reaquainted with some

  • 8:01

    of the different tools available to you.

  • 8:04

    The first thing that they go over is a tool called Curl.

  • 8:06

    Curl will fetch web pages, files, and anything you need from the command line.

  • 8:11

    There are a ton of different options and things that you can do with Curl,

  • 8:14

    and there's a nice introduction on here.

  • 8:17

    There's also introduction to other tools such as

  • 8:19

    Ngrep, Netcat, Sshuttle, which is going to be for doing SSH tunneling

  • 8:27

    to your different servers, which also works with DNS.

  • 8:33

    Finally, there's also something called Siege,

  • 8:35

    which is an HTTP benchmarking tool.

  • 8:38

    You can do this to do testing of your web application

  • 8:42

    from the command line, so it'll go through and simulate

  • 8:45

    a bunch of different rapid connections to your web application.

  • 8:48

    From there, using that data, you can figure out what you need to optimize inside your app.

  • 8:54

    Anyway, it's a great roundup, and they actually tell you

  • 8:57

    how to use these tools on the site, so check that out.

  • 9:00

    [Pettit] That's really handy. You know, one thing I've said on the show before,

  • 9:03

    and I want to re-emphasize, is that I feel like a lot of designers

  • 9:06

    are sometimes afraid to use the terminal, they think it's just

  • 9:11

    really scary, and they'd rather stick to their HTMLing and CSSing

  • 9:15

    and Photoshop and stuff, but it's a really, really useful tool,

  • 9:18

    and it can make you a lot more independent

  • 9:21

    and make you a really powerful asset to a team of designers and developers.

  • 9:27

    [Seifer] So I guess if I were going to redo my Halloween costume,

  • 9:30

    and I was going to a party full of web designers,

  • 9:32

    I could be a terminal. >>That's right. >>And that would scare everybody.

  • 9:36

    [Pettit] That is pretty scary to some people.

  • 9:39

    Next up, and I'm going to say this wrong.

  • 9:41

    I think it's Macky-Sue? Makisu?

  • 9:45

    It's Japanese. >>I have nothing to offer.

  • 9:48

    [Pettit] Basically, this is a set of menus,

  • 9:51

    or dropdown menus, and I'll go ahead and toggle this

  • 9:55

    so you can see-- >>Wow, it rolls up! >>how these fold up

  • 10:00

    and how these fold back down, and each one of these

  • 10:03

    is just a different style or different pacing of animation.

  • 10:08

    They're titled after different types of sushi,

  • 10:10

    which I think is pretty cool.

  • 10:14

    If we go ahead and go over to the GitHub page,

  • 10:18

    it says it's an experimental CSS 3D dropdown concept,

  • 10:24

    and you can actually use it as, you guessed it, a jQuery plugin.

  • 10:28

    Now, when I first saw this, I thought, what the heck is the application of this?

  • 10:33

    And I think you'd want to use this on pages

  • 10:37

    that might be a little bit more flashy in your app.

  • 10:39

    So say, for example, you had a web application

  • 10:43

    that was like a subscription app, and you had a plans page,

  • 10:48

    and you wanted to show all of the features of the app.

  • 10:51

    You might say, learn more, and you can go ahead and click,

  • 10:53

    and it'll fold down like a sushi menu and show you

  • 10:58

    all of the features that you'll get with each different kind of plan.

  • 11:02

    I think it's a little bit flashy, but sometimes you do need that.

  • 11:07

    [Seifer] It's an interesting experiment. >>Yeah, I know.

  • 11:09

    As an experiment, it is very cool.

  • 11:11

    [Seifer] It's really cool to see what you can do with CSS these days. >>Definitely.

  • 11:15

    [Seifer] Finally, over on Kaushik Gopal's online journal,

  • 11:21

    there is "Yet Another Newb Guide to Git."

  • 11:24

    Now, if you don't know Git, or you're looking to learn,

  • 11:27

    this is just a fantastic starting point,

  • 11:30

    with casual references all the way up to intermediate and advanced uses of Git.

  • 11:37

    [Pettit] Who's Git? I've heard of this person,

  • 11:40

    but I don't know who this person is.

  • 11:42

    [Seifer] Git is a source control management system

  • 11:45

    that's pretty popular, works with GitHub,

  • 11:48

    and there's actually a walkthrough of how to use GitHub on here, as well.

  • 11:51

    [Pettit] Very cool. >>So if you know somebody who is wanting to learn Git,

  • 11:55

    definitely check out this page, which, again, you'll find in our show notes.

  • 11:59

    [Pettit] Awesome stuff. Now Jason, what did we learn today?

  • 12:03

    [Seifer] We learned nothing, Nick. >>Absolutely nothing?

  • 12:05

    [Seifer] We learned that the Web is a barren wasteland

  • 12:07

    full of time-wasting opportunities and cat pictures.

  • 12:10

    [Pettit] You should go to a library. >>Exactly.

  • 12:13

    If you want more information on anything we talked about

  • 12:15

    this week, head on over to our show notes at youtube.com/gotreehouse.

  • 12:21

    [Pettit] And, of course, if you'd like to follow us on Twitter,

  • 12:23

    I am @NICKRP. >>And I am @JSEIFER.

  • 12:26

    [Pettit] And if you'd like to check out more videos like this one

  • 12:29

    and learn about web design, web development, business, iOS or Android,

  • 12:33

    be sure to check us out at teamtreehouse.com.

  • 12:36

    Thanks so much for watching, and we'll see you next week.

  • 12:41

    [The Treehouse Show]

Show full transcript


You have to sign up for Treehouse in order to create workspaces.

Sign up


You have to sign up for Treehouse in order to download course videos.

Sign up


  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.

  • Jason Seifer

    When not fighting web crime, Jason Seifer is a teacher at Treehouse. He's passionate about the web and programming. You can find Jason on Twitter at @jseifer and on his personal blog at jasonseifer.com.