Episode 137: Space.js, Materialize, Living Style Guides

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show, your weekly dose of internets where we 0:01 talk about all things web design, web development, and more. 0:04 >> In this episode we'll be talking about 3D scrolling, flex box, 0:07 material design, and more. 0:11 >> Let's check it out. 0:13 [MUSIC] 0:14 First up is Space.js. 0:19 This is HTML-driven narrative 3D scrolling. 0:21 >> That's spelled differently than I thought. 0:27 >> It is. 0:29 But I would just call it 3D scrolling. 0:29 Cuz that's, that's pretty much what it is. 0:33 So when I scroll down the page,. 0:34 Woah, what is happening? 0:37 Is this a webpage or are we flying through space? 0:39 So I'm just gonna scroll through really quickly there. 0:43 >> Wow. >> Yeah. 0:46 >> I think we are flying through space. 0:46 >> I think you guys, you know probably got all the, all the code there. 0:47 Got the idea. 0:51 No actually we're gonna go to their GitHub page. 0:52 And learn a little bit more about how this works. 0:56 So. 0:59 >> Magic. 1:00 >> As you scroll down the page, these frames start moving towards you. 1:01 So this is a JavaScript library, and once you type out some of this markup and 1:07 include the JavaScript in your page, you can create these frames. 1:12 Now, they recommend having this space frame along with this space inner frame 1:17 to enable vertical and horizontal centering inside each one. 1:24 So then, you can also include some of these options. 1:29 Now you can have custom durations as well as different types of transitions. 1:34 There it is. 1:40 Entry and exit. 1:40 So, you can have them fade in or 1:42 fade out or kind of zoom in or move to the left or right. 1:43 All sorts of stuff. 1:48 Anyway, there we go. 1:50 There's all the custom transitions. 1:52 Pretty cool stuff, so 1:54 definitely be sure to check this one out if you wanna do some some 3D scrolling. 1:55 >> You know, sometimes people ask Nick and I where we find all of these great 2:01 libraries and we found this out when we were having drinks at the space bar. 2:04 It's where we found out about Space.js. 2:11 >> That's a complete lie. 2:13 >> Get it? 2:15 Yeah, I get it. 2:16 >> Space Bar- >> Yeah. 2:16 >> Like it's a key on a keyboard- >> It's, it's on the, right. 2:17 >> But it also could be the name of like a. 2:18 >> An establishment. 2:21 >> Yeah. >> Yeah. 2:21 >> Yeah. >> Mm-hm. 2:22 They got it. >> Next, next up, we have an article about 2:23 what nobody will tell you about the will-change property in CSS. 2:26 >> Except. 2:30 The host of the Treehouse show [INAUDIBLE] I tell you. 2:32 >> And the blog that we read this from. 2:34 >> Yeah. 2:37 >> So anyway, the will-change property is supposed to give browsers 2:38 notice that you will be doing some sort of manipulation to a DOM element and 2:42 what kind of change is going to happen. 2:46 Now the problem with this is that not all browsers support the will-change property, 2:49 and if the browser does not support it, it may not render the element properly. 2:55 So, here's a really simple example. 3:00 There is two divs with the classes of box, box1 and box2. 3:02 Now if we look at the styling this looks pretty good. 3:06 The box has a width and height of 100 pixels. 3:10 Box1 has a background of orange, box2 has a background of teal. 3:13 Now the big difference here, 3:17 the box1 class has this will-change property set to transform. 3:18 What's gonna happen is if a browser does not support the will-change property 3:23 then the green box will be rendered and if not the orange box will be rendered. 3:27 Now the problem with this is that if you are going to be testing in 3:32 multiple browsers, you need to actually make sure that this property renders. 3:37 There is no real graceful degradation there. 3:41 The author of this article says that this brings us back to the old IE 6 and 7 days. 3:44 Anyway, this is just something to keep in mind if you're using 3:48 the will-change property. 3:51 Maybe wait until is has more browser support but go ahead and 3:52 read the article for a little bit more specifics. 3:55 >> Very cool stuff. 3:57 Well next up is the Flexbox Cheatsheet Cheatsheet. 3:58 >> Oh, good. 4:02 >> So, there's lots of cheatsheets out there for Flexbox but 4:04 this article is saying that they kept going back to the post 4:08 on CSS tricks that's all about it which is a very good post. 4:12 I've referred to that one a lot myself, so I know exactly what they're talking about. 4:16 And they said, well, 4:20 it might be a little bit nicer to actually organize it a bit differently. 4:21 And they have this little flow chart. 4:26 So, first they just have the basic concepts of a flex container 4:29 with some flex items inside of it. 4:34 So that's the basic setup for a Flexbox layout. 4:36 And then you have the cross access and main access and that's, that's helpful. 4:40 And then they have this flow chart here, and they say, 4:46 well, do you want rows or columns or 4:49 first it says to activate the Flexbox powers you have to say, Display flex. 4:52 So that's what you would do on this Flex container. 4:57 Now it says, do you want rows or columns? 5:00 Well, if you want rows then you're gonna have to say flex direction row or 5:03 flex direction column. 5:07 And again you do that on the container. 5:09 And then, same thing, you can also reverse those if you want to do reversed rows and 5:11 reversed columns. 5:16 And then you can add a couple of more properties and 5:17 values to the container so it has those. 5:21 And then down here, let's see. 5:26 Where is it? 5:28 Yes, on the flex items, there are a couple of things you can do as well. 5:30 Anyway, I just really liked the formatting of this because it's in this simple 5:36 sort of question and answer format, or 5:41 flow chart format where you can say like well, do you wanna do this or that? 5:44 Yes or no? 5:48 And it makes it really easy to figure out which properties that you wanna use 5:49 because Flexbox of course is a new method for laying out web pages. 5:54 And it's not perfectly supported in every browser just yet. 5:59 Support is coming along. 6:03 But it's still really cool and definitely worth learning about now, but 6:05 it can be a little bit confusing. 6:09 So this, this cheatsheet cheatsheet is pretty helpful. 6:10 >> Yeah, I can't wait until it has better browser support. 6:14 I could hardly contain myself. 6:16 >> It'll make things a little bit more flexible. 6:19 >> Yeah. 6:21 Next up, we have a project called Materialize. 6:22 Now, this is a responsive front-end framework that is based 6:25 on Material Design from Google. 6:28 I know because it says that right on the page here. 6:30 Now this gives you a whole bunch of material design components as well as 6:34 Sass versions with the source scss files. 6:37 It's very easy to set up, you include the CSS and JavaScript and 6:41 then you are good to go. 6:46 Also it is supported on NPM and Bower and 6:47 then it walks you through how the project is set up. 6:51 That's cool. 6:53 Why don't we just look at some demos to see what is actually supported. 6:54 Now it gives you a ton of different color palettes here. 6:58 We can see we've got red paint and purple as well as several different 7:02 shades of colors as well as the accents, one through four, darken, whatever. 7:07 Now we also have grids and containers. 7:13 Similar to if you're using bootstrap or any of the other CSS frameworks. 7:16 Hey, this has a grid too. 7:21 And it gives you class names for row and columns. 7:22 Supports offsets and everything that you expect from a CSS framework. 7:27 What's really nice is the different helpers and components here. 7:32 So cards, here's a, here's a nice card. 7:37 There are all sorts of design 7:40 specifications lately where cards are kinda the hot new thing. 7:43 Hey you want a CSS framework that supports cards? 7:46 Boom, here's a card. 7:49 They've got basics card, basic cards, image cards with links. 7:50 You want cards? 7:53 Hey, tons of different cards here. 7:54 Now not gonna walk through everything but 7:56 if you do wanna see a nice little showcase here of everything that's possible. 7:58 Go ahead and check it out. 8:01 You can find a link to material.cs at materialize.css in the show notes right at 8:03 the bottom of this video. 8:07 >> Very cool stuff. 8:09 Well, next up is A Living Style Guide Tools In-depth Overview. 8:10 That's a lot of words, so I should probably explain some of them. 8:17 >> Yeah, so we've talked about style guides on the show before. 8:20 Now this post is about how to make your style guide sentient and an actual person. 8:22 That is almost true, except not in the slightest bit. 8:27 A living style guide is basically a place where we can put 8:32 all of your different components and colors and buttons and 8:35 things that you end up creating as you are building out a website. 8:39 And it allows your style guide to be flexible and 8:44 basically include newer things as you create them. 8:49 >> That's basically exactly what I said. 8:53 >> Sure. 8:55 So this guide is for, Living Style Guide Tools, 8:57 that allow you to create these Living Style Guides. 9:02 So this is a big list and 9:06 let's just scroll down to one that I really like here. 9:09 Here we go, pattern lab. 9:14 So pattern lab is exactly what you would expect out of a tool like this. 9:16 It allows you to look at all of the different colors for example. 9:21 All of the different fonts that you're using and 9:26 it shows you what forms look like in your, in your website. 9:28 And you can use this sort of navigational structure that they 9:33 have built out here to click through each one of those things. 9:38 So, you'll go to an HTML page and it will just have, like, for 9:43 example, some forms on it but it will show you, 9:47 of course, what those forms look like because your CSS is being applied to them. 9:50 So, there's a lot of other tools like this. 9:55 I think there's a few generators and ruby gems and all sorts of stuff in here. 9:58 So, this is a pretty in-depth guide, but 10:04 I definitely recommend you check this out because creating a living style guide is, 10:07 is pretty helpful when you're working on a team of other people. 10:11 And you have to sort of create these things on the fly, but you also wanna keep 10:16 other people informed about these stylistic decisions that you're making. 10:20 >> That was kind of like how Bootstrap got started, I believe. 10:24 >> Yes, that is true. 10:26 >> Once. >> Anyway, that's a. 10:28 [LAUGH] >> [LAUGH] That's 10:28 about all we have time for today, Nick. 10:30 Who are you on Twitter? 10:31 >> I'm @nickrp. 10:32 >> And I'm @jseifer. 10:33 For more information on anything we talked about, 10:34 check out the show notes right below this video. 10:36 Thank you everybody for watching and we'll talk to you next week. 10:37 [MUSIC] 10:41

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

Sign up