LearnCollapsing Headers and Icon Fonts | Treehouse Show Ep 28


writes on February 19, 2013

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about undefined.

Here are the links for the week:

How To Create a Simple Collapsing Header Effect


Trello uses an icon font and so can you





Video Transcription

Nick: I’m Nick Pennet.

Jason: I’m Jason Sipher.

Nick: And you’re watching The Tree House Show. Your weekly dose of
internet, where we talk about all things web design, web
development, and more.

Jason: In this episode of The Tree House Show we will be talking about
icon fonts, the flight java script framework and a new CSS grid.

Nick: Let’s check it out. First up is this really cool blog post from align
25 called how to create a simple collapsing header effect. This
is a relatively new trend that we’ve been seeing where the page
header or banner would gradually shorten and disappear when you
scroll up the page. The main idea is to use a fixed position
header and banner, and then use a relatively positioned content
div below fixed position header and banner divs. The header div
is given a higher z index to make this kind of design of

Jason: You know this is a really cool trend that we are seeing, you
know, here in 2013 or ‘013 as the kids say.

Nick: That’s right that’s a 2013 design trend. #2013 trend.

Jason: Next up we have a project called textalate.js. Textalate is a J
cory plug in that lets you apply CSS3 animation to any text. It
works via data attributes, so you can use any CSS3 affect that
you can think of to make it work. An example that we see on the
site is data in effect equals rollin. Now if you’re not
satisfied by just using the data effects you can call them
programatically as well; via J Cory functions, you know be it in
the header, the footer, you know wherever you place the java
script you can just throw in one of this functions and chain
them together like you would expect from any J Cory plug in.

Nick: Pretty cool. Next up, is this really cool blog post from Fog Creek
called “Trello Uses an Icon Font and So Can You”.

Jason: And how?

Nick: Trailo recently converted their icons from a CSS Sprite image to an
icon font. They save space because icon fonts are smaller, it’s
easier to style them via CSS, and shadows and gradients can be
easily applied. The post on the Trello blog is a walk through of
how they div, naming glifs or letters, applying hints,
converting to different formats and loading into browsers. Not
every browser supports all font types so it’s necessary to
convert them. It’s very time consuming to do this, but the pay
off is actually pretty huge.

Jason: Yeah, especially switching over from CSS [Spriting].

Nick: I mean, I think the thing that I like the most about it is that this
is very similar in SVG’s, in that, you can use this to support
high resolution displays.

Jason: Yeah. That’s pretty awesome.

Nick: Pretty cool.

Jason: Neck up we have another font called block. Block is just block
lettering. So, if you don’t want to use the Lorem Ipsum and
place holder text, this is a font to display blocks instead of
words. Now this may look quite a bit better on your screen.
Maybe people don’t want to see the text or are confused by the
bits of Latin, so go ahead and use the block font.

Nick: That’s a really interesting point, because on the one hand I feel
like you should actually use Lorem Ipsum text because it
actually shows you visually what text will look like on the page
because text kind of ads a little bit of texture to web pages,
but at the same time, you’re right. The Lorem Ipsum text does
have a tendency to confuse clients. They think, why is this
Latin stuff all over my webpage.

Jason: Yeah, this isn’t the copy I sent you.

Nick: Yeah. Exactly. So the block font definitely does a good job of
replacing that. Next up is back stretch. Back stretch is a J
Query plug in.

Jason: I’m doing one of those right now.

Nick: Doing a little back stretch?

Jason: Yeah.

Nick: It’s a J Query plug in that allows you to ad a dynamically resized
slide-show capable background image to any page or element.
Images are fetched after other content has been loaded, so it
goes ahead and helps with load time. This can be useful when
designing certain types of sites such as portfolio sites for
example. I think the really cool thing about this is when you go
ahead and re-size the broswer, you can actually go ahead and see
the background image resize with the page so it does all of that
complicated math for you. Pretty neat.

Jason: Yeah. I can definitely see a use for that.

Nick: Definitely.

Jason: Next up we have a new java script framework called Flight.
Flight is an event driven web framework from Twitter. Now it’s
interesting because it’s organized around the dom model and
takes a modular approach to organizing behavior so smaller
components can be strung together to form an application.
Components enforce a strict separation of concerns and they
can’t be referenced by other components. Components can be a
test to elements via the attach to method and functional mixings
are supported so that behavior isn’t clobbered if you decide to
write over a different function. Now this is going to be a
really interesting entrant, I think, into the area of java
script frameworks because it is so modular and easily testable.
Plus it’s got the backing of Twitter so it will be interesting
to see where it goes. Twitter apparently uses this all around
their own site.

