Jen Simmons here to talk about the new CSS Grid Inspector for Firefox. It's in
Nightly. We just shipped it last week — or maybe the week before — a whole new set of
tools to make the Grid Inspector for Firefox more robust, more powerful, more
awesome. So check it out by going to nightly.mozilla.org and downloading
Firefox Nightly, if you don't have it already.
There're all sorts pre-release versions of Firefox here. The one you want right now
is Nightly. These tools, of course, will land in other versions of Firefox, all
the way to the release version, at some point later in this summer, but if you
want to check it out now, it's July 6, 2017 today, Nightly is the place to do it.
So, here I am in Nightly. We can see here "About Nightly". Maybe if you have
an older version of Nightly, you could open up this "About Nightly" box and make
sure it's up to date. Update it. Nightly updates "every night" — every day or two,
couple days. It's sort of whatever we think is finished and ready to be put in
Firefox, but of course maybe it's not completely tested. There could be some
bugs. It might be a little wacky. So don't get too upset if something seems a
little bit broken. But you know, for the most part, my experience the last couple
of years has been that Nightly is remarkably stable, actually. Things are
pretty well baked. They're just not completely ready for the big public, but
you're working on building a website. So you should check this out. So let's look
at… I have a whole bunch of examples here at labs.jensimmons.com. A lot of them
use CSS Grid. Let's look at this one in particular. You can see here that this is
actually fairly simple HTML. The there's a element. And then a
which has a link . And then there's an and . And then I've got a which is
going to give me a place to attach that white diamond. And then I've got four
figures. Each of them is an image wrapped in a link.
So this one, this one, this one, this one. Then I'm using CSS Grid to do a
layout that is both responsive and robust — no matter how much content there
is. It's always going to work out. And we can have overlap. You could try to do
overlap in the past with absolute positioning, but it's kind of weird. This is
going to work much better — using CSS Grid. You may know already that if you find
in your HTML the place where `display: grid` is written then in Firefox you can
say `display: grid` and find this little tiny icon of a grid — or some people like
to call it the waffle icon — and you can click it and it shows you the gridlines.
You can see them here in kind of a dark purple / purpley-black. It's super helpful.
It's been super helpful over the last year to just have ways to see the
lines. But it's not really enough. So, for example, we want to change the color and
make it something a little brighter, and make it stand out a little bit more. We
might want to see the numbers of the lines. So there's now this new panel
called “Layout Panel”. You can see here it says Rules, Computed, Animations, Fonts.
There's a new one called “Layout”. We can check it out. Look in here and see
the tools that are here. So the big one is this new Grid panel. We can
change the color right here. Let's make it something a little bit brighter. Make
it stand out a little more. We can also click here and say “display line numbers”.
The numbers are going to show up. So now I can see: 1, 2, 3, 4, 5...
1, 2, 3, 4, 5. Makes it easier to position things. Like let's say I want to
position this particular box. I can go over here to the Rules, and I can see
that in fact I do want my code to go `grid-column: 3 / 5` which means I wanted
to start on line 3, and go to line 5. Or `grid row: 1 / 3` which means I want to
start on row line 1 and go to row line 3. Which in fact it does. And if I
mess around and change this code, I can start to see the effects of what that
would do. And be like why did that happen? Why did this happen?
What happens if I change it in this way? What happens if I change it in this
other way? Back on the Layout panel, we can see in fact... we can also hover over
the different parts of the Grid and see what those are. We can see here this
particular cell that I'm hovering over right now
it says “Row 2/Column 3” which means row line 2 and column line 3 is where that
particular cell starts. It starts on row line 2 it goes to the row line 3. It
starts on column line 3 it goes to column line 4. It gets a
little confusing with all these numbers but, you'll get the hang of it once you
start writing code. It starts to make a lot of sense. Let's look here at another
example. This particular this jazz poster that I have used as an example quite a
lot over the last year. You can see here that I've actually got two
different grids on the page. This might be something that you might not know
just looking at the example by itself. You might be trying to check out what
this is, and you have to click around, and be like ok, is there a grid on the body? No.
Is there a grid on the ? No. Is there a grid on ? No. Where are the grids?
On ? Oh… `display: grid`. Right. You don't want to do that. So instead what you can
do is you can see this little list, and you can see that, oh in fact there's a
grid on the element, and I can click on this little target, and it jumps to
in the HTML. Or I can click on this target, and it jumps to the in the
HTML. I can turn this one on. I can turn this one on. I've made them different
colors so that it would really stand out for this example this is kind of bright
purple and this one's this bright blue and in fact you can see that the Grid on
the is 4 columns — 1, 2, 3, 4, columns wide. And the one on the is 6 columns
wide. I can also see by clicking back and forth back and forth that these are
in fact right on top of each other which was my goal when I wrote this code. This
is what I wanted. Them to be identically on top of each other. Also this
tool can help you with those kinds of things —
“extend gridlines infinitely” — maybe you have a way in which you're trying to
line something up that's up on the top of the page with things that are further
down on the page, and you can extend these lines further along, and that will
give you a way to see what's happening all the way down the page. This is maybe not
a great example for it, but you can see all kinds of places where you might want
to extend the lines further and make sure that things line up in the way that
you want them to then. The other thing that I want to show you is displaying grid area [names].
To do that I'm going to go over to Rachel Andrew's work, Grid By Example, a
really great website you can check out all these examples of different parts of
the CSS Grid specification and what each of those can do. So we're going to find
one for grid areas. Defining Grid Areas. I'm going to click here and say
"View example as full page". And I'm going to zoom in a little bit make this bigger.
And inspect the element. And I can see here... the same Grid [tool]. You know I can make it a
different color. (Somehow I really like making these different colors.) Let's not show
the lines the whole way. Let's just show them in that particular... what is this?... .
"Display grid areas". I can click and see the Grid areas that have been named
because Rachel is using — if you look over here on the Rules, you can see she's
using this `grid-template-area` syntax. Where she's defined between this
opening quote and this closing quote, she's defined the first row where the first
cell is going to be empty. She's said empty by using a bunch of
dots. And then `header header` which names this as "header", and names this as "header".
Then the quote closes, and there's a space, and a new quote which says: hey I'm
going to define the next row please: “sidebar content content”. Which means the
name this “sidebar”. Name this “content”. Name this “content”. It can be be super
helpful to see these particular names, and see whether or not we've succeeded at
naming things the way that we wanted to. So that when we then place these
particular items, they get placed in the places that we
expected them to. So in fact we can turn on areas. We can see, oh yes, we did in
fact name them the way that we expected to name them. Yeah. So check it out. You
can go through bunches of different examples and see like: oh how is it that
this got built? How is it that things are working here? It really can be super
helpful especially. When you have more than one grid on the page like this one.
For example, as you can see, I've got five different grids on the page. And I can
kind of jump down to that particular grid, and see it. So check it out. Let us
know what you think of this tool. I definitely want to hear from you so we
can incorporate your ideas and your feedback. We have a long list of ideas
that we want to implement, but of course there's always sort of a shortage
of time, and there’s “not enough” engineers — so hearing from people as a way to know
what tools everybody needs the most can help us make sure we set the priorities
correctly. And also you'll probably point out things that we haven't thought of. Ways
in which this tool is really helping you, or ways in which it's really confusing
you, or isn't really quite what you need yet. Or maybe you run into a bug. Maybe
you have a particular example where things are different, and we haven't yet
covered that particular kind of example. We want to make sure that it works in
all use cases, so definitely let us know. You can ping me Twitter DM, or
jensimmons.com/contact. Or there are lots of ways to find me. Let me know what
you think, so we can incorporate your ideas into this tool and make it really
awesome. Check it out in Firefox. In Firefox Nightly for now.
The CSS Grid Inspector. Thanks!