Introduction

[00:00:00]
>> Hello everyone, my name is Jen Kramer. I am the director of Learning Design and Technology at AnnieCannons. And this is Grid and Flexbox for responsive design here at Frontend Masters. I'm thrilled to be presenting this third version of this course. The first time I taught this was in 2017.

[00:00:18]
Right back when Flexbox was really the focus of what we did for web page layouts, we were just starting to dig into grid as a thing to layout web pages. Now that it's 2024, our focus really should be on Grid for laying out web pages. Flexbox is gonna handle a few exceptions to the rule and so we're gonna talk a lot about that in this course.

[00:00:40]
The website for this course is at grid-flexbox.css.education. On this website, you'll find all of the background behind the course, and you will find down here a listing of all the various chapters with links to all of the CodePens that we'll be working on in this course. This course does focus pretty much on CodePen as a way for learning Grid and Flexbox and also container queries, subgrid, and responsive images along the way.

[00:01:10]
And the reason why is because we can just jump right into CodePen and see what we're doing while we're coding and there's nothing to install and nothing to set up. We won't be building whole web pages in this course will be building parts of webpages so that we can understand how Grid and Flexbox really work in smaller environments, all right.

[00:01:28]
So if we get started here, we're going to start with chapter one. If you wanna click on that link there, and you'll see here I wanna talk a little bit about the history of responsive design and. Kind of remind you of where we've been so that we can learn where we're going.

[00:01:43]
There are slides that are here available for you if you wanna download them and follow along. And we'll refer back to this deck a couple of times here in this course. So I started in this industry in the year 2000 and so it is now year 24 that I have been coding for the web.

[00:02:00]
And when I graduated from my master's degree program in 2001, the state of the web was really maybe 5% of the tools that we have today. We were using tables for layouts. We were using FTP to move our files up to a web server and there was really almost no CSS support at all inside of web browsers.

[00:02:21]
CSS has always kind of been behind the curve in terms of support inside of web browsers and at that particular point in time our web browsers were a big deal. You had to download them, you had to install them, you had to consciously update your browser and so things were always just very behind in terms of everything that we had in 2001.

[00:02:40]
Wait, we got to 2008 fortunately, we've made some progress. We finally ditch table-based layouts and we were looking more at float-based layouts. A lot of our building was done inside of content management systems like WordPress, Joomla and Drupal. And jQuery was the hot thing of the day because jQuery dressed a lot of issues for us.

[00:03:01]
Prior to this if you were working with regular JavaScript browsers had different ideas of what the Document Object Model looked like. You had a Document Object Model for Netscape and you had a different one for IE so JavaScript was just a nightmare and a disaster. One of the big problems that jQuery solved was that we finally had a tool that was actually cross browser compatible.

[00:03:20]
Of course, Netscape was mostly gone by then we were back to Mozilla at that point in time. Once we get to 2010, we wound up with the iPhone for the first time the iPad was shortly coming along there. And Ethan Marcotte wrote his famous article from A List Apart that defined this concept of responsive design.

[00:03:42]
And it consisted of a flexible grid-based layout, media queries and images that resize. And what was radical about this idea at that point in time was that there was a single code base that could address all of the devices all at once. Prior to this we, separate code bases usually something like jQuery Mobile.

[00:04:03]
Which would build the entire mobile website and then you'd have your separate desktop website, two separate code bases frequently even if you had a database behind it that would serve up different content to those different form factors. It was still kind of a nightmare to keep things in sync.

[00:04:18]
So responsive design helped us put everything behind one particular codebase. And we started to think about responsive design this way, which was starting with our grid-based layouts. So in 2010, we did this with float-based layouts and floats for layouts is truly a hack. And it was it's kind of a nightmare, and no one really understands how floats work.

[00:04:43]
They forget that you have to clear if you float. And so Bootstrap wound up addressing that issue really effectively. People were so happy that they finally had something that could work for layout and they didn't have to try to figure it out on their own. Between 2014 and 2017 the grid-based layouts were largely coded with Flexbox.

[00:05:02]
And we were still kind of obsessed with Bootstrap at that point in time. And that was because Grid was a new spec and it was still reaching some of the web browsers. By 2018, we had support for Grid pretty much in all of the web browsers at that point in time.