Nick: You know I can really see this taking flight.

Jason: Oh that’s why they named it that.

Nick: Yep, exactly.

Jason: I thought it was something else.

Nick: Boom. Next up is un-symantic, which is a new CSS framework that is
the successor to the 960 grid system. It works in a similar way
but instead of being a set of columns it’s entirely based on

Jason: That’s really cool. Something that is really cool about it, I
think, is the author of un-symantic is the same author of 960 GS
so he can legitimately call it the successor to 960 GS.

Nick: If you’re building responsive websites this would be, you know, a
really good framework to try to use.

Jason: Whoa, whoa, whoa, hey, Nicki P! Did you just say responsive?

Nick: I did.

Jason: Hey 90’s web design guy.

Nick: Jason!

Jason: Theme song. Yeah nice.

Nick: So I heard you talking about responsive stuff. I wanted to let you
know that responsive websites is something we take in count in
the photo shop deep dive. Alison is our expert teacher. She has
been rocking it. We have the whole thing up there now, including
guest appearance by yours truly in the old slices and safer web
stage. Need a clip, we got a clip. Slice like a ninja, cut like
a razor blade.

Jason: I think we can actually play the clip. You don’t have to, you
don’t have to reenact the clip.

Nick: I think Real Player was kind of buffering, you never trust that thing
Jason. “Slice like a ninja, cut like a razor blade.” Careful.

Jason: All right, clip.

Alison: If you’re creating anything in Photoshop to be used on the web
it’s important to think about how they should be properly saved.
Like what file type they should be and what size they should be.
Knowing this type of information will make you much more
invaluable as a designer.

90s Web Guy: Did someone say slicing images?

Alison: Oh, hey 90’s web guy.

90’s web guy: What’s up?

Alison: What’s going on?

90’s web guy: Well I thought I heard you talking about slicing up images
and slicing happens to be my specialty, so you want some help?

Alison: Really, that’d be great.

90’s web guy: All right, cool, cool. So the only way to get a button
with rounded corners is to design it in Photoshop first and then
you slice like a ninja, cut like a razor blade and then you put
them back together with a table. Right? So you’ve got your left
side, your right side, put them on either side of a table cell
where the button label goes. It’s super tricky because the
rounded images match the background color of the middle cell.
That’s where they labeled it.

Alison: No. We don’t really do it like that anymore. With improvements
with CSS many graphics that we used to have to slice up like a
razor blade…

90’s web guy: Yeah.

Alison: Now can be totally created in code. So instead of all those
extra images we can just declare a border radius of let’s say,
five pixels, and be done with it.

90’s web guy: Entirely in code? That’s crazy talk.

Alison: I know.

Jason: So there it is, right? Photoshop deep dive, coming at you. It’s
all out there, it’s fantastic.

Nick: Yeah, it’s pretty cool.

90’s Web Guy: Me, I’m thinking, in the future I might do a deep dive. It
could be Lotus notes or this new thing, mobile technology.
Perhaps you’ve heard of it?

Nick: May be the future.

90’s Web Guy: I’ve got the old Palmv right here that I’m rocking.

Nick: I think you mean the Palm V?

90’s Web Guy: Five, Nick, one color on this, not five. Let’s not go
crazy, OK. Stylus and everything. All right 90’s guy out. 90’s
web guy on Twitter.

Jason: Uh, I guess he was going to answer a page on his beeper.

Nick: Probably code 1543.

Jason: What is beeper code 1543?

Nick: Jason I think that’s just for you and me. You’re have to look it up.

Jason: Hmm. All right.

Nick: All right.

Jason: Well that about wraps it up. Thanks so much for tuning into
this episode of “The Tree House Show” for show notes and more
check out You Tube channel at youtube.com/gotreehouse.

Nick: And of course on Twitter I am @Nickrp

90’s Web Guy: And I am @90’s web guy.

Jason: How’d he get back there?

Nick Penent: I don’t know. This episode was brought to you by treehouse
the best way to learn how to design and develop for the web and
mobile. Be sure to check us out at teamtreehouse.com. Thank you
so much for watching and we will see you next week. If you’d
like to see more advanced videos and tutorials like this one, go
to teamtreehouse.com and start learning for free.


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop