Original subtitles

Material UI is built from the core to encourage consistency across platforms environments and screen

sizes by using uniform elements and spacing.

This means it is set up to precisely fulfill our responsive design goals that we set out to accomplish

and they provide us with some documentation for how to do so.

I'm here at the material UI documentation page on guides here at responsive UI and this is their central

location where they provide a jumping point into all of the other responsive design topics we'll be

going through all of these throughout the course.

But right now I just wanted to start with the two that are going to be most immediately relevant for

finishing up our header so we've been talking a lot about responsive design and using media queries

and changing our styles.

But let's take a look at what that actually looks like and what that actually means.

So if we come over to the break points section which I actually have open in this tab right here the

break points API is what goes hand in hand with media queries to determine win which styles should be

applied material UI does a good job of breaking this down for us and making it easy for us with their

breakpoints API so here they provide each breakpoint a key there is associated with a certain screen

size.

Here you can see all of these screen sizes listed starting with extra small as 0 small as 600 medium

960.

Large 12 80 an extra large at your nine hundred and twenty pixels.

These are all actually set on the default theme as well.

So if you come over here to the default theme and I'll open this up in a new tab and this is the default

theme object that we've looked at before but now if you come over to the very first object breakpoints

you'll see here under.

Keys are extra small.

Small medium large and extra large keys.

So looks like we could add to that as well if we had wanted to.

But you can also see the values.

And here is where you set which key is associated with which pixel value of screen width.

The other values in the breakpoints object are the functions that specify which range of values you

want to style.

For example the up function specifies ranges they are above the given key.

The down specifies the range below the given key and between and only do the same thing as well the

with function here is actually a function that gets the current width of the screen and what breakpoint

it is at.

In case you need to use that information in your logic so those are the breakpoint values that we have

built in for us.

And you can actually go in and change if you want to or you have really specific custom situations but

we're gonna go ahead and just stick with what they've provided because I think it does a really good

and comprehensive job so we'll go ahead and close out of this tab and head back to the breakpoints tab.

And if we scroll down further here we can see where it talks about the CSX media queries.

This is where we're able to use those functions that we just saw in the default theme within our says

styles.

Here you can see in this example that the padding is being sent but underneath the padding we are actually

setting a different background color for the small and down the medium and up and the large and up options

so that may be slightly confusing at first but it'll make more sense if I actually just re size my screen

you can see the little brick here has a key.

So green means we are on large or up and my screen.

This is actually an extra large and if we start to shrink the screen we'll continue to see green until

we get down to where we are blue now.

So we are now matching the medium and up option so we must have now entered the medium range and if

we continue shrinking the screen you'll see a switch to the red option.

So now this is going to match all these styles for small and down.

So if we continued to shrink the screen all the way down we will continue seeing the red balk.

I'll go ahead and put my screen back to where it was and you can see the green brick has now appeared

again so this should start to give you an idea of how we can use this theme and Dot breakpoints syntax

within our own application to create the various styles we want using different combinations of the

down and up for different keys you're able to set very specific rules only for the different sizes that

you want I personally like to use mostly the down function and find the staggering those creates a really

easy to understand and convenient styling system.

If we keep scrolling down past this example we'll see our javascript media queries.

And here they use the with with function which actually is depreciated.

You can see here that this will be depreciated for the use and media query hook and I'm actually going

to get into that for just a second.

So let's skip that and come down here and these are just showing.

This is the themed breakpoint star only media query.

The themed break points top down media query so it's showing you those functions.

But if we keep scrolling down all the way.

Actually I think it is on the next page.

So let's just go on over to.

If you want to follow along you can scroll up and here where it has the use media query page.

That is the page I have open here in the next tab.

The news media query CSX media query hook for react.

This is a really great little package that the material UI team has put together for us.

It's very small.

It's a very fast and it even supports a server side rendering which is always great.

And like I've said we'll get into later in the course so this hook essentially detects which screen

size we're on and based on the key that we provide it returns true or false depending on whether or

not these screen matches the media query we can then use that true or false value to conditionally render

different content depending on which screen size that we are on.

You can see an example of this here below where they are importing the use media query hook and using

it to set a constant called matches using the used media query and providing a media query.

So in this case the main width of the 600 p x so six hundred pixels.

So this is a direct media query that they are entering.

So you can enter any valid CSX media query here and this will return.

Like I said true or false depending on whether the screen currently matches you can see them or render

the result of that here which at the moment is true because I do have at least a minimum width of six

hundred pixels.

We can see if I shrink the page keeps shrinking and things will jump around and at some point you can

see we get to where the minimum width of six hundred is false and so it does not match anymore.

And that media query is accurately detecting that so we can go ahead and resize this back up and you'll

see the matches go back to true.

So you can see that does update in real time as we adjust the screen and so that is exactly what we

want.

You can see an example below where instead of providing an exact CSX media query they actually just

provide the material UI breakpoint key this again just encourages the consistency that they provide

for you throw all of your functionality in this example.

They also use another hook called the use theme hook and this allows you to set the theme to a constant

giving you access to your theme within your actual component not just within the styles.

This enables you to then call their theme breakpoints function and use their breakpoints API with the

use media query hook.

So this is actually the approach that we're going to use to determine whether or not we need to render

the tabs across the screen for our header or use a draw to create a mobile tab system that will start

getting set up in the next video.