[00:05:16]
And now moving on, we've got support for size queries, container size queries that's at February 2023. And subgrid got support in all the major browsers by September of 2023. We are at a point in time where we need to start pivoting and starting to use some of these newer tools that really were designed for laying out whole web pages like Grid.

[00:05:39]
The other part of this is images that resize. And there was a whole long stretch of time where this was a disaster but today we have solutions that are solid, stable, cross-browser compatible and they're in the HTML of all things. So the picture element is one of these ways of creating images that resize and also sizes and source set.

[00:06:03]
Finally, we have media queries. I always like to point out with media queries because people are generally familiar with them at this point in time. They're familiar with min width media queries or max width media queries where we're querying the size of the viewport. But there's also various other kinds of media queries as well.

[00:06:18]
You can test on height, aspect ratio, orientation, colors and various kinds of print characteristics as well. These have continued to grow over time for media queries. How does Ethan Marcotte's definition of responsive design hold up today? Well, we take typically are doing our grid-based layouts using various kinds of CSS frameworks.

[00:06:44]
We're using Tailwind a lot of the time, Bootstrap to a lesser extent some people are starting to use CSS Grid. The images that resize often get forgotten. It is important, especially if you're gonna use some of those great big giant banner images that are very large in file size that we use images that resize.

[00:07:03]
For some reason, developers seem to be trying to avoid media queries. I'm not entirely sure why that is. They don't add a lot to the performance of the web page and they are pretty straightforward to manage. But I think a lot of people think that media queries are defined by your framework and that they can't be changed perhaps.

[00:07:21]
And then of course, there's always the attitude that container queries and subgrid will solve all of our problems and we will live in a perfect world of rainbows and unicorns. And I'm here to tell you that that's never going to be the case, nothing is ever perfect, okay.

[00:07:36]
So consider these as guiding principles as you start to think about laying out web pages. That we wanna start with CSS Grid as our first tool in laying out web pages. Sometimes we'll use Flexbox and we're gonna talk about when that is appropriate but Grid should be the first tool that you reach for.

[00:07:54]
As you think about the images that resize consider using the picture element, sizes and source set which are attributes that go inside of the image element. And then you can start thinking about media queries and container queries. We'll go into the difference between those and how they work later on in this course.

[00:08:11]
Let's talk about this Flexbox versus Grid thing, okay? That's not Flexbox and Grid up there, those are developers that are hashing it out up there on the screen. Flexbox and Grid are two perfectly good specs, they're totally awesome, they are modern, they're up to date you should be using both of them.

[00:08:28]
But we seem to have a lot of conflict in the community about which is better, and which should we be using, and which one should we leave behind. So I made a little bit of controversy here recently on one of these social media platforms when I said that it's 2024 and we should be teaching students Grid from the start.

[00:08:48]
We shouldn't start with Flexbox we ought to start with Grid. Because Flexbox is really an exception for most layouts. Grid was designed to lay out web pages we should be laying out web pages with Grid. And of course we had people who had comments to say about that particular kind of stuff.

[00:09:06]
So this particular person thought that there's more work involved for varying viewport sizes using Grid versus Flex and shifts in layout construction. I'm here to tell you that that is in fact not true. I'm sorry that you were not taught appropriately how Grid works. Flexbox and Grid in terms of their HTML markup can be extremely similar.

[00:09:29]
It's the CSS that's gonna change. We're gonna take a look at that in a lot of great detail. If you think about Grid and all the things that it can do, by the way, it does a whole lot. I'm not even gonna be able to cover all the things that Grid does in this particular course.

[00:09:44]
Those things tend to be where you're trying to use Flexbox, Flexbox does a much smaller subset of that. And there are some things that Flexbox does better and does uniquely that Grid does not do. So basically, what I'm suggesting here is that where you can go either with Grid or Flextbox go with Grid.

[00:10:03]
Where you need to use Flexbox because that's your only choice use Flexbox, okay? So that is all I have to be saying things change over time. Your bootcamp taught you Flexbox in 2015 because of cross browser compatibility to just the way it was. Bootstrap use Flexbox because of browser support.

[00:10:23]
Grid was designed for web page layouts. HTML tables, floats, Flexbox were never designed for web page layouts. Grid is the first tool that was designed for that. And sorry for the last 20 years of hacks before this, who knew that we wanted to lay out web pages? But finally, we have addressed this particular issue with Grid