Episode 140: Photo Gallery Plugins, Admin UI, Font Sizing

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show. 0:02 Your weekly dose of Internets. 0:03 Where we talk about all things web design, web development and more. 0:04 >> In this episode we'll be talking about photo gallery plug-ins, 0:08 admin UI, font sizing and more. 0:10 >> Let's check it out. 0:13 [MUSIC] 0:14 First up, we have a plugin called Photo Swipe. 0:20 Now, this will give you a JavaScript gallery with absolutely no dependencies, 0:23 and what's great about this is that there are a ton of different controls and 0:28 it is not a jQuery plug-in, so you don't require any different dependencies. 0:32 Click on an image. 0:38 Hey, look at that. 0:38 We have a picture with a caption and a, an author attribution. 0:39 >> Oh, it says this is a dummy caption. 0:45 >> Yeah. >> It's like. 0:47 >> It's a, a placeholder. 0:48 It doesn't mean that the caption is, is, is a dummy. 0:49 Now you'll also notice that the the tools, 0:53 the navigation tools disappear after just a moment. 0:55 And if you look in the top left corner of the screen, 0:59 it shows which picture in the gallery we are on. 1:01 This is two out of five. 1:04 That's a, that's a nice-looking forest, what a great view. 1:06 So, anyway, we can go through all these different captions and 1:09 it does loop around. 1:11 We also can zoom if we want to. 1:12 Whoa, look at that. 1:15 And then it pans as well. 1:16 You'll notice that the cursor changes. 1:17 And this can also go full screen if we really want to. 1:20 Hey, whoa, look at that. 1:24 Then we click this little x and we are back on the page. 1:25 Now this is really cool. 1:29 This also supports touch gestures, so if I were using a touch-enabled 1:30 device like a mobile telephone, I could perform all of these different gestures, 1:35 like spreading to zoom the image, 1:39 vertical swiping to close the gallery like the Facebook application, and 1:41 a ton of different ones, pinching to close and horizontal swipe to switch. 1:45 Now this supports the browser history API, so you can see the title 1:50 bar will change based on where you are in the gallery and you get a unique URL for 1:55 each gallery item which means you could link to a specific photo in the gallery. 2:00 Now as you expect from anything we include on this show, 2:06 it is responsive and it has great documentation. 2:09 So I recommend checking it out. 2:13 We'll have a link in the show notes, right below this video, so 2:14 a great solution if you need a photo gallery plugin. 2:18 >> Very cool. 2:21 Well, next up is flakes. 2:21 >> I love that cereal. 2:23 >> Flakes is an open source design and front-end framework 2:24 that serves as a foundation for internal business applications. 2:28 Now this is >> Business 2:33 >> Really handy if that's what you're 2:35 doing building internal applications for maybe a company you work for 2:37 or you're doing client work for another company and 2:42 you're building an application that is just to be used by that company. 2:44 So, let's take a look at a live demo here so 2:50 you can get a sense of what this looks like. 2:52 It has a pretty nice aesthetic and I think that's pretty much the major 2:55 selling point here is that this gives you a good starting point for 3:00 a professional looking, I don't know, look. 3:04 >> So we can go and look at some browsing data here. 3:08 See what that looks like. 3:12 We can show what it looks like when you display some information. 3:13 It's a nice field set, labels there. 3:17 There's adding and editing data. 3:20 Wow, I feel like I'm doing my taxes. 3:22 Great. So, 3:24 let's look at the component documentation here. 3:25 >> Do taxes have a product description? 3:28 >> [LAUGH] If we look at the simple grid here you can see that we have 3:30 a grid system just like you would expect with any frontend framework. 3:36 We also have some nice typography. 3:42 There's also a few other things like these grid forms and 3:45 like I said earlier they're styled to look buisnessy, so 3:50 if that is the look that you're going for this is pretty, pretty nice. 3:54 They also have some buttons here and some tables here. 3:59 Any who definitely be sure to check this out, especially if this is 4:03 type of look you want, or you're building internal applications. 4:06 Really cool framework. 4:10 Really cool, kind of, focused idea for a framework. 4:11 I like it. 4:14 >> Next up we have a blog post from Christian Heilmann on 4:15 keeping it simple and coding a carousel. 4:18 Now, we've talked about different carousel plug ins on the show here before. 4:22 And let's go ahead and look at the resulting carousel that we're gonna build 4:26 and see this is, this little slide right here. 4:31 And then we have next and previous buttons with some nice transitions. 4:33 Now we also have some different options. 4:39 Okay, we have a carousel with different images and different fades. 4:41 Here's the simplest possible carousel with no transitions. 4:44 So, anyway, as this article goes through, 4:48 he shows you how to build this up from scratch. 4:52 Now, one of the defining characteristics that he wants to tell you about is 4:54 keeping this simple. 4:59 He says, one of the things that drives me crazy in our modern development world is 5:01 over complicating things. 5:05 And in the sake of some, making something easier to maintain we add layers, and 5:06 layers of complexity. 5:11 So in that vein, he goes through and 5:13 shows us how we're gonna build this simple carousel. 5:15 We start out with just a div and an ordered list, 5:18 which is going to have list items and the content. 5:21 From there we have some basic CSS that he goes through, shows you okay this 5:24 is gonna be the content and the list items, and just some simple styling. 5:29 The carousel box is gonna be Helvetica and 14 pixels. 5:33 Okay, that comes up with this specific HTML. 5:37 And let's go ahead and sprinkle in some CSS. 5:40 We know that we're gonna have a current item inside of our carousel. 5:43 And an active item as well. 5:47 So here, we go ahead and make the different item active and 5:49 then add the class to it. 5:53 What's it look like? 5:54 Okay great, we have this current class. 5:55 Boom, good to go. 5:57 At that point, we need to have JavaScript. 5:59 So we're interacting with these different items. 6:01 Let's go ahead and add a div which is gonna be the buttons that we saw earlier. 6:04 And hey a button element is actually perfect for that. 6:07 And then, go through. 6:11 And how does that work? 6:13 Okay. 6:15 Add in the buttons, and we go through, get pretty fancy. 6:15 We have a working carousel here, and then it goes through and 6:20 shows you how to add transitions. 6:22 Now I'm not gonna walk you through the rest of this article, but sufficed to say, 6:24 if you wanna learn how to build a very simple carousel, just the bare minimum and 6:27 then hand said go ahead and check out this article, great commentary and 6:31 info inside of it >> Very nice stuff. 6:34 Well next up is a wonderful article on CSS font sizing and 6:37 this is pretty basic but it's a very nice summary and 6:42 really good overview of all the different options you have when sizing fonts. 6:46 So on the left side of this table, here we have the units, and 6:52 then the type, and then a description of what each one of these does. 6:56 Now there's two types of font size units. 7:02 There's absolute and relative. 7:05 And of course absolute font will be a very specific size 7:09 whereas relative fonts or relative units I should say 7:14 are going to base their sizes on other things around it. 7:19 So other things in that particular context. 7:24 And it could have a cascading effect, as is the case with CSS, 7:28 cascading stylesheets. 7:32 So, let's scroll down here. 7:34 There's a lot of great other information in this article, but 7:36 I like the technique that this person uses here by setting the font 7:42 size on their HTML a nd then using the rem unit, 7:46 they can set a relative font size to the base font size on their HTML. 7:52 And if we scroll back up to that table, then it is exactly what it says on rems. 7:59 So it is actually a root em, so an em 8:05 is relative to the parent element's font size whereas a rem 8:10 is relative to the root em or the html element font size. 8:15 So by setting a font size on the html element and then using rems for 8:22 everything else, you can basically create this cascading effect where you 8:26 only have to set the font size once and 8:31 if you want to maybe adjust the font size for everything on the page, 8:34 you can just go back to that HTML element and adjust the font size there or 8:37 adjust on individual elements that are set relative to that. 8:43 So pretty cool system and really great breakdown of different font size units. 8:47 >> Oh I get it, break down, good fun like break points. 8:53 >> That's right. 8:55 >> Cool, nice job. 8:56 Next up we have a project called medium.js. 8:59 This is going to let you take control of content editable. 9:02 Now in html5, declaring an element as content 9:06 editable allows you to edit that right on the page. 9:09 And, Medium.js is going to help you take control of that just like the name says. 9:13 So how do you use it? 9:19 Well okay, you include some JavaScript in your page and then, 9:20 I have this little script right here, and 9:25 initialize medium, medium, give it an element, and you are good to go. 9:27 So what does this look like, here's an in line element you can edit. 9:32 Hi, I'm Nick Pettit, and that is content edible. 9:35 This is now a div on the page, if I inspect the element. 9:40 You can see it says, Hi I'm Nick Pettit right there. 9:46 And boom this is still a div with that content editable set to true. 9:50 Now what's really nice about this particular plugin is that 9:56 you can put HTML templates inside of it. 10:00 So if we have content editable right here, say hello, hello again. 10:03 You'll notice that these are list items 10:10 that are being created as we go through and edit the page. 10:13 We can see even if we look at the HTML, we have new list items. 10:17 Now why would you use something like this? 10:22 Well in case you need to have users on your page interacting with it. 10:24 Say you're designing a CMS and allowing them to edit different sections of 10:29 it while still maintaining style and having semantic html. 10:34 This would be a great plug in to use. 10:37 It doesn't currently have a toolbar like medium.com the website, but 10:40 it would be really easy to create your own. 10:44 And from what I understand, that is in development. 10:45 Go ahead. Go ahead. 10:49 Looked like you were about to- >> I was just about to wrap things up. 10:50 >> Okay, let's, let's do that. 10:52 >> Well, that is all we have time for this week, apparently. 10:54 I am @nickrp on Twitter. 10:58 >> And I am @jseifer. 11:00 For more information on anything we talked about, go ahead and 11:01 check out the show notes below this video. 11:03 Thanks everybody for watching and we will see you next week. 11:05 [MUSIC] 11:08 [SOUND] It's so difficult. 11:17 There we go. 11:21 Oh, it's. >> Look at it out of the corner of your 11:22 eye, like maintain eye contact. 11:24 No. 11:26 [SOUND] No. 11:27 >> Still going. [SOUND] Oh, no. 11:28 Almost. [SOUND] That was solid. 11:30 >> That was good. >> That was solid. 11:32 >> One more time. 11:33 Let's make sure we got it. 11:33

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

Sign up