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.
Here are the links for the week:
Simple Grid
http://thisisdallas.github.com/Simple-Grid/
BootMetro
http://aozora.github.com/bootmetro/
Typeset.css
http://joshuarudd.github.com/typeset.css/
Time Goes Responsive
http://www.time.com/time/
Powerful Command Line Tools For Developers
http://coding.smashingmagazine.com/2012/10/29/powerful-command-line-tools-developers/
CSS 3D Dropdown
http://soulwire.github.com/Makisu/
A Newb Guide to Git
http://journal.kaush.co/744/git-newb-guid
Video Transcription
Nick: I’m Nick Pettit.
Jason: And I’m Jason Seifer.
Nick: And you’re watching The Treehouse Show. Your weekly dose of
internets, where we talk about all things web design, web
development, and more.
Jason: In this episode, we’ll be going over brand new CSS techniques,
the usual roundup of responsive design techniques and command-
line tools for web developers.
Nick: Let’s check it out. First up is Simple Grid, which is a barebones
grid created for developers who need a barebones grid.
Jason: So this is going to be something that gives you a lot to work
with, something that’s really complicated, and gives you
everything you need to start doing a CSS framework.
Nick: It’s barebones.
Jason: Okay.
Nick: Yep. That’s it, Jason. The other cool thing about barebones grid is
that it’s also responsive, as you would expect with most CSS
grids these days. When I was talking to, Jason, before the show,
I said, what really is different about this grid? We couldn’t
quite figure it out. But the thing is, it is very simple, so
it’s probably a really good learning tool if you are trying to
figure out how to use something more complex, like Twitter
Bootstrap, for example, or if you’re just trying to build your
own grid from scratch.
Jason: It’s also really lightweight, which is, really nice maybe if
you’re just prototyping a site.
Nick: Yeah. I think it’s very important for CSS grids like this to be
lightweight. Especially when they’re responsive and trying to
deliver content to mobile devices.
Jason: When you say barebones, I think of the word bear, and then
space, bones, like the bones of a bear rather than a lightweight
grid.
Nick: Jason, you’re pretty.
Jason: Next up, is Boot Metro. This is a Metro-style web framework.
This is going to include CSS, HTML, and JavaScript, if you want
to start coding websites like Metro. This is going to be much
more important now that Windows 8 has officially been released.
Nick: So just for a second, Metro meaning the design language used by
Microsoft these days?
Jason: Yes, the design language used by Microsoft. It has nothing to
do with clothes or style, or anything like that.
Nick: Got it.
Jason: So there are a bunch of different demos on the site that you
can go over. One thing that you’ll see in a lot of Windows Metro
apps is something called this application bar. You can see it
over at the bottom of the screen, right here, there’s just a ton
of different tool bars, and things that you can add in to your
application. They include different styling for tables, as well
as drop-downs and kind of everything that you would be expecting
out of a framework these days.
So, pretty easy, you can find the link to this Boot Metro in the
show notes at youtube.com/gotreehouse.
Nick: Pretty nifty. Next up is Typeset.css, and this is just a style sheet
that it’s – well they describe it as a no-nonsense, CSS
typographic reset for user generated content, such as blog posts
or comments or forum posts, etc. You can go ahead and click
through on the left side here, and see the different kinds of
styling that Typeset.css provides. It is as described. It’s just
a really simple set of styling for user generated content. Just
so there’s not stuff that is breaking the page, or going really
far outside the bounds of a particular content area, etc., so
pretty nice.
Jason: So, this is something that you would use maybe instead of a
full framework, if you just want to reset the styles on your
blog comments and maybe forum threads, anywhere where people can
actually enter stuff. You just use that part rather than
something like Bootstrap or Boot Metro, which is a whole
complicated framework.
Nick: Exactly. It’s just really pretty simple and straightforward. So next
up, we’re going to check out web trends. So, like many websites,
the site for Time Magazine has gone responsive, and we’ve seen
this happen with Boston Globe, USA Today, which we covered on a
previous episode. Now, Time Magazine, has made their website
responsive as well.
Jason: It almost seems like making a website responsive is a web trend
in itself.
Nick: That could be the case, Jason. So, if we go ahead and look at Time
Magazine’s website, it looks like a pretty standard news
website. But if we go ahead and resize the browser here…
Jason: Whoa.
Nick: …and make it a little bit smaller, you can see how, as we resize
it, Time will go ahead and respond. Not the concept of time
itself, I’m talking about Time Magazine. That would be crazy.
Anyway, looking at the mobile version of Time here, I think that
there are a couple things that they actually didn’t get quite
right. I really would much rather see, actually just this view,
just the top news story with a picture and the top headline.
Or maybe something more like this, where I get the top four
headlines. If you look up at the top here, they have the logo,
which I think is a little bit too large and branded. Then they
have this search box here, which I don’t really think is
appropriate to show in this particular view. I think it might go
better down towards the bottom or something, just because when
people come to a news site, I don’t think they’re really looking
to search immediately.
I think they’re looking more so to browse. That’s more of kind
of a passive activity, where…
Jason: Kind of more like people are going to be consuming the content
rather than be actually trying to enter things into it as soon
as they hit a site.
Nick: Exactly. I think people are just hitting a news site to go ahead and
browse and just see what the latest stuff is. They don’t
necessarily want to go there to immediately search for an
article that they have in mind, or search for a topic that
they’re interested in. So that seems a little bit off. I also
think these drop-down menus are a little much. I think they
could have consolidated this in some other way, maybe put these
topics down towards the bottom or – I don’t know. The drop-down
menus just seem wrong for this small of a screen.
Jason: Now, if you could change one thing about this, what do you
think it would be?
Nick: I think I would just try to simplify it. I think what’s apparent here
is that they took a preexisting website, and then tried to make
it responsive. Which is a perfectly legitimate approach, as long
as you do it right and you make the mobile version really
simple. The reason you want to do mobile first when you’re doing
responsive web designs, and then working your way up to those
desktop layouts is so that you concentrate on the core
experience and make something really, really simple.
Then you add things on top of that as you go up to larger screen
sizes. So, I think they kind of got that a little bit wrong
here. It looks pretty cluttered for a mobile website. I mean
this big feedback button, is kind of ridiculous for a mobile
site. So, anyway, there’s a chance you could go wrong with a
responsive site.
Jason: Hmm. Interesting. So, if you want to check this out, maybe the
old version, would that be going back in time?
Nick: That’s very good, Jason.
Jason: Thanks.
Nick: I’m impressed. I’m proud of you.
Jason: No problem.
Nick: All right.
Jason: So that was web trends. Next up we have an article on Smashing
Magazine called, powerful command line tools for developers.
This is actually a great article if you’re maybe just getting in
to how to use the terminal or the command line. Check it out and
get reacquainted with some of the different tools available to
you. The first thing that they go over is a tool called, Curl.
Curl will fetch webpages, files, and kind of anything you need
from the command line.
There are a ton of different options and things that you can do
with Curl, and there’s a nice introduction here. There’s also
introduction to other tools such as Ngrep, Netcat, Sshuttle,
which is going to be for doing SSH tunneling to your different
servers, which actually also works with DNS. Finally, there’s
also something called Siege, which is an HTTP benchmarking tool.
You can do this to do testing of your web application from the
command line.
So it’ll go through and simulate a bunch of different rapid
connections to your web application. From there, using that
data, you can figure out what you need to optimize inside your
app. Anyway, it’s a great roundup and they actually tell you how
to use these tools on the site, so check that out.
Nick: That’s really handy. One thing I’ve said on the show before, and I
want to reemphasize is that I feel like a lot of designers are
sometimes afraid to use the terminal. They think it’s just
really scary and they’d rather stick to HTML-ing and CSS-ing and
Photoshop and stuff. But, it’s a really, really useful tool and
it can make you a lot more independent, and make you a really
powerful asset to a team of designers and developers.
Jason: So, I guess, if I were going to redo my Halloween custume and I
was going to a party full of web designers, I could be a
terminal.
Nick: That’s right.
Jason: That would scare everybody.
Nick: That is pretty scary to some people. Next up, and I’m going to say
this wrong, I think it’s Makisu. It’s Japanese.
Jason: I have nothing to offer.
Nick: Basically, this is a set of menus, or drop-down menus. I’ll go ahead
and toggle this, so you can see. . .
Jason: Wow, It rolls up.
Nick: . . . how these fold up, and how these fold back down. Each one of
these is just a different style, or different pacing of
animation. They’re titled after different types of sushi, which
I think is pretty cool. So go ahead and go over to the GitHub
page. It says it’s an experimental CSS 3D drop-down concept, and
you can actually use it as, you guessed it, a jQuery plug-in.
Now, when I first saw this I thought, “What the heck is the
application of this?” I think you’d want to go ahead and use
this on pages that might be a little flashier in your app. So,
say for example, you had a web application that was like a
subscription app, and you had a plans page and you wanted to
show all of the features of the app.
You might say, “Learn more,” and you can click and it will fold
down like a sushi menu and show you all of the features that
you’ll get with each different kind of plan. So, I think it’s a
little bit flashy. But sometimes you do kind of need that.
Jason: It’s an interesting experiment.
Nick: Yeah, I know. As an experiment, it is very cool.
Jason: It’s really cool to see what you can do CSS these days.
Nick: Definitely.
Jason: So, finally over on Kaushik Gopal’s online journal. There is
yet another newb guide to git. Now, if you don’t know, git, or
you’re looking to learn, this is just a fantastic starting point
with casual references all the way up to intermediate and
advanced uses of git.
Nick: Now, who’s, git? I’ve heard of this person but I don’t know who this
person is.
Jason: Git is a source control management system that’s pretty
popular. It works with GitHub. There’s actually a walk-through
of how to use GitHub on here as well.
Nick: Very cool.
Jason: So if you know somebody who is wanting to learn git, definitely
check out this page, which again you’ll find in our show notes.
Nick: Awesome stuff. Now, Jason, what did we learn today?
Jason: We learned nothing, Nick.
Nick: Absolutely nothing?
Jason: We learned that the web is a barren wasteland full of time-
wasting opportunities and cat pictures.
Nick: You should go to the library.
Jason: Exactly. If you want more information on anything we talked
about this week, head on over to our show notes at
youtube.com/gotreehouse.
Nick: Of course if you’d like to follow us on Twitter, I am @nickrp.
Jason: And I am @jseifer.
Nick: If you’d like to check out more videos like this one, and learn about
web design, web development, business, iOS, or Android, be sure
to check us out at, teamtreehouse.com. Thanks so much for
watching, and we’ll see you next week.
The post Simple CSS Grids – Treehouse Show Episode 16 appeared first on Treehouse Blog.