- In Europe, in the 1920's,
30's, and the teens, there were a bunch of different
people doing some amazing experiments in graphic design. Really pushing the edge
of what was possible, with the technology that they had, both figuring out ways to take metal type and do really interesting things with it. And later, taking phototype setting, paste-up kind of material, inventing whole new ways to do layout using the new techniques. Some of the stuff that
happened at very end of the metal type era,
I find so beautiful. This work by Piet Zwart and Jan Tschichold and a
bunch of other people, there's a lot of examples
where you can clearly see that these folks were
influencing each other and just messing around
to see what was possible. I think this is one of my favourites. There's no text in this,
it's just all the lines and pieces and bits and bobs that you have in the drawer of metal type
when you're doing lock-up that they thought, "well
what can we do with that?" So last year, as I was
building labs.jensimmons.com, I wanted to kind of come up
with something interesting for the top of the page and figure
out something...I don't know, borrow from the past and
do some sort of design. So I did a design a lot like theirs. This, what you're seeing right
now, is the fallback layout. So the layout that's
interesting and looks like the early 20th Century only
works if you have Grid. People who don't have Grid,
which last year was basically a hundred percent of people, or a hundred percent of people using
normal browsers and not the experimental browsers
with flags turned on, they would just get this layout. They'd just get, like
a regular flow layout. I didn't have to do anything
to make this happen, it just happens. But then this is the layout that folks who have a browser who sees Grid,
this is what they get to see. Very much taking from that era, same kind of colouring, same
kind of fonts, same typography, but the challenge for us
in the early 21st Century is to figure out how to do
a layout that is responsive. How does it morph and change when the browser window's a different size? Or in another situation
where there's more content than you originally realise
there might be, or less content. So I thought, let's dig into this example and I'll show you how
it is that I built this. So this is a copy of it. Different text. But basically the same code
running this, little simpler, so it's easier for you to
see it. There's the design. So, let's go ahead and
say, "Inspect Element" I'm here in Firefox, I'm
in Firefox Nightly because I want to use some of the Grid
tools that are only available at the moment in Nightly, July 2017. They may now actually be in Firefox or maybe they're on their way but if you open up your copy of
Firefox and you don't see them, you can always just open up
Nightly and find them there. So, one thing I can go
over to the Layout panel and I can click this...I
can see that in fact, there is a grid on the
page, there's one grid and I'm gonna turn it
on by checking this box. I can also click this target
and that's gonna jump me in the HTML to the place
where `display: grid;` is. I can click back over to the Rules and I can see, `display: grid;` I can also turn the
Inspector on and off here. So one of the things that's
happening is that there's this `transform: rotate(-45deg);` being applied, but it's only being applied
at a certain viewport width so at smaller viewports it doesn't exist at bigger viewports it does, once there's space, basically, for the rotation. We can inspect this, we
can just turn this off for the rest of the
demo just so that we can see things a little less
complicated without the rotation. And you can see here that I've got line 1, 2, 3, 4, 5, 6. We can see that line 1
and line 2 are sort of on top of each other although
there is a gap between them, and then the row lines: 1, 2, 3, 4, 5 and 6 down here.
And then we can dig in. So this is our grid container, we can dig into our grid items. So here's an H1, here's an H1, here's a box that has content in it. The whole box can be placed on the grid the bits inside cannot be
placed separately on the grid so we'll just ignore those for now, we'll just look at what
happens to the box that those things are inside. There's this paragraph here
where, just as more examples, you can see what's going
on inside. But again, it's just the paragraph that gets placed. And then I also have this B.
So what's the deal with this B? There's nothing in it, it's
an empty element on the page. I could use a div. A lof
of folks use empty div's. Rachel Andrew has a lot of
empty divs in her grid examples. It's a quick way just to have kind of a nothing element to place it. The thing is, there's no way to directly style anything
that's part of the grid. The grid itself is a construct in CSS and the only way to style
things at the moment is to have an element, to
place that element on the grid and to style that element. So I want to have a big red, thick line at the bottom of this layout. I don't have anything
down there to put it. I don't have...you know,
none of these other boxes, the H1's, the paragraph;
those are not gonna be a good place to put that red box. So I need an empty element. And rather than having an empty div, I chose to use a B element. B is for bold. It's one of the early html elements that really isn't recommended
anymore, it is kind of, not officially part of the
HTML specification anymore. If you want something to be bold, it's much better to use
emphasis or something else because it has semantic
meaning and you can say, "this is supposed to be, this part is supposed to have emphasis to it." So, like, when a screen reader
comes through and reads it, it reads it like it's bold. So bold is not...don't use it, except... I think this is a situation where it's kind of a good idea to use
it because here we are, we're using an element that's clearly not semantic, that clearly
doesn't have any other use cases, that is only about visual styling, and maybe some day in the future, we'll be able to style the grid directly. I've been advocating for that
at the CSS working group, seeing if we can get some things into the level two version of
the grid specification to give us the ability to style cells without having elements on them. But we don't have that
yet so maybe in the future I'll want to find and replace
and remove some of these B's and they sort of stand out as being, you know, visual things only
and not being semantic and.. so anyway, that's my current thinking. It's what I've done in a lot of examples. So I put this B here so that
I can place it on the grid and then I can give it styling,
so this border is on the B and then you can see
here, I've got grid column three slash six, which
means I want you to go from grid column line three
to grid column line six, which is why it runs all the
way across these three columns, and I said grid row five, which means I would like you to start on line five. And you don't have to
give it an end number. If you don't, it always
just increments by one so we say we're gonna
start on the sixth line, it just assumes we are gonna end at the... I mean, we're gonna start at the five line it assumes we're gonna
end at the six line. And then I get a big, huge, thick border. And I put on here lines,
self and justify content just to make sure that if
for some reason that row gets taller because of other
content that's in the layout that that line is still
always gonna be at the bottom. Just for some robustness to
make sure it's not fragile. The other thing that's
interesting, you know, of course you can look at any one of
these things and you can look at numbers and you can see, okay it goes grid column one to four so it's starting at line one
and it's going to line four I didn't say anything about the rows which means it's just going
to go according to the auto-placement algorithm
so it's gonna start in the upper left corner in this case because it's the very
first thing on the page or there's more examples,
we can look and see, you know, grid row three
means I want you to start on row line three and I want you to go grid column four to six so it runs from column line four to column line six. You can see that it's in this particular two cell area, but it's at the bottom. That's because I'm using align self and I'm telling it to go to the bottom. One of the big differences
between Grid and some of the mental models we have before is that the content and the columns,
and in this case also the rows, the columns and rows, the area might actually be bigger than the content and so the content could
be at the top or the bottom or centred, right or left or centred unlike, say, using a tool
like Bootstrap or 960.gs or all of the different frameworks that we had between those two points. Those were, like you put
something in the column, but the content was always the
full width of the column, like the width of the column
and the fact that there was sort of even a column at all was, were all mashed together conceptually, so you never had content that
was smaller than the column but in Grid, you can totally have that. You can have content
that's actually smaller than the column or smaller than the row and then you can use
the alignment principles to place it inside the larger area. It's a big part of what we're
gonna wanna do with CSS Grid. The other thing that's super
interesting here is this Grid-in writing mode's
being turned 90 degrees. Now, I could have used transforms perhaps like I used transforms over here, transform rotate negative 45
degrees, is gonna rotate this. The problem with
transforms though, is that transforms don't alter the
calculations of the layout. They don't actually take up more space. So if I applied a transform
to the writing mode, the Grid-in writing
mode's phrase, this H1, it wouldn't affect the rest of the layout and I do want it to affect
the rest of the layout. I want the height of these three rows to add up to the length
of this block of text. I don't want the things
that are lower down on the page to end up higher up. So you could see, like, this is the layout if I take off the CSS that I am using and then I add a transform: rotate 90 degrees, it's gonna turn it 90 degrees but it doesn't change any of the rest of the layout. It's not actually
accomplishing what I need. So I'm not gonna use the transform here. What I'm gonna do instead is use this property called "writing mode." Writing modes are for
supporting many different kinds of scripts and languages. There are a lot of languages
around the world, of course, there's many different
ways that writing works. Some writing works in a left
to right, horizontal fashion, other writing scripts
work in a right to left horizontal fashion, and then yet others flow vertically either right to left or left to right; they do both. So the writing mode
specification was written in CSS. It came along...it really became fully implemented about two years ago. It came along to support
the full range of scripts that are in modern use around the world. But, you can also use it to
do graphic design effects so here, English...this
is an English example, English is a horizontal language
that runs left to right, but I'm gonna go ahead
and use writing mode in order to get this effect that I want. So here I'm using writing
mode vertical R L, which is gonna give me the opportunity to turn it and if there are
multiple lines of text here, the lines are gonna run
from the right to the left so the second line would go here and the third line would go here and the fourth line would
go here, which makes sense in this particular way
of rotating the text. So that's all I have to do is just say "vertical R L" and I get text
that's rotated 90 degrees. You'll also see that the cursor... See that cursor? That cursor
actually changes directions. Up here the cursor is for horizontal text and here the cursor is for vertical text or really, perhaps I should
describe this as sideway text. Very simple thing in the
CSS but, you can use it to do some kind of amazing
graphic design effects. So that's the whole thing.
It's a responsive, squishy box. We can see here how I've defined it. I defined my columns: auto 1FR, 1FR, 1FR, point 5FR for my columns. My rows are auto 1FR, 1FR, auto, auto. These two rows are the
same height and these three rows are whatever
height they need to be for the content that's inside of them. And same thing here: this
first column is auto, which in this case, is kind
of collapsing down to nothing and then there's three
columns that are set to be the same width as each
other and then this column is set to be half the width
of these other columns. That's probably the most
complicated thing about CSS Grid is to kind of figure out,
when do I want to use FR's, when do I want to use
auto, when do I want to use something like min content, max content? I'll talk about some of those
options in other videos. But this example, just looking
at one example at a time, is kind of using a mix
of those units to get a layout that is gonna work
in a lot of different contexts and be very flexible and squishy, always allow the content to not
overlap, to be fully itself, so it doesn't ever break at
any particular viewpoints, and does something kind of
interesting all the way long. And you can see here,
at different breakpoints I've changed where everything
where everything gets placed. You can dig into the code yourself and see exactly how it is that I did that.
This channel is not for beginners, though beginners will enjoy the challenge. Jan is the most even-tempered host of any channel out there with out car-lot hype or I-just-woke-up dullness. About the only host-instructor that doesn't start out every episode with "Hey, guys!" She is professional, respectful, and competent.
Brilliant videos. The transition of print design to grid layouts is so impressive.
I miss the Web Ahead :-(.
TIL
writing-modeis a thing.this chick is punk as fuck