1 00:00:00,590 --> 00:00:01,260 I'm Nick Pettit. 2 00:00:01,260 --> 00:00:02,210 >> I'm Jason Seifer. 3 00:00:02,210 --> 00:00:03,610 >> And you're watching the Treehouse Show. 4 00:00:03,610 --> 00:00:04,910 Your weekly dose of Internets. 5 00:00:04,910 --> 00:00:08,110 Where we talk about all things web design, web development and more. 6 00:00:08,110 --> 00:00:10,780 >> In this episode we'll be talking about photo gallery plug-ins, 7 00:00:10,780 --> 00:00:13,600 admin UI, font sizing and more. 8 00:00:13,600 --> 00:00:14,961 >> Let's check it out. 9 00:00:14,961 --> 00:00:20,129 [MUSIC] 10 00:00:20,129 --> 00:00:23,211 First up, we have a plugin called Photo Swipe. 11 00:00:23,211 --> 00:00:28,193 Now, this will give you a JavaScript gallery with absolutely no dependencies, 12 00:00:28,193 --> 00:00:32,881 and what's great about this is that there are a ton of different controls and 13 00:00:32,881 --> 00:00:38,200 it is not a jQuery plug-in, so you don't require any different dependencies. 14 00:00:38,200 --> 00:00:38,970 Click on an image. 15 00:00:38,970 --> 00:00:39,800 Hey, look at that. 16 00:00:39,800 --> 00:00:45,550 We have a picture with a caption and a, an author attribution. 17 00:00:45,550 --> 00:00:47,370 >> Oh, it says this is a dummy caption. 18 00:00:47,370 --> 00:00:48,280 >> Yeah. >> It's like. 19 00:00:48,280 --> 00:00:49,360 >> It's a, a placeholder. 20 00:00:49,360 --> 00:00:53,860 It doesn't mean that the caption is, is, is a dummy. 21 00:00:53,860 --> 00:00:55,930 Now you'll also notice that the the tools, 22 00:00:55,930 --> 00:00:59,010 the navigation tools disappear after just a moment. 23 00:00:59,010 --> 00:01:01,600 And if you look in the top left corner of the screen, 24 00:01:01,600 --> 00:01:04,930 it shows which picture in the gallery we are on. 25 00:01:04,930 --> 00:01:06,750 This is two out of five. 26 00:01:06,750 --> 00:01:09,740 That's a, that's a nice-looking forest, what a great view. 27 00:01:09,740 --> 00:01:11,790 So, anyway, we can go through all these different captions and 28 00:01:11,790 --> 00:01:12,730 it does loop around. 29 00:01:12,730 --> 00:01:15,735 We also can zoom if we want to. 30 00:01:15,735 --> 00:01:16,405 Whoa, look at that. 31 00:01:16,405 --> 00:01:17,775 And then it pans as well. 32 00:01:17,775 --> 00:01:20,485 You'll notice that the cursor changes. 33 00:01:20,485 --> 00:01:24,145 And this can also go full screen if we really want to. 34 00:01:24,145 --> 00:01:25,405 Hey, whoa, look at that. 35 00:01:25,405 --> 00:01:29,090 Then we click this little x and we are back on the page. 36 00:01:29,090 --> 00:01:30,210 Now this is really cool. 37 00:01:30,210 --> 00:01:35,130 This also supports touch gestures, so if I were using a touch-enabled 38 00:01:35,130 --> 00:01:39,720 device like a mobile telephone, I could perform all of these different gestures, 39 00:01:39,720 --> 00:01:41,470 like spreading to zoom the image, 40 00:01:41,470 --> 00:01:45,740 vertical swiping to close the gallery like the Facebook application, and 41 00:01:45,740 --> 00:01:50,340 a ton of different ones, pinching to close and horizontal swipe to switch. 42 00:01:50,340 --> 00:01:55,590 Now this supports the browser history API, so you can see the title 43 00:01:55,590 --> 00:02:00,580 bar will change based on where you are in the gallery and you get a unique URL for 44 00:02:00,580 --> 00:02:06,090 each gallery item which means you could link to a specific photo in the gallery. 45 00:02:06,090 --> 00:02:09,670 Now as you expect from anything we include on this show, 46 00:02:09,670 --> 00:02:13,680 it is responsive and it has great documentation. 47 00:02:13,680 --> 00:02:14,820 So I recommend checking it out. 48 00:02:14,820 --> 00:02:18,030 We'll have a link in the show notes, right below this video, so 49 00:02:18,030 --> 00:02:21,060 a great solution if you need a photo gallery plugin. 50 00:02:21,060 --> 00:02:21,560 >> Very cool. 51 00:02:21,560 --> 00:02:23,580 Well, next up is flakes. 52 00:02:23,580 --> 00:02:24,670 >> I love that cereal. 53 00:02:24,670 --> 00:02:28,720 >> Flakes is an open source design and front-end framework 54 00:02:28,720 --> 00:02:33,420 that serves as a foundation for internal business applications. 55 00:02:33,420 --> 00:02:35,230 Now this is >> Business 56 00:02:35,230 --> 00:02:37,890 >> Really handy if that's what you're 57 00:02:37,890 --> 00:02:42,090 doing building internal applications for maybe a company you work for 58 00:02:42,090 --> 00:02:44,950 or you're doing client work for another company and 59 00:02:44,950 --> 00:02:50,160 you're building an application that is just to be used by that company. 60 00:02:50,160 --> 00:02:52,550 So, let's take a look at a live demo here so 61 00:02:52,550 --> 00:02:55,270 you can get a sense of what this looks like. 62 00:02:55,270 --> 00:03:00,010 It has a pretty nice aesthetic and I think that's pretty much the major 63 00:03:00,010 --> 00:03:04,428 selling point here is that this gives you a good starting point for 64 00:03:04,428 --> 00:03:08,240 a professional looking, I don't know, look. 65 00:03:08,240 --> 00:03:12,190 >> So we can go and look at some browsing data here. 66 00:03:12,190 --> 00:03:13,760 See what that looks like. 67 00:03:13,760 --> 00:03:17,680 We can show what it looks like when you display some information. 68 00:03:17,680 --> 00:03:20,550 It's a nice field set, labels there. 69 00:03:20,550 --> 00:03:22,590 There's adding and editing data. 70 00:03:22,590 --> 00:03:24,830 Wow, I feel like I'm doing my taxes. 71 00:03:24,830 --> 00:03:25,990 Great. So, 72 00:03:25,990 --> 00:03:28,640 let's look at the component documentation here. 73 00:03:28,640 --> 00:03:30,250 >> Do taxes have a product description? 74 00:03:30,250 --> 00:03:36,940 >> [LAUGH] If we look at the simple grid here you can see that we have 75 00:03:36,940 --> 00:03:42,140 a grid system just like you would expect with any frontend framework. 76 00:03:42,140 --> 00:03:45,590 We also have some nice typography. 77 00:03:45,590 --> 00:03:50,090 There's also a few other things like these grid forms and 78 00:03:50,090 --> 00:03:54,300 like I said earlier they're styled to look buisnessy, so 79 00:03:54,300 --> 00:03:59,760 if that is the look that you're going for this is pretty, pretty nice. 80 00:03:59,760 --> 00:04:03,120 They also have some buttons here and some tables here. 81 00:04:03,120 --> 00:04:06,920 Any who definitely be sure to check this out, especially if this is 82 00:04:06,920 --> 00:04:10,230 type of look you want, or you're building internal applications. 83 00:04:10,230 --> 00:04:11,470 Really cool framework. 84 00:04:11,470 --> 00:04:14,200 Really cool, kind of, focused idea for a framework. 85 00:04:14,200 --> 00:04:15,390 I like it. 86 00:04:15,390 --> 00:04:18,970 >> Next up we have a blog post from Christian Heilmann on 87 00:04:18,970 --> 00:04:22,140 keeping it simple and coding a carousel. 88 00:04:22,140 --> 00:04:26,770 Now, we've talked about different carousel plug ins on the show here before. 89 00:04:26,770 --> 00:04:31,260 And let's go ahead and look at the resulting carousel that we're gonna build 90 00:04:31,260 --> 00:04:33,970 and see this is, this little slide right here. 91 00:04:33,970 --> 00:04:39,260 And then we have next and previous buttons with some nice transitions. 92 00:04:39,260 --> 00:04:41,200 Now we also have some different options. 93 00:04:41,200 --> 00:04:44,920 Okay, we have a carousel with different images and different fades. 94 00:04:44,920 --> 00:04:48,550 Here's the simplest possible carousel with no transitions. 95 00:04:48,550 --> 00:04:52,110 So, anyway, as this article goes through, 96 00:04:52,110 --> 00:04:54,430 he shows you how to build this up from scratch. 97 00:04:54,430 --> 00:04:59,170 Now, one of the defining characteristics that he wants to tell you about is 98 00:04:59,170 --> 00:05:01,260 keeping this simple. 99 00:05:01,260 --> 00:05:05,230 He says, one of the things that drives me crazy in our modern development world is 100 00:05:05,230 --> 00:05:06,950 over complicating things. 101 00:05:06,950 --> 00:05:11,120 And in the sake of some, making something easier to maintain we add layers, and 102 00:05:11,120 --> 00:05:13,000 layers of complexity. 103 00:05:13,000 --> 00:05:15,690 So in that vein, he goes through and 104 00:05:15,690 --> 00:05:18,190 shows us how we're gonna build this simple carousel. 105 00:05:18,190 --> 00:05:21,230 We start out with just a div and an ordered list, 106 00:05:21,230 --> 00:05:24,530 which is going to have list items and the content. 107 00:05:24,530 --> 00:05:29,050 From there we have some basic CSS that he goes through, shows you okay this 108 00:05:29,050 --> 00:05:33,650 is gonna be the content and the list items, and just some simple styling. 109 00:05:33,650 --> 00:05:37,595 The carousel box is gonna be Helvetica and 14 pixels. 110 00:05:37,595 --> 00:05:40,740 Okay, that comes up with this specific HTML. 111 00:05:40,740 --> 00:05:43,950 And let's go ahead and sprinkle in some CSS. 112 00:05:43,950 --> 00:05:47,530 We know that we're gonna have a current item inside of our carousel. 113 00:05:47,530 --> 00:05:49,410 And an active item as well. 114 00:05:49,410 --> 00:05:53,320 So here, we go ahead and make the different item active and 115 00:05:53,320 --> 00:05:54,740 then add the class to it. 116 00:05:54,740 --> 00:05:55,640 What's it look like? 117 00:05:55,640 --> 00:05:57,510 Okay great, we have this current class. 118 00:05:57,510 --> 00:05:59,610 Boom, good to go. 119 00:05:59,610 --> 00:06:01,880 At that point, we need to have JavaScript. 120 00:06:01,880 --> 00:06:04,000 So we're interacting with these different items. 121 00:06:04,000 --> 00:06:07,790 Let's go ahead and add a div which is gonna be the buttons that we saw earlier. 122 00:06:07,790 --> 00:06:11,330 And hey a button element is actually perfect for that. 123 00:06:11,330 --> 00:06:13,930 And then, go through. 124 00:06:13,930 --> 00:06:15,090 And how does that work? 125 00:06:15,090 --> 00:06:15,670 Okay. 126 00:06:15,670 --> 00:06:20,010 Add in the buttons, and we go through, get pretty fancy. 127 00:06:20,010 --> 00:06:22,390 We have a working carousel here, and then it goes through and 128 00:06:22,390 --> 00:06:24,020 shows you how to add transitions. 129 00:06:24,020 --> 00:06:27,330 Now I'm not gonna walk you through the rest of this article, but sufficed to say, 130 00:06:27,330 --> 00:06:31,130 if you wanna learn how to build a very simple carousel, just the bare minimum and 131 00:06:31,130 --> 00:06:34,710 then hand said go ahead and check out this article, great commentary and 132 00:06:34,710 --> 00:06:37,050 info inside of it >> Very nice stuff. 133 00:06:37,050 --> 00:06:42,820 Well next up is a wonderful article on CSS font sizing and 134 00:06:42,820 --> 00:06:46,960 this is pretty basic but it's a very nice summary and 135 00:06:46,960 --> 00:06:52,610 really good overview of all the different options you have when sizing fonts. 136 00:06:52,610 --> 00:06:56,920 So on the left side of this table, here we have the units, and 137 00:06:56,920 --> 00:07:02,630 then the type, and then a description of what each one of these does. 138 00:07:02,630 --> 00:07:05,720 Now there's two types of font size units. 139 00:07:05,720 --> 00:07:09,100 There's absolute and relative. 140 00:07:09,100 --> 00:07:14,245 And of course absolute font will be a very specific size 141 00:07:14,245 --> 00:07:19,650 whereas relative fonts or relative units I should say 142 00:07:19,650 --> 00:07:24,780 are going to base their sizes on other things around it. 143 00:07:24,780 --> 00:07:28,000 So other things in that particular context. 144 00:07:28,000 --> 00:07:32,640 And it could have a cascading effect, as is the case with CSS, 145 00:07:32,640 --> 00:07:34,840 cascading stylesheets. 146 00:07:34,840 --> 00:07:36,660 So, let's scroll down here. 147 00:07:36,660 --> 00:07:42,030 There's a lot of great other information in this article, but 148 00:07:42,030 --> 00:07:46,960 I like the technique that this person uses here by setting the font 149 00:07:46,960 --> 00:07:52,490 size on their HTML a nd then using the rem unit, 150 00:07:52,490 --> 00:07:59,140 they can set a relative font size to the base font size on their HTML. 151 00:07:59,140 --> 00:08:05,130 And if we scroll back up to that table, then it is exactly what it says on rems. 152 00:08:05,130 --> 00:08:10,150 So it is actually a root em, so an em 153 00:08:10,150 --> 00:08:15,890 is relative to the parent element's font size whereas a rem 154 00:08:15,890 --> 00:08:22,300 is relative to the root em or the html element font size. 155 00:08:22,300 --> 00:08:26,760 So by setting a font size on the html element and then using rems for 156 00:08:26,760 --> 00:08:31,450 everything else, you can basically create this cascading effect where you 157 00:08:31,450 --> 00:08:34,190 only have to set the font size once and 158 00:08:34,190 --> 00:08:37,890 if you want to maybe adjust the font size for everything on the page, 159 00:08:37,890 --> 00:08:43,400 you can just go back to that HTML element and adjust the font size there or 160 00:08:43,400 --> 00:08:47,410 adjust on individual elements that are set relative to that. 161 00:08:47,410 --> 00:08:53,630 So pretty cool system and really great breakdown of different font size units. 162 00:08:53,630 --> 00:08:55,712 >> Oh I get it, break down, good fun like break points. 163 00:08:55,712 --> 00:08:56,590 >> That's right. 164 00:08:56,590 --> 00:08:57,820 >> Cool, nice job. 165 00:08:59,120 --> 00:09:02,860 Next up we have a project called medium.js. 166 00:09:02,860 --> 00:09:06,080 This is going to let you take control of content editable. 167 00:09:06,080 --> 00:09:09,470 Now in html5, declaring an element as content 168 00:09:09,470 --> 00:09:13,552 editable allows you to edit that right on the page. 169 00:09:13,552 --> 00:09:19,210 And, Medium.js is going to help you take control of that just like the name says. 170 00:09:19,210 --> 00:09:20,540 So how do you use it? 171 00:09:20,540 --> 00:09:25,260 Well okay, you include some JavaScript in your page and then, 172 00:09:25,260 --> 00:09:27,480 I have this little script right here, and 173 00:09:27,480 --> 00:09:32,110 initialize medium, medium, give it an element, and you are good to go. 174 00:09:32,110 --> 00:09:35,985 So what does this look like, here's an in line element you can edit. 175 00:09:35,985 --> 00:09:40,960 Hi, I'm Nick Pettit, and that is content edible. 176 00:09:40,960 --> 00:09:45,030 This is now a div on the page, if I inspect the element. 177 00:09:46,860 --> 00:09:50,870 You can see it says, Hi I'm Nick Pettit right there. 178 00:09:50,870 --> 00:09:56,120 And boom this is still a div with that content editable set to true. 179 00:09:56,120 --> 00:10:00,310 Now what's really nice about this particular plugin is that 180 00:10:00,310 --> 00:10:03,770 you can put HTML templates inside of it. 181 00:10:03,770 --> 00:10:10,230 So if we have content editable right here, say hello, hello again. 182 00:10:10,230 --> 00:10:13,240 You'll notice that these are list items 183 00:10:13,240 --> 00:10:17,670 that are being created as we go through and edit the page. 184 00:10:17,670 --> 00:10:21,610 We can see even if we look at the HTML, we have new list items. 185 00:10:22,850 --> 00:10:24,750 Now why would you use something like this? 186 00:10:24,750 --> 00:10:29,330 Well in case you need to have users on your page interacting with it. 187 00:10:29,330 --> 00:10:34,300 Say you're designing a CMS and allowing them to edit different sections of 188 00:10:34,300 --> 00:10:37,970 it while still maintaining style and having semantic html. 189 00:10:37,970 --> 00:10:40,500 This would be a great plug in to use. 190 00:10:40,500 --> 00:10:44,070 It doesn't currently have a toolbar like medium.com the website, but 191 00:10:44,070 --> 00:10:45,990 it would be really easy to create your own. 192 00:10:45,990 --> 00:10:48,109 And from what I understand, that is in development. 193 00:10:49,460 --> 00:10:50,290 Go ahead. Go ahead. 194 00:10:50,290 --> 00:10:52,640 Looked like you were about to- >> I was just about to wrap things up. 195 00:10:52,640 --> 00:10:54,670 >> Okay, let's, let's do that. 196 00:10:54,670 --> 00:10:58,160 >> Well, that is all we have time for this week, apparently. 197 00:10:58,160 --> 00:11:00,010 I am @nickrp on Twitter. 198 00:11:00,010 --> 00:11:01,060 >> And I am @jseifer. 199 00:11:01,060 --> 00:11:03,080 For more information on anything we talked about, go ahead and 200 00:11:03,080 --> 00:11:05,030 check out the show notes below this video. 201 00:11:05,030 --> 00:11:08,129 Thanks everybody for watching and we will see you next week. 202 00:11:08,129 --> 00:11:14,503 [MUSIC] 203 00:11:17,002 --> 00:11:21,961 [SOUND] It's so difficult. 204 00:11:21,961 --> 00:11:22,586 There we go. 205 00:11:22,586 --> 00:11:24,740 Oh, it's. >> Look at it out of the corner of your 206 00:11:24,740 --> 00:11:26,628 eye, like maintain eye contact. 207 00:11:26,628 --> 00:11:27,421 No. 208 00:11:27,421 --> 00:11:28,754 [SOUND] No. 209 00:11:28,754 --> 00:11:30,920 >> Still going. [SOUND] Oh, no. 210 00:11:30,920 --> 00:11:32,295 Almost. [SOUND] That was solid. 211 00:11:32,295 --> 00:11:33,128 >> That was good. >> That was solid. 212 00:11:33,128 --> 00:11:33,628 >> One more time. 213 00:11:33,628 --> 00:11:34,399 Let's make sure we got it.