So we've talked a little bit about layout using CSS.
Now a really important concept in terms of layout is how it should change depending on the size of the
screen,
because these days there are many different screen sizes: desktops, laptops, iPads, mobile phones
and we want our website to look good on all of them.
And in order to do that, we need to make our websites responsive, so it responds to the changes in the
screen size.
The next time you go on to the web, I want you to try and change the size of your window.
So grab one of the sides or grab one of the corners and simply move it so that we change the width of
the screen.
And what I want you to notice is how the website responds to that.
Notice how here in my full width you can see all of these things up here, the different parts of the
navigation bar.
But when I make this a little bit narrower, you'll see that at some point it suddenly will disappear.
And where has it gone?
Well, it's gone into a menu now.
So if you're on an iPad or if you're on an iPhone where there's not enough width to display all of these
items, then it gets collapsed into a little menu system, which is really neat.
Right?
And at various points of the width, for example, right about here, you can see the navigation bar
collapse and go into a menu.
And then if we go even further, you can see that search button even disappears, so that on mobile
maybe you're not able to use that search bar very well.
So they've hidden it on this particular size.
Have a look at your favorite websites and see how they're designed to be responsive and come back and
I'll show you how we can do it as well.
There are four main ways of doing this:
one is through the use of what's called Media Queries,
and then there is CSS Grid, CSS Flexbox,
and you can also get really good responsiveness by using external frameworks such as Bootstrap.
So we're going to talk about all three of these in this lesson.
The first one is the media query, and this is essentially something that you put in instead of a selector
in your CSS.
As you remember, this is normally the part before the curly braces where you add your selector, your
.class or your # ID, but instead we use an @ sign and then the word media,
and afterwards we have some brackets and we add in a breakpoint.
This essentially says that look inside these braces to apply the CSS when you are displaying the website
on a screen that is below or equal to 600px wide. Here we've set the max-width to 600 and everything
that is up to that size will have a different CSS, which we can define in here.
And this is how a media query works.
It's pretty simple.
We can define various different widths. Coming back to here,
notice how when we go from this width to this width, there is a breakpoint right there that changes
the display and tells the navigation bar to have a different CSS layout.
So we could do exactly that using media queries.
Now, another common method for creating responsiveness is through something called CSS Grid.
This is a little bit harder to understand, which is why we're dedicating a whole section to teaching
you about it.
But it also means that it's a lot more flexible.
So you could create any of these designs, but let's say we pick one of these, for example, this layout
right here, and we want to do that on our website.
Well, we could use CSS Grid by simply creating a div that contains five divs.
So notice there's five squares here.
One, two, three, four, five.
And each of these divs are given a class called ".card," but the containing div gets a different style
and we apply the display grid to the containing div.
So this is going to be applied to this one right here.
And remember, previously we learned about display and we saw how it could be inline, it could be block,
it could be none,
and in this case, if we set it to grid, then we're basically saying that we're going to use this system
of CSS Grid to do the layout.
And CSS Grid is a pretty simple system where you can define how you want the columns and rows to be
laid out.
If we go to the next line here, let me talk you through it.
So here we're saying that we're going to have some columns in our grid where we're going to have two
columns.
So there are two bits here that I've defined and they're both one fraction (1fr).
What this says is we want two columns, one and two, and on our website we would create these two columns
one and two.
And what the "fr" stands for is to make it an equal fraction.
One and two basically have the same width and it's just divided the screen into two columns.
The next line, if we look at this, says we should also create some rows in our grid.
And because there are three different values here, then we're creating one, two and three rows and
we're creating these rows a little bit differently from our columns.
Now, we could do the same thing,
we could have three equal size columns, or we could use fractions to figure out maybe one has to be
twice as big as the other, but we can also define it simply in terms of pixels.
And for rows you'll often see this.
So what we said is that the top-row should have 100px in height, the next one should be 200px
in height and the next one is also 200px.
CSS Grid, as you can see, is an incredibly flexible way of creating very complex layout very quickly.
And if we go to the next line, this gap basically says that there should be a gap of 30px between
each of the rows and the columns, which you'll see right here and right here.
Now, finally we can change the first div here, which has a class of ".first" which we target right here
so that we make the column span two columns.
So now instead of just being a single column like the rest of these, which is one column width, this
one is spanning two of the columns on our grid, and our entire website only has two columns.
So it makes it go full width
basically, to achieve this layout.
Maybe we'll put a header in there, maybe we'll put a big heading, maybe we'll put some big text,
etcetera.
And this complex layout is very easily done using just five six lines of code using CSS Grid.
Now we're going to be diving much, much deeper into CSS Grid and I'm going to be showing you and walking
you through a lot of the different features,
but we're going to be dedicating a whole section to it.
So don't worry if you don't fully understand it
right now.
I just want to show you quickly how it would work.
Similarly, I want to show you another powerful system that's often used, which is called Flexbox.
And this, again, is a big system which we're going to dive deep into
but for now, I just want you to get a quick overview and a brief understanding of how it works.
If Grid is something that applies to 2D layouts, where you've got columns and you've got rows, then
what Flexbox is really good at is allowing you to create 1D layouts, whether if you want everything
laid out as boxes on the horizontal or if you want everything laid out vertically as boxes on the vertical,
then you're probably going to be using Flexbox for this.
So here's another simple demo.
We've got a div container that contains four divs and you can see them right here: one, two, three
and four.
If we make the parent container, so similar to last time where we made it use a display of grid, but
instead this time we use a display of flex.
Then we're saying to the CSS that we're using this Flexbox system.
And what this system then allows us to do is to set each of the divs inside the flex container.
So notice we're targeting each of these cards here and we can give them different settings.
Let's say that for all of them, by default, we want them to have a flex of one.
So what this does is it makes each of these cards have an equal width distribution.
So divide up the width equally between these four cards.
So one, two, three and four.
Now I've added a fixed height of 100px, so each of these cards should all have 100px in height,
but then I've gone and done
some customizations to the default layout that's set out here.
What I've done is I've added some extra classes to the first two divs.
This first div has, instead of a flex of one where it has equal width to everybody else, I've set
it to have a flex of two.
So what this means is this is going to be twice the width of each of these unmodified ones.
And then for the second card here, I've set the flex to be 0.5.
So this should have half the width of the normal cards.
And by using that flex property, I've managed to set up a very complex width ratio to create this particular
layout that I wanted.
And as you can imagine, if we were working with floats, margin and all of these things that we've
learnt about, it would be possible, but a lot more complicated to achieve this.
And you can use this really flexible system with Flexbox to determine how you want the layout to be
laid out horizontally.
So maybe you could have a navigation bar on the right, which is flex of one, and then you have a main
content that's flex of three.
So then this is three times the width of this one.
But alternatively, you can flex in this direction.
So maybe you want a heading section that is a flex of one, and then you have the main content here,
which is a flex of three, and then you have a footer which is also a one.
So then it's going to divide up the total height that you have on the web page.
So in this case, we have five units and then divide it up according to what you've set for the flex.
So again, this is a more complex layout system which we're going to dive into and we're going to learn
more about,
but essentially in terms of the gist, it's just about dividing up the width or dividing up the height
based on these ratios that you provide.
And because everything is a ratio and a percentage, then that means it is by default responsive,
because if this width changes, then everything is going to change proportionally.
So none of these will have a fixed width like say 400px or something, but instead, it's going to
work that number out based on what the total width is because it's a percentage of the total width.
Now the very last method of creating responsiveness that I want to talk about is using the Bootstrap
framework.
And the reason why it's called a framework is because it's external.
So it's not something that's built into CSS like Grid or Flexbox, but it's actually something that
we have to bring in so other people's code that we're going to use.
And essentially what they've done is they've defined a whole bunch of classes in their CSS.
So they've written an extensive amounts of CSS and they've put different rules for different selectors.
For example, you could have something called card,
you could have something called row and you could have something called container,
a nd these all will point to some CSS code inside the Bootstrap container, which has predefined layout.
For example, here I've got three cards and notice how they've all got rounded corners and how they
have a specific type of font and all of that styling is applied automatically to your code by simply
putting in the Bootstrap framework and then adding a particular class name.
Now in terms of responsiveness, they also have a sort of flex system because Bootstrap is in fact built
on top of Flexbox.
Now, this system is a 12 division system.
So let me explain this.
If the full width of your website can be divided into 12 equal portions, so then you have one, two,
three.
One, two, three.
Now, if you count these, you'll find that there are 12 little sections and they divide up the entire
website.
Now you can say if I want a particular div that is going to take up half of the width, then I can use
this class called ".col-6".
So column-six and it's basically going to take up six of these columns right here.
So six of these little sections.
And as you can see, this first card indeed does take up six of the sections.
Now I can create other cards in here.
So this one's going to take up two of the columns and this one's going to take up four of the columns
and added together they add up to 12, which means that it's going to take up the entire width.
So we've now got three cards taking up the entire width of the website,
but as we resize the website, then it's going to respond.
So a col-6 is going to be a 50% width.
If the width was 1000px, then this one is going to be 500px wide.
If the width was 2000px, then the width will be 1000pv.
ecetera.
And this is not only really good for responsiveness, but it's also really good because I mentioned
we can get styling brought into our website really easily just by using some of the pre-built components
that comes with this framework. Similar to Grid, and Flexbox,
we're going to be doing a section on Bootstrap as well so that you can learn more about this system
and all of the features that are available to you once you understand how it works.
But these are some of the main ways that we can create responsive websites very easily in our web design
using CSS.
In the next lesson, I'm going to dive deeper into media queries because it's a relatively easy to understand
system and it's not as complex as some of these three, which we'll need to dedicate an individual section
to.
And quite a lot of time too.
Now, at this point, you might be thinking, well, there are all these different methods and they
all seem great, but which one is the best and which one should I choose?
This is often such a common question I get from students, and I want to say to you that there is no
such thing as the best when it comes to any sort of programming.
These are just tools and they could be tools like a hammer or a chisel or a drill.
They all have different specialties.
They're all good at different things, basically.
And as you'll see in the coming lessons, where we get to learn a little bit more about each of these
different styles of creating responsiveness and adding layout to our websites, they all have strengths
and weaknesses, so keep an open mind and all that you need to know for this lesson is just to realize
that there are many different ways of creating responsive websites, and these are the most common ways.
There's quite a lot of demo code that I showed you in this lesson, and I want you to be able to play
around with it because you're really only going to learn code when you actually try and make mistakes
and change things and mess with things in order to see how it works.
So download 8.2 Responsiveness from this lesson and then open it up inside VS Code.
If you go into the index.html and show it as a preview, you can see all the different ways that we
can create responsiveness and then go to the media-query.html to see how we've used media queries in order
to achieve this kind of breakpoint responsiveness and then maybe go back and try a different method
like CSS grid and see how our grid... it's responsiveness.
But again, done using a different method. And the same with Flexbox, or Bootstrap, and just examine some
of the code and play around with it or change things.
I know right now you don't have complete information because we haven't gone into this in detail yet,
but just get a feel of how it might work and see how is its responsiveness, test it out.
So I'll leave you to do that.
And then once you're done, head over back here and we'll go into the next lesson where we're going
to learn more about media queries in detail.
For all of that and more, I'll see you there.