Episode 36: Sidebar Menus and Icon Stacks

[Nick Pettit - @nickrp] I'm Nick Pettit. >>[Jason Seifer - @jseifer] I'm Jason Seifer. 0:01 And you're watching The Treehouse Show, your weekly dose of Internets 0:02 where we talk about all things web design, web development and more. 0:06 In this episode we'll be talking about a flat UI theme, sidebar menus, icon stacks and more. 0:10 Let's check it out. 0:16 [Morse code beeping sound] 0:19 [The Treehouse Show] 0:22 So you may remember a few episodes ago where we talked about flat UI. 0:24 We had quite a lively discussion here on the show. >>We did. 0:28 It was wonderful. I wrote about it in my diary. 0:33 But anyway, first up we have a flat UI theme for jQuery Mobile. [ququplay/jquery-mobile-flat-ui-theme - GitHub - trhou.se/11Zf8in] 0:36 There's a really, really nice demo here. 0:42 Basically any of the UI elements that you would expect to be in there are right here on JQuery Mobile. 0:44 You've got the main header, navigation menu, all the buttons are formatted, 0:50 and different sections, collapsible content, and even icons are included. 0:55 Not too much to say about this but a great project. 1:00 And if you already have a jQuery Mobile style website and want to integrate flat UI, go ahead, check it out. 1:03 The link for that is going to be on GitHub, and you can find it in the show notes. 1:10 Very cool stuff. 1:14 Speaking of mobile, next up is a tool that allows you to put sidebars into your website. 1:16 [Sidr- A jQuery Plugin for Creating Side Menus - trhou.se/Yfhwxd] 1:21 Of course sidebars are becoming a very popular design pattern on mobile, 1:23 and now you can do it on your web page as well. 1:26 Let's take a look at Sidr, which is, according to the website, 1:31 the best jQuery plugin for creating side menus and the easiest way for doing your menu responsive. 1:34 [Seifer] When you say Sidr you mean this plugin and not the apple flavored drink, right? 1:41 That is correct. >>Okay. Just wanted to make sure. >>Yep. Thanks for clarifying, Jason. >>No problem. 1:46 Simple use case, you can go ahead and open up a menu on the side of your web page. 1:51 It'll go ahead and slide open just like that, 1:58 and you can click on different stuff there. 2:01 We'll go ahead and scroll down to other examples here. 2:04 You can of course have a left menu, which is demonstrated here, 2:07 or you can pop out a menu on the right side as well. 2:10 You can also load in content remotely, do callbacks, AJAX, etc, 2:16 all the things you would expect. 2:23 And you can also do responsive menus. 2:25 It's saying I actually need to resize the browser to show that. 2:29 But you get the idea. 2:32 Pretty cool, and this type of a sidebar would be very difficult to actually implement on your own 2:34 with all the nice sliding animation. 2:40 So I highly recommend that you go ahead and just use this plugin instead. 2:43 I definitely agree with you on that. 2:48 I guess you could say I'm on your side-er. 2:50 I see what you did there. 2:53 Next up we have a project called Lungo. [Lungo - HTML5 Cross-Device Framework - trhou.se/YfdTaB] 2:55 This is a cross-platform HTML5 prototyping framework. 2:57 This is going to help you make HTML5 applications that work across devices. 3:01 So it will work on a full size web browser, on different mobile browsers as well. 3:07 There is a little demo that you can see right here scrolling right inside of this illustration of a phone. 3:12 Have different UI elements that you would expect to find in any sort of framework here, 3:18 header, more sidebar menus are integrated. 3:22 There's a ton of stuff that you can do here. 3:26 This is going to be something that you are mainly using for prototyping applications. 3:28 I'm sure you could actually roll something out to production with it, 3:32 but you can save yourself a lot of work by just going through using this to prototype your mobile apps, 3:35 get an idea of how they look before you go through, start implementing absolutely everything yourself. 3:40 Anyway, check that out. It's called Lungo. 3:45 Bam. Sounds like a lot of time saved there. >>It does. 3:48 Next up is this really cool blog post called Icon Stacks. [Conor Muirhead//Designer - trhou.se/YfdTay] 3:51 If we take a look at the post, you can scroll down here 3:56 and you see all of these various icons for different weather conditions. 4:00 We have snow, rain, thunderstorms, partly cloudy, and this little moon here. 4:07 I guess that's for nighttime. 4:13 [Seifer] That takes up pretty much all the weather patterns we see here in Florida. 4:15 [Pettit] Pretty much. It's almost always cloudy. 4:19 But the cool thing about this is that you are actually seeing the same cloud here over and over again. 4:21 This isn't a separate set of icons. 4:31 This is just the same cloud that's being scaled and repeated across all of these different icons. 4:34 So what's going on here? 4:41 The icons are using SVG to illustrate first the actual weather condition, 4:43 and then they're laying the cloud on top of that. 4:54 This is nice because not only can you use scalable vector graphics 4:58 to be resolution independent and create an icon in all different sizes for the same file size, 5:04 but you can also actually reuse those icons and create new permutations 5:13 by just combining different pieces of iconography. 5:18 Very cool, pretty advanced technique, but definitely worth checking out. 5:21 It might save a little bit of bandwidth there. 5:27 Yeah. Cool also because you can style them independently with the gradients like he does in the post. >>Yes. 5:30 Another thing I really like about this project is it's called Icon Stacks, 5:35 which is just one letter away from being I contact. 5:39 Very close to it, Jason. 5:43 Next up we have a project called Select2. [Select 2 3.3.2 - trhou.se/11Z6kJx] 5:45 This is not brand new, but a new version of it was— 5:48 Because obviously you must have had Select1 prior to Select because 1 comes before 2. 5:51 I'm going to trust your math. I don't have time to verify it. 5:58 Anyway, version 3.3.2 has been released. 6:00 There is some new stuff in here. 6:03 Select2 is a jQuery replacement for select boxes. 6:04 Yes, I did read that right off the page there. 6:08 But it's actually really cool with what it can do. 6:10 You've got this regular select box right here. Pfft. Whatever. 6:13 How about this enhanced one with Select2? Wow, look at that. 6:18 [Pettit] Pssh. Amazing. >>[Seifer] Isn't it? 6:21 Not only is it a regular drop-down there, you can filter by just typing things in. 6:23 Look, I type the letter F, there, Florida. Boom. It's in there. 6:28 You don't have to use just the single select. There's a ton of different examples. 6:32 It uses jQuery and the usual jQuery syntax. 6:36 It's highly extensible, supports a lot of different options. 6:40 We'll have a link for that in the show notes as well. 6:43 So Nick, I've got a surprise for you. >>What's that? 6:46 Ryan Carson, CEO of Treehouse, was in Orlando the other week, 6:50 and I got a chance to interview him. >>Let's check it out. 6:54 [? music ?] [Strictly Business with Jason Seifer] [horn honks] [cash register dings] [ship horn blasts] [horse neighs] 6:59 [scooter motor humming] 7:11 I'm sorry I'm late. I was, uh— 7:21 I have my laptop here with the interview questions. >>[Ryan Carson] Okay. 7:25 So what kind of questions? Are you prepared? >>Yeah. Yeah. They're right here. 7:33 [computer crashing to pavement] 7:42 [Ryan Carson - CEO of Business] [Jason Seifer - Strictly Business] 7:46 Online education. 7:54 Yes? 7:56 [Seifer] Yeah. Okay. Let's talk business. >>Business. 7:58 Financial statements. 8:03 Leverage buyouts. 8:06 Contracts. 8:07 EBITDA. 8:10 Hostile takeovers. 8:12 Cash flow forecasts. 8:15 Net gains. 8:17 No. 8:20 Net gains and losses. 8:22 Corporate credit card. 8:30 Earnings before interest, taxation, dividends, and amortization. 8:34 You win. 8:40 Strictly Business. 8:43 All right. Well, thank you so much. 8:46 I think this has been one of the best interviews we've ever had here on Strictly Business, 8:48 and it's time for the award ceremony. 8:52 All right. Go ahead and present me the award. >>What? 9:00 All right. Smile for the camera. Handshake. >>What? 9:03 Did you prepare a speech? >>What? No. 9:07 [computer crashing to pavement] 9:20 Wow, Jason. Thanks for another hard-hitting interview. >>No problem. 9:29 Looks like you might have crashed your scooter there. 9:33 Not my scooter. And yes, I do my own stunts. 9:36 All right. 9:40 Next up is this really cool pen we found on CodePen, 9:41 which is a website where you can go ahead and share HTML, CSS, and JavaScript, 9:45 and it will actually give you a live preview in the browser. [Tear-able Cloth on CodePen - trhou.se/Yfhwxe] 9:48 Pretty cool stuff. 9:52 This particular pen shows a cloth simulation in JavaScript. 9:54 So if I go ahead and grab onto this cloth here, 9:58 it will actually move around. >>[Seifer] Wow. 10:02 [Pettit] And you can actually right-click and tear this cloth. >>[Seifer] Ooh. 10:04 [Pettit] It looks like I didn't quite right-click. There it goes. 10:08 And it will actually get torn away there. Pretty impressive stuff. 10:11 There's a very minimal amount of HTML and CSS. 10:17 Most of what's going on here is happening in JavaScript. 10:22 There's a number of variables here that are the settings for this cloth. 10:26 You can go ahead and adjust them. 10:30 For example, you can adjust the physics accuracy. 10:32 So if I were to increase this by, say, 2 orders of magnitude, 10:36 it would go ahead and reset the cloth here. 10:40 And now when I try to tear across it, it's actually going to run a lot slower 10:42 because it's doing much more accurate physics calculations. 10:47 But pretty amazing stuff. 10:52 And really all that we're trying to show here is that there's just an amazing amount of stuff that you can do 10:54 in JavaScript and in the browser, and the possibilities are pretty impressive. 11:00 I think it's really interesting how you can reduce the accuracy like you showed with the physics. 11:07 That would be really handy if you're running into a device with less processing power. 11:13 Maybe do some detection in JavaScript to see how many frames per second you're getting. 11:17 That's pretty smart. >>Also the demo is called Tear-able Cloth, which kind of sounds like Terrible Cloth. 11:21 Hmm. But it's actually pretty awesome, not terrible. But it is tear-able. 11:27 Next up we have a project called Pickadate.js. [trhou.se/11Z6kZK] 11:32 We've talked about Twitter Bootstrap here on the show before, wonderful CSS framework. 11:35 Pickadate.js is a mobile calendar date selector plugin for jQuery and Twitter Bootstrap. 11:39 It's extremely easy to use. Here is a text box right here. 11:47 Click inside there and, whoa, this calendar comes up and you can pick a date. And that's it. 11:51 There's a few different themes that you can use, a default theme which you just saw, 11:57 the classic theme—isn't that nice? 12:01 Yeah, just a bunch of different options. 12:05 You can have it display right in line on the page right there. 12:07 It works in IE7 and up. 12:09 And yeah, really nice, responsive, mobile-friendly. 12:11 Boom. >>That's pretty impressive. 12:15 Next up is Chardin.js. [trhou.se/YfdTaC] 12:18 This is basically a piece of JavaScript that allows you to overlay instructions onto an interface 12:21 or your website and basically show people how to use it. 12:27 Let's go ahead and see it in action here. 12:31 If I click this button, a painting pops up 12:34 and then it overlays this sort of dark tint onto the website 12:40 and then there's labels that point out what everything does. 12:46 This again would be really handy if you're trying to demonstrate 12:51 what all the functionality in an interface does inside of your application, 12:55 and I think this is actually a little bit better than giving a tour in an app 13:02 where you have to step through each thing in the tour and go page by page. 13:06 It's much better because you can just click a button if you need help 13:13 and it will just label everything in the interface. 13:17 I find that to be much better. 13:20 I hate having to go through tours when I start up a new web app 13:22 and have to just click through them before I can actually get to the app. 13:27 Yeah. It would be probably pretty good for blank slates as well. 13:31 Yeah. No. For sure. 13:33 I'm sure there's a setting in here where you can have this pop up automatically, 13:36 but I like it much better where you can just hit a button if you need the help, 13:39 if you don't know what a certain piece of the interface does. 13:43 Right. If you're an expert, you don't want that. >>No. >>No. Just let me use the application. 13:46 Pfft. >>Pfft. Expert. >>Done. >>Done. 13:50 But very cool stuff. That is it for this week's episode. 13:53 On Twitter I am @nickrp. >>And I am @jseifer. 13:56 For show notes and more, you can check out our YouTube channel at YouTube.com/gotreehouse. 14:00 And we are also in iTunes. Just search for The Treehouse Show. 14:04 And of course if you'd like to see more videos like this one about web design, 14:08 web development, mobile, business and so much more, be sure to check us out at teamtreehouse.com. 14:13 Thanks so much for watching, and we'll see you next week. 14:20 [Morse code beeping sound] [The Treehouse Show] 14:24 [beeping continues] 14:26

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

Sign up