Episode 28: Collapsing Headers, Icon Fonts, and More

[Nick Pettit] I'm Nick Pettit. >>[Jason Seifer] I'm Jason Seifer. 0:01 [Nick Pettit] And you're watching the Treehouse Show. 0:03 Your weekly dose of Internets where we talk about all things Web design, Web development, and more. 0:05 [Jason Seifer] In this episode of the Treehouse Show, we'll be talking about 0:10 icon fonts, the Flight Javascript framework, and a new CSS grid. 0:12 [Nick Pettit] Let's check it out! 0:17 [The treehouse Show] ?[music]? 0:19 First up, is this really cool blog post from a Line 25 called, 0:25 "How to Create a Simple Collapsing Header Effect." 0:28 This is a relatively new trend that we've been seeing where the page header or 0:34 banner would gradually shorten and disappear when you scroll up the page. 0:38 The main idea is to use a fixed position header and banner, 0:43 and then use a relatively positioned content <div> below fixed position header and banner <div>s. 0:48 The header <div> is given a higher Z index to make this kind of design possible. 0:54 [Jason Seifer] You know--this is a really cool trend that 0:59 we're seeing--you know--here in 2013 or '13 as the kids say. 1:01 [Nick Pettit] That's right. That is the 2013 design trend--#2013 trend. 1:05 [Jason Seifer] Next up we have a project called Textillate.js. 1:11 Textillate is a jQuery plugin that let's you apply CSS 3 animation to any text. 1:14 it works via data attributes, so you can use any CSS 3 effect that you can think of to make it work. 1:21 An example that we see on the site is data in effect equals rolling. 1:27 Now if you're not satisfied by just using the data effects, 1:33 you can call them programatically as well via jQuery functions--you know--be it 1:36 in the header or footer--you know--whatever. 1:41 Wherever you place the Java Script, you can just throw one of these functions in, 1:44 and chain them together like you would expect from any jQuery plugin. 1:47 [Nick Pettit] Pretty cool. Next up is this really cool blog post from Fog Creek called, "Trello uses an icon font and so can you!" 1:51 [Narrator] And how. >>[Nick Pettit] Trello recently converted their icons from a CSS sprite image to an icon font. 2:00 They saved space because icon fonts are smaller, it's easier to style them via CSS, 2:08 and shadows and gradients can be easily applied. 2:14 The posts on the Trello blog is a walk through of how they did it. 2:17 Naming glyphs or letters, applying hints, converting to different formats in loading into browsers. 2:22 Not every browser supports all font types, so it's necessary to convert them. 2:29 It's very time consuming to do this, but the payoff is actually pretty huge. 2:34 [Jason Seifer] Yeah. You know--especially switching over from CSS spriting. 2:40 [Nick Pettit] I mean--I think the thing that I like the most about it 2:44 is that this is very similar to SVGs in that you can use those to support high resolution displays. 2:46 [Jason Seifer] Yeah. That's pretty awesome. >>[Nick Pettit] Pretty cool. 2:52 [Jason Seifer] Next up we have a--another font called Blokk. 2:54 Blokk is just block lettering. 2:58 So if you don't want to use the Lorem Ipsum placeholder text, 3:02 this is a font to display blocks instead of words. 3:06 Now this might look--you know--quite a bit better on your screen. 3:09 You know--maybe people don't want to see the text or are confused by the bits of Latin, 3:13 So go ahead and use the Blokk font. 3:18 [Nick Pettit] No, that's a really interesting point because on the one hand I feel like 3:20 you should actually use Lorem Ipsum text because it actually shows you 3:25 visually what text will look like on the page, 3:29 because text kind of adds a little bit of texture to Web pages. 3:33 But, at the same time you're right; the Lorem Ipsum text does 3:38 have a tendency to confuse clients. 3:41 They think--you know--, "Why is this Latin stuff all over my Web page?" So-- 3:43 [Jason Seifer] Yeah, "This isn't the copy I sent you." 3:48 [Nick Pettit] Yeah. Exactly. So the Blokk font definitely does a good job of replacing that. 3:50 Next up is back stretch. 3:56 Back stretch is a jQuery plugin-- 3:58 [Jason Seifer] I'm doing one of those right now. 4:01 [Nick Pettit] Doing a little back stretch? >>[Jason Seifer] Yeah. 4:01 [Nick Pettit] It's a jQuery plugin that allows you to add a dynamically resized. 4:03 slideshow capable background image to any page or element. 4:08 Images are fetched after other content has been loaded. 4:13 So, it goes ahead and helps with load time. 4:16 This can be useful when designing certain types of sites such as portfolio sites for example. 4:20 I think the really cool thing about this is that when you go ahead and resize the browser-- >>[Jason Seifer] Mm-hmm. 4:26 you can actually see the background image resized with the page. 4:32 So it does--you know--all that complicated math for you so--pretty neat. 4:37 [Jason Seifer] Yeah. I could definitely see a use for that. >>[Nick Pettit] Definitely. 4:42 [Jason Seifer] Next up we have a new JavaScript framework called Flight. 4:44 Flight is an event drive Web framework from Twitter. 4:48 Now, it's interesting because it's organized around the DOM model, 4:52 and takes a modular approach to organizing behavior so smaller components 4:56 can be strung together to form an application. 5:00 Components enforce a strict separation of concerns and they can't be referenced by other components. 5:03 And components can be attached to elements via the attach to method, 5:10 and functional mix ins are supported so that behavior 5:14 isn't clobbered if you decide to write over a different function. 5:17 Now this is going to be a really interesting entrant--I think--into the arena of JavaScript frameworks 5:21 because it is so modular and easily testable. 5:28 Plus--you know--it's got the backing of Twitter, so it'll be interesting to see where it goes. 5:30 And Twitter apparently uses this all around their own site. 5:34 [Nick Pettit] You know--I can really see this taking flight. 5:37 [Jason Seifer] Oh, that's why they named it that. >>[Nick Pettit] Yep. Exactly. >>[Jason Seifer] Hunh. 5:41 I thought it was something else. >>[Nick Pettit] Boom. 5:44 Next up is Unsemantic, which is a new CSS framework that is the successor to the 960 grid system. 5:46 It works in a similar way, but instead of being a set of columns, 5:55 it's entirely based on percentages. >>[Jason Seifer] Wow! That's really cool. 5:58 Something that is actually pretty cool about it--I think--is the author 6:01 of Unsemantic is the same author as 960 GS 6:05 So, he can legitimately call it the successor to 960 GS. 6:08 [Nick Pettit] And if you're building responsive Web sites, 6:12 this would be--you know--a really good framework to go ahead and try to use. 6:14 ['90's Web Guy] Whoa, whoa, whoa. Hey Nicky P! Did you just say responsive? 6:18 [Nick Pettit] I did. >>[Jason Seifer] Hey '90's Web design guy. 6:20 ['90s Web Guy] Jason--theme song. 6:23 ?[music]? 6:25 ['90's Web Guy] Yeah. >>[Jason Seifer] Nice. >>['90's Web Guy] Nice. So--heard you talking about responsive stuff. 6:27 Wanted to let you know that responsive Web sites is something 6:31 that we take into account in the Photoshop Deep Dive. 6:35 [Jason Seifer] Okay. >>[Nick Pettit] All right. >>['90's Web Guy] Photoshop Deep Dive. 6:39 Allison is our expert teacher. 6:41 She's been rocking it; we have the whole thing up there now including 6:43 guest appearance by yours truly in the old slices and safer Web stage. 6:47 Need a clip--we got a clip--got a clip here--slice like a ninja, I cut like a razor blade. 6:52 [Jason Seifer] I think we can actually play a clip; you don't have to reenact a clip. 6:58 ['90's Web Guy] Well I think Real Player was kind of buffering--you never trust that thing Jason. 7:01 All right so--slice like a ninja, cut like a razor blade, boom. Careful. Whew. Pssh. >>[Jason Seifer] All right. 7:04 Whew. Shh. Clip. 7:10 [Deep Dive--Photoshop Foundations: Slices and Save for the Web Introduction to Slicing with Allison Grayce] ?[music]? 7:13 [Allison Grayce] If you are creating anything in Photoshop to be used on the Web, 7:19 it's important to think about how they should be properly saved-- 7:22 like what file type they should be and what size they should be. 7:25 Knowing this type of information will make you much more invaluable as a designer. 7:28 ['90's Web Guy] Did somebody say slicing images? 7:32 [Allison Grayce] Oh. Hey '90's web guy. >>['90's Web Guy] What's up? 7:37 [Allison Grayce] What's going on? >>['90's Web Guy] Well--I thought I heard you talk about slicing up images. 7:39 And slicing happens to be--pssh--my specialty. 7:43 [Allison Grayce] Really? >>['90's Web Guy] So--you want some help or-- >>[Allison Grayce] That'd be great. 7:47 ['90's Web Guy] All right. Cool. Cool. 7:50 So--the only way to get a button--with rounded corners--is to design it in Photoshop first--right? 7:52 And then you slice like a ninja, cut like a razor blade. 7:58 And then you put them back together with a table--right? 8:01 So, you've got your left side, your right side, put them on either side of a table cell where the button label goes. 8:04 Now--it's super tricky because the rounded images match the background color of the middle cell. 8:10 That's where the label-- >>[Allison Grayce] No, no, no, no, no. >>['90's Web Guy] What am I doing? What? 8:16 [Allison Grayce] We don't really do it like that anymore. >>['90's Web Guy] Huh? >>[Allison Grayce] No. 8:19 With improvements in CSS, many graphics that we used to have to slice up--like a razor blade-- >>['90's Web Guy] Yeah. 8:22 [Allison Grayce] --can now entirely be created in code. 8:30 So--instead of all those extra images, we can just declare a border radius 8:33 of--let's say--5 pixels and be done with it 8:37 ['90's Web Guy] Entirely in code--that's crazy talk--right? >>[Allison Grayce] I know. 8:40 ['90's Web Guy] So there it is--right? Photoshop Deep Dive coming at ya; it's all out there. It's fantastic. 8:44 [Jason Seifer] Yeah. That's pretty cool. >>['90's Web Guy] Me--I'm thinking--in the future 8:49 I might do a Deep Dive; it could be Lotus Notes, or it could be this new thing--mobile technology. 8:52 Perhaps you've heard of it? >>[Jason Seifer] It may be the future. 8:58 ['90's Web Guy] We've got the old "PalmV' right here that I'm rocking. 9:00 [Nick Pettit] I think you mean the Palm 5? >>['90's Web Guy] Five? 9:03 Nick--one color on this. Not 5. Let's not go crazy--okay? 9:06 [Nick Pettit] All right. Leave it to the expert. >>['90's Web Guy] We have the stylus and everything. 9:10 All right. '90's guy out. '90s web guy on Twitter. Whoop, whoop. 9:13 [Jason Seifer] I guess he was going to answer a page on his beeper. 9:17 [Nick Pettit] Probably code 1543. 9:21 [Jason Seifer] What is beeper code 1543? 9:23 [Nick Pettit] Jason I think that's--that's just for you and me. They'll have to look it up. 9:25 [Jason Seifer] Hmm. All right. >>[Nick Pettit] All right. 9:28 [Jason Seifer] Well--that about wraps it up. Thanks so much for tuning into this episode of the Treehouse show. 9:29 For show notes and more, check out our YouTube channel at YouTube.com/gotreehouse. 9:34 [Nick Pettit] And of course on Twitter, I am @NickRP. >>[Jason Seifer] And I am @JSeifer. 9:40 ['90's Web Guy] And I am @90sWebGuy. 9:44 [Jason Seifer] How'd he get back there? >>[Nick Pettit] I don't know. 9:46 This episode was brought to you by Treehouse. 9:49 The best way to learn how to design and develop for the Web and mobile. 9:51 Be sure to check us out at TeamTreehouse.com. 9:56 Thank you so much for watching, and we'll see you next week. 9:59 [treehouse] ?[music]? 10:05 If you'd like to see more advanced videos and tutorials like this one, 10:10 go to TeamTreehouse.com and start learning for free. 10:14 ?[music]? 10:18

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

Sign up