Episode 33: Web Typography, CSS Patterns and Simple Icons

>> I'm Nick Pettit >> I'm Jason Seifer >> 0:01 and you're watching The Treehouse Show, 0:03 your weekly dose of internets where we talk about all things web design, 0:04 web development and more. 0:08 In this episode, we'll be talking about web typography, 0:09 CSS3 patterns 0:12 and simple icons. 0:14 Let's check it out. 0:15 The Treehouse Show 0:18 First up is typeplate. 0:23 This is basically a typographic starter kit or a Sass mix-in 0:26 that you can go ahead and include in your website. 0:33 Now, I think it's worth noting, Nick, when you say, Sass mix-in, 0:36 you mean the CSS framework, Sass. 0:39 >> Correct >> Not a way of offering sassy comments 0:43 into a normal shell, right? 0:47 >> You're really mixing in the Sass right now, but >> Okay >> yes. 0:48 >> Just thought we would clarify that >> Thanks. 0:51 Yes, so it's a Sass mix-in that allows you to basically set different typographic 0:54 design patterns within your website. 1:01 So if you're a developer and you have trouble setting your typographic 1:04 scales--so for example, as you start to get down to smaller 1:08 and smaller font sizes, you have to change the line height, 1:13 this is definitely for you because it allows you to do that 1:15 in a quantitative way rather than just kind of 1:20 eyeballing it and guessing and wondering if something looks right 1:23 so this is a much faster way to go ahead and implement those nice 1:27 typographic styles without having to worry about it a whole lot. 1:32 As a developer, I like that because I can just assign line height and font size 1:37 to a variable and then modify that for the different sizes in the CSS. 1:44 As a designer, I like it because it means the developer can't go in 1:48 and mess up your nice design. 1:52 >> We're all about compromise here on The Treehouse Show >> Yes. 1:54 Next up we have a blog post on HTML's new template tag. 1:58 Now this is a pretty awesome thing and this is going to be 2:03 mostly used for client-side JavaScript libraries 2:07 so there's a bunch of different JavaScript templating libraries 2:10 that we have right now and they all work a certain way to 2:13 manipulate the DOM and let you have content in them. 2:16 The new HTML5 template tag is going to be an actual tag called template 2:19 and this isn't going to exist in the DOM at all 2:25 so it's going to kind of sit inside of your page and then you can 2:29 call it when you need to. 2:34 This is something that's going to be more useful for 2:35 template language authors to use to really speed up the site. 2:38 Now there are a lot of different properties that a template is going to have 2:44 so you call a template tag, you give it an Id, and then it sits there 2:49 until you're ready to use it. 2:53 Now what's really really nice about the template tag is 2:55 since it's sitting in the DOM and not being used and it's actually invisible, 3:00 you don't have any performance penalties while it's just sitting there. 3:04 Now this is something that's going to be very useful for the perception 3:09 of speed so there's not going to be any page reflows or 3:12 anything like that while you're using the template tag. 3:16 Anyway, there's a great tutorial on how to use this over at 3:18 html5rocks.com and you can find that link in the show notes 3:20 at youtube.com/gotreehouse. 3:24 Very cool stuff. 3:27 Nex up is a CSS3 patterns gallery. 3:29 Now of course you can go ahead and use images to generate 3:33 nice patterns and textures on your websites and your background images, 3:36 but this is actually a way to do it with CSS. 3:40 Now if you scroll through here, you'll see a bunch 3:44 of really cool looking patterns. 3:47 There's a rainbow pattern here, upholstery, zig-zags, arrows, etc., 3:50 so if I go ahead and click on one of these, it will give you the CSS 3:56 that will actually generate this pattern. 4:02 Now again, this isn't using any images. 4:05 This is all being built in pure CSS. 4:08 Now what that means is that you'll get really fast load times 4:10 because you're not loading in these images that need to repeat, 4:14 you're not worrying about how they have to repeat across a background 4:18 and if you are lining up the seams just right, and the other nice thing 4:23 is that it's CSS, so it's all basically vector based and that means that 4:27 you can scale up to these high DPI displays really nicely 4:34 without worrying about any kind of jagged pixels. 4:39 So, very cool stuff--definitely worth checking out. 4:42 >> Jagged pixels sounds like a great album name >> I agree. 4:46 for a web-- >> We're starting a band. >> Yeah, a web band. 4:50 I don't if we mentioned that. 4:53 >> Yeah. >> Jagged Pixels. >> First album. >> Coming this fall. >> Look for it. 4:54 Next up, we have an article on CyPoint called the Beginner's Guide 4:58 to JavaScript's Dates and Times. 5:02 This is a great walkthrough about learning how to use the date and times 5:04 in Javascript and it even goes so far as talking about some of the new 5:08 HTML5 date elements that you can attach to different inputs. 5:13 Now it goes through, shows you very simply how to create 5:18 a new JavaScript date and you can even do that with certain strings. 5:20 So there's different options that you can give it--getting the date, 5:25 getting the full year, getting the month, and you can even go so far as 5:29 programmatically setting the date via a blank date object. 5:33 So they walk through--they give a really nice walkthrough 5:37 of just kind of getting started and an introduction to it. 5:41 Once you get a little bit more advanced, I recommend 5:44 using a library such as moment.js. 5:46 That's a really great one that handles formatting and abstractions for you 5:49 as well as the inconsistencies in different browsers. 5:52 >> Very cool stuff. >> Yeah. 5:56 So, Nick, Paul Boag was in town and I had a chance to interview him. 5:57 Cool. >> Check it out. >> Check it out. >> 6:01 [?Music playing ?] 6:04 Strictly Business with Jason Seifer 6:32 I'm Jason Seifer [Jason Seifer]. 6:36 I'm here with The Treehouse Show, and we're doing 6:43 an interview today with the one and only Paul Boag. 6:45 [Paul Boag] Paul, thank you very much for being here today. 6:49 You're welcome. 6:51 Web design. 6:54 Yes. 7:02 Ahhh. 7:14 [Glasses clinking] 7:20 Mobile. 7:28 Oh, absolutely. 7:31 Web development. 7:35 Oh, no. 7:37 [Glasses clinking] 7:41 Ahh. 7:47 Wow, Jason--thanks for asking the really hard-hitting questions. 7:54 >> No problem. >> That was a really insightful interview. 7:57 Next up is Gumby, which is yet another CSS framework. 8:00 We talk about lots of CSS frameworks here on the show but 8:05 it's a very good one so we should take a look. 8:08 If we go ahead and scroll down here on the Gumby 2 website, 8:11 you will see that it's using Sass and Sass, of course, allows you 8:16 generate your CSS and gives you all sorts of nice functionality 8:22 on top of that. 8:27 It's a very flexible framework, meaning that it will across a wide 8:28 variety of screen resolutions. 8:33 They tout it as being very simple. 8:36 Of course, it should be--it's very robust. 8:38 You got the idea. 8:42 It's another CSS framework. 8:42 It's a really good one. 8:44 When choosing a CSS framework, you should definitely consult 8:46 your doctor first--no, just kidding. 8:50 You should definitely try out different types of CSS frameworks 8:52 to determine which one is the best for the project that you're working on 8:55 and also the one that matches your own personal preferences 8:59 because there are so many different nuances there and 9:03 while one, two or ten different CSS frameworks might be the right one 9:08 >> for a particular project, it might not be the right one for you >> Exactly. 9:14 or your particular style so-- 9:18 If it takes more then four hours to implement a CSS framework, 9:20 >> you might want to consider using a different one. >> Yeah. 9:24 But basically, there's not a best CSS framework so that's why 9:27 we cover a whole bunch of them here on the show. 9:32 >> And they're all useful. >> Very much so. 9:34 Next up we have a quick plug-in called SVGeezy. 9:37 This is a really great JavaScript plug-in that will look for SVG images 9:40 on your site and if your browser does not support SVGs, 9:46 it will roll back to a PNG version automatically. 9:51 This is going to be good for older browsers. 9:55 We're not going to name any names but older browsers 9:56 that don't have SVG support. 10:00 >> Netscape? >> Yeah. Mosaic--we're looking at you. 10:02 So, very quick, there's a download on GitHub link, 10:05 and you'll be able to find that in the show notes. 10:09 Pretty cool--next up is simple icons. 10:12 As the name implies, it's a simple set of icons. 10:15 These are all in PNG format in 11 sizes from 16 pixels all the way up to 10:19 4,096 pixels so if you have to go ahead and create a favicon for your 10:26 website and you want to try to use one of these, that might be 10:34 a good way to go or if you need to include one of these in an 10:39 IMAX feature film, they have the resolution that 10:44 allows you to do that as well. 10:46 So pretty cool stuff and in all seriousness, this is a way for you 10:48 to go ahead and include an icon at normal size and also 10:54 include the same file for retina resolutions. 10:58 They get extra points for having The Treehouse logo in there. 11:02 >> Boom. >> Boom. >> Boom. 11:05 So I think that's all we've got for this episode. 11:08 Nick, who are you on Twitter? 11:10 I'm @Nickrp. 11:11 And I'm @JSeifer. 11:12 For show notes and more about anything we talked about, 11:14 check out our YouTube channel at youtube.com/gotreehouse. 11:16 And of course, if you'd like to see more videos like this one where 11:20 we talk about web design, web development, starting a business 11:23 and more, be sure to check us out at teamtreehouse.com. 11:27 Thanks so much for watching, and we'll see you next week. 11:31 The Treehouse Show 11:34

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

Sign up