Editorial Design Code

[00:00:00]
>> Jason Pamental: Let's take a look at that Outdoor Magazine, we'll wrap up with that unless people have other questions or other things they wanna look at. In the part 08 file, I've got that FF [INAUDIBLE] page as well as this example magazine page. So if we take a look at the HTML it doesn't look that much different from any other webpage, it's really pretty standard.

[00:00:28]
If we took the CSS away, it's simply, there's some navigation, there's div's and articles for stories and just some indication for what kind of element it is. So pretty standard kind of things that you'd see in everyday web development, nothing really all that out of the ordinary. It's once we start to see that stuff alone with the CSS, that's in the SaaS folder, 08 magazine styles, and there's an awful lot there.

[00:01:10]
So let's take a look at what that looks like in the browser again, let's just scroll up and down a little bit and take a look. We've got the main element here, on the side bar we've just got a few little stories here, and then we've got photos with captions.

[00:01:29]
The rest of the lead story, second level story, third level ones, and then a few other little tidbits over here. So what I wanted to do was think through what is typical for some magazine website. Create some level of hierarchy in most important story, next most important story, other supporting stories, more visual ones.

[00:01:57]
If you're curious, these are actually all photos that I took in my travels to various different places. And you'll get a kick out of some of the writing because it's pretty silly.
>> Jason Pamental: So, what I've ended up doing with this is try to think through a lfew different things.

[00:02:22]
One, what is the layout gonna do, how is that gonna evolve? So I'm gonna try and make use of CSS grid, at the same time that I'm trying to make use of variable fonts. So again, there's only two font files that are in use, there's a serif, and a sans serif.

[00:02:36]
So it's making use of install var as the main one, and so that's transitioning as we go up and down. And CSS Grid is what's allowing us to play around with the layout without messing with the source order. And it makes it all move and reflow pretty easily, so the way this is working from a source order.

[00:03:06]
It's this lead story, and then it goes down to this one, and then these and then these and then these. And that way, it's going from most important story to small supporting details and any total information. So, semantically, on our phone, without any styles, for search engines, etc., it's in a sensible order but we can move things around using CSS Grid.

[00:03:37]
And then experimenting with making this was really fun. So if I go and inspect this, we can play around and see what's going on here.
>> Jason Pamental: So here it is, let me zoom in on that a little bit, make that a little bigger, we've got the background image.

[00:04:05]
Then we have the H1, and then we have a layer in the foreground, so those are three elements, and it's all inside a figure tag. It's really fairly simple markup, it would be very easy to build in a CMS. And if we just start to hide a couple of things, so I just made that image hidden.

[00:04:27]
So can see that's what the top layer looks like, pretty sloppy job in Photoshop but it got the job done. And if I hide that one too,
>> Jason Pamental: This is what we're left with is just the text. So those things could all be changed independently. And if we take a look at the CSS that's on it,

[00:04:55]
>> Jason Pamental: It's using the formulas here but,
>> Jason Pamental: It all just moves and scales in a similar manner to what I showed you in the other file, in the other demo.
>> Jason Pamental: So if we go back into the code.
>> Jason Pamental: So I tried to imagine writing this so that I'm nesting things well and setting up my BEM class names and trying to follow some good practises as if this were a real thing.

[00:05:34]
And created things like banner ads that would be placed in different areas in our content main area. We've got primary column and secondary column, this is where I'm starting to use CSS Grid, has anyone worked with Grid yet? Little bit? I feel like I know just the tiniest fraction and I'm already so blown away with how much you can do with it, It's really incredible.

[00:06:03]
And that's actually if you are thinking about playing around with Grid, this is another good reason for you to get Firefox. Because the grid inspector in Firefox, that's already shipping, it's in the nightly tools as well. But the Grid Inspector really makes it easy to see what's going on, and here we go, what was that, let me try that again.

[00:06:37]
>> Jason Pamental: So if I just popped the address in here and we load a page, it looks exactly as we expect it to. That's another thing that's interesting, we have been looking at these pages in three different browsers, and it is pretty indistinguishable. So it really is possible to use these and have them work nicely in Firefox, Safari, Chrome, Edge.

[00:07:02]
Like really, once this fully ships with it on by default then already it's 65 to 70% of devices where they'll work. And once we have Firefox it's really gonna cover a substantial portion of our normal browsing public. What I wanted to show you was in looking at these elements, so you can see Firefox exposes here, that's a grid, and as soon as you click on it,

[00:07:38]
>> Jason Pamental: Our layout, grid inspection, and display settings, it actually gives you incredible amounts of detail. So we can toggle all these things on and it tells you exactly what's going on in that grid. It's really amazing, it's easy for you to create these overlays So now we can just look around the design space.

[00:08:04]
And if I start to make the screen bigger or smaller, you can see where those things change. So now you can see it's shifted from basically a three column grid to a two column 1. It shows you the grid gutter in between, see where all the column delineations are, it's really amazing how much you can tell about a given layout.

[00:08:31]
So I really encourage you to check out what they've got in Firefox, and the tools are only getting better. I have to show you the shape that they are too cuz that's amazing.
>> Jason Pamental: What I really wanted to show you is the shape editor, which is something that they intend to ship in August.

[00:08:49]
If I inspect this element, find that figure, and if you look here for the active CSS shape outside, see that little icon, if you click on it, there's the shape. And if I wanna start tweaking it and change, all I have to do is just click and drag.

[00:09:13]
Makes it super easy to actually go through and tailor that exactly the way you want it to be, and then just copy the resulting CSS back into your project. So it's really super handy, it's the only dev tool that's doing something like that. It's really the only way that you have some visual way to start to define that shape.

[00:09:36]
You can add more points, you can do all kinds of things with it, you can also rotate it. I don't remember how, but I know that you can. So again, this is probably not something that's a terribly sustainable thing to build into a content management system. However, according to the spec, if you have a transparent image, if that's a PNG.

[00:10:01]
Then you can actually reference the PNG itself in the CSS, in order to have it follow the transparency. So that actually is a way that you could upload a PNG through the content management system. And have the CSS right out in line to reference the URL of the image itself to create the shape around it.

[00:10:24]
So, that's not supported yet here in, I don't know if it's in Firefox or if it's in Chrome, the transparency aspect of it isn't working. But as a way in the future to be able to get these kinds of really interesting editorial effects without having to write custom code.

[00:10:43]
We can play with typesetting headlines, we can have transparent image overlays with text layered underneath. And we can have inset photos that follow the transparency of the image itself. Whether it's an outstretched arm, a pile of grapes on the Jen Simmons labs website or a glass inset here, and not have to write any code to do it.

[00:11:04]
There is some real power in CSS that is coming along that starting to be supported more and more. All of these things taken together really can elevate the kinds of work that we are doing on the web and make things way more interesting than they are now.