Making pages responsive part one

Till when uses what is known as a mobile first approach to the science. And that simply means we start from the smallest screen we wanna support, create styles for that screen, so add classes for that screen, and then modify those classes or those styles as we go up in screen size. Now, this is what our screen is looking like right now. This is obviously on a desktop.

How can we see if our styles and our layout is looking good on a mobile? Well, all modern browsers ship with our development toolbox that we can use. So if I am to say, right-click Inspect, we get this menu here and we can toggle this device toolbar. I have set this to be iPhone 12 Pro. You can choose whatever you want to target. I'm just going to zoom in a bit more here so it's easier for you to see.

And now we are targeting the width and height of our mobile or like a regular mobile phone. So this is what we're gonna design against, or this is what we're gonna use to verify that our layout is looking good on mobile size screens. Great, let's begin styling. So we jump into base layout. And in here, we're gonna add some styles to the body element, where we're gonna say class, min, h, screen.

We're gonna say bg-grey-700, then say flex, you're gonna say flex call, and then we're gonna give it a save. Now, min-8 screen simply says the minimum height of the page has to be the screen that is on. We didn't say that the background should be a gray of 700, till when it exposes a bunch of different colors from the default, as a default, and you can then use varying

scales of those colors. You can make them darker, you can make them lighter, and it goes from 100 to 900. Next, we use Flexbox. Flexbox is a one-dimensional layout tool that is designed to lay out items in a single row or a single column. It's really good at distributing space along an axis or one axis at a time. There's also Grid.

which is two-dimensional and allows you to control rows and columns simultaneously, which is mainly used for complex layouts, where you need to place certain elements in precise positions. You can generally use whatever you want. There are opinions about when you should use what. Generally, if you just have one dimension, use Flexbox. If you have more complex layouts, use Grid.

I'm gonna show you when we style the nav and the footer that you can also use GWT for symbol elements even though technically Flexbox is more correct. I think the point here is just to try and understand both Flexbox and GWT because they are very important and very strong tools to actually build layouts. Anyways, let's jump into the

Browser here, give it a refresh and see if anything has changed. Nothing has changed. Nothing has changed. I'm gonna give it a save again here. And I think actually what is happening is that I need to go out here and say fuser k 8080. Yes, so sometimes when you use these tools like just file and we go the error,

if you're using AirRide to hot reload, they get stuck in the process, so we don't see any updates. All right, I'm gonna run the development server again in another terminal. Let's go in and see if we get changes. And now, background is completely gray. It's not looking good, but at least our styles are getting applied. Cool, let's deal with the nav bar next. And what we're gonna do is we're gonna say class, and we're gonna add a bg gray 600.

You're gonna say text white, and we are gonna say our padding on the y-axis of four. We're gonna use grid, and we're gonna say justify, justify center. Give that a save. So again, we use a different version of grid. That's a bit lighter, so we can differentiate between the main body. We say the text should be white, and then we add padding. Padding pushes inside of the box, and margin, that is the

other option we have pushes against other elements. So it pushes out whereas padding pushes in as a decent mental model to have. Then we say that this should be a grid container, making all its children. The nav elements inside it are a grid item that can be arranged in both rows and columns. And then we say, please justify or please put this in the center of the page.

So if we jump back now, give it a refresh, we can see we have a bigger box now for the nav element. We have the home element in the middle, but nothing else. And then of course we have the white color. What do we wanna do next? We wanna do the nav element. So we're gonna add a class again, and we wanna say cursor pointer, and we wanna say font bold. We go in to the nav bar, refresh,

Again, we should have cursor pointer and we should have front bolt. Do we get front bolt? We do not. Let me try one more time. And now we get it. So we're just making the elements stand out a bit more. Next we have the footer. So let me just add a class again.

and it's going to look very similar to the nav element. We just want to say that the height should fit the content, so that is hfit. We're going to use bgqa600 one more time, text white one more time, padding y, four again, and then we're going to say grid, gap one, and again justify center. The only difference here is we're using this gap one that simply just adds some spacing between the elements because we have the bleeding edge and then we have the span.

We also want the span to have class text center. Let's go into the terminal, give it a refresh and then actually need to zoom out so you can see what happens. And you see now we have the bleeding edge title in the middle and we have the copyright in the middle right below it and there's some spacing between the two elements. You could use textbox for this and it will be perfectly fine. You can also use squared. Again, it's also fine.

And yeah, we touched upon what's happening, right? The gap here simply just add a small gap of 0.25 rim between the elements. Great. So this is actually the base layout of what we need to deal with in here. Next time, we're gonna do the home page component. And in home.com,

Timble, we are gonna start by modifying the home component. We're gonna say class one more time. We're gonna say container, and then we're gonna say flex one. Container is just a helper class that limits or restricts how much the content can grow in width. So it becomes easier to design across larger screen sizes. This is always not a problem right now when we are on a small screen, but when we get up to bigger screen sizes or ultra-wide screens, it's nice that we have a confined area that we can design against.

And the Flex1 here is simply telling the main element to take up all the space available because we have told the body to take up at least as much height as the screen is currently on. Fairly straightforward. Now we need to deal with the hero. And we can begin by deleting these two breakpoints here and removing this style attribute and say class.

And inside here we are gonna say MY16 flex and flex call. Now instead of padding we are now using margin and margin pushes against other elements and here we push against on the y-axis. We could also do MX which is gonna be on the x-axis or we can leave out the X and the Y and it will push in both directions. Next we also wanna say justify

Center, items, center, and PX4. So we add a little bit of padding inside of the box. Let's jump into the browser, give it, let's go a little bit up here and give it a refresh. We can see we have some more spacing and we have everything centered in the middle of the screen. But we can't read what it says. So let's go in and say class on the H1 element here, text white. And we're gonna increase the font size and we're gonna say this should be font bold.

I also want to touch upon the paragraph tag. That should be text LG, which is smaller than Excel, of course. And we want to have text white. We're going to use this slash 80, which will take some of the opacity out so that the paragraph tag is less visible compared to the H1 tag, which is the one we want to be most prominent on the page. If we go back now, give it a refresh, and you can see we have

the bleeding edge standing out a bit more compared to the subheader. Great. Next, we need to deal with the socials here. And we start again by removing the style, tag and saying class, grid, justify, center, close it off. And then on the on-order list element, we say margin button 16, flex.

and justify between so that we add some space. We push the elements below it, and we say that it should be a flex element that should push on the row. And then we say, please put equal amounts of space between all of the elements inside of this on order list. Now, the social link component here, we can say class, put some margin between

each element, add a border and make it rounded. Let's say BGGray 200 and put some padding as well on the inside of the box. And that is actually what we need in here for now. Let's jump into the browser, give this a refresh. And you can see again, we are pushing against the latest article section and we have a little bit of spacing inside of the buttons and they stand out a bit more. They're still ugly, but

That will change when we add our theme. Great. Final thing we have is this article card and the pagination and this latest article section. So we begin by simply styling the article card where we want to say class, border, rounded,

all of these classes you have seen before, BTBase 600. And what I want to do different here is that since we have this published ads, I actually want to say up here, I want to add our paragraph tag, class, this is text gray 300. And it's going to make it small. I'm going to say put some margin on the bottom and then close it off.

say article, published ads. We're gonna use the format method that's available on the time that time type. We're gonna pass in 2006, 01, 02, so that we have a nice little date on each card so users can see when they were published. Then we are gonna turn this thing into an H3, and you might have noticed that we've been using H1 and H2, so we're just creating

a hierarchy in the headings on the page. So also search engine can easily navigate what's important on the page. Let's add text gray 200 and say text for key. Remove these two. And we have the excerpt, but we again say text SM, text gray, text gray 300, MB4, there we go.

Now you can probably see we are repeating ourselves a lot. I'm using the same classes and you might not be familiar with them, but all of them are in the documentation and you just need to use them a lot. Look it up and this will start to feel a lot more familiar to you. Now, I actually want to create another component here because we have this anchor tag and we also have this anchor tag. We might as well extract this into a component

and then start it one time and then reuse it on the article card and on the pagination. So let me grab this and let me say button link that takes in an href and the title of string. And then we simply just replace all of this with Timbal Save URL href. And then we take all of this and replace with

title then in here we can save button link pass what we had before and read me there we go and we need another parentheses we do not need another parentheses then we add some symbol styling that's very familiar to the other styling we have added so bg gray 300

border rounded, pdx4 and py2. Go back to the browser, give it a refresh, and now our cards here are actually looking quite decent. Let's then deal with the pagination where we want to have these button links instead of the old anchor text. So we can just copy paste,

Grab what we have here inside of Timble Save URL and replace this. And we're gonna say previous page. Copy that, put it down here, remove this, grab all of this and replace this and say next page, remove this, give it a save.

Let's jump back one more time, give it a refresh and go down. You can see now we have a much more visible button, but it's still not looking great. And that's because we need to deal with the actual section of latest articles. So in here, again, we will say class, and we will say grid gap two. Put some padding.

on the x-axis and close it off. Let's see what that gives us. Okay, looking a little bit better. Then for the h2 here, we wanna say font bold text to Excel and text white. And now what do we have? Okay, this is starting to look a bit more like a proper block. But,

The article card is not really standing out from the background. That's because I have written base instead of gray. Let's see now. Yes, much better. I just wanna deal with this next page here that is a little bit awkward looking. And to deal with that, we can say class, what are we gonna say? We're gonna say flex. We're gonna say justify.

And let's try that. Yes. Let's just add some margin on the y-axis of four. There we go. Now we have some breathing room between the components and the different elements. And if you do the next, we also get the previous page, but let's actually add some, should we,

Can we add like maybe Gap2? Give that a refresh. Yes, now we have. And if you have nothing, it's fine. Great. All right, so that's the home screen. Next, we just need to deal with the article screen, and we are looking good on mobile versions. So one thing we need to deal with before we start designing the article page is that we need to deal with the concept of typography.

That's because inside of our article element, we are just gonna be outputting a bunch of the converted markdown, which is just a bunch of, again, HTML. Instead of us creating specific styles, Tailwind has a plugin for this that is gonna be, that's called, let me just grab it. Yeah. That is called Tabography. And since we are using the,

Binary, this plugin is already enabled for us, and this just gives us some helpful classes that makes it a lot easier to have this type of content look really, really good on a screen. So in our article.temple file, we can go down to our article component, and we can say class. Again, flex one, px4. And let's go into the browser here, give it a refresh and jump into an article. Okay.

not amazing yet, but if we go into the article hero here and actually remove this style tag and say class, we add some margin on the y-axis, we're gonna say grid and we're gonna say place items, center, put a gap in, then let's no longer have this title, let's

Update the H1 to have text white, text center and text to Excel. And again, let's use the format method here to say 2006, 01, 02. And let's just keep the published add and say text center and text white. And let's use the slash again to differentiate from the header.

and take space to make it smaller. Let's go in and see what we have now. Yes, much better. So this is actually starting to look quite decent. But we still have some overlap here from the code example that makes the screen overflow. Great. And this is where the plug in we just added comes into the picture. So again, I'm going to say class.

We're going to add this class called pros, which is exposed through the terbography package. We can then say pros, headings, because we have H1, H2, H3, et cetera on the page. And we want those to have the same style, at least for now. We can target specific headings. So we can say our heading H2 text should be white.

whereas an H3 should be white slash 80. So it actually creates some visible difference in the headings. But for now, we're just gonna have all of them be white. We also want to have the honor list be white. So all the honor list items be half of the text white color. And I also know we need to have pros strong. So we can say text white.

So all the strong text is also the white text color. OK, let's try and give this a refresh. And you can see we actually have a lot of space added here. And we no longer have this overflow. And we should actually have the strong text be colored. So why don't we let me try and restart the development server?

use a K88 TCP, clear, and run it. We still don't have that styling applied. What is this? Oh, this is code. Okay. All right, let's jump into article for the view. And let's see if we can add prose code, say text white.

Let's see if that does the trick. It does. So the library or the plugin exposes a bunch of these pros slash specific elements that we can target and style in specific ways. But now our page is actually looking quite decent. We just have a bunch of space here. And that is because we have a paragraph tag that is not visible.

Do we need to add something else? We probably need to add prose P, say text white. So the paragraph text are also the correct color. Yeah, there we go. Now we can see all the elements on the page. I probably just want to add a bit of margin on the bottom. Let's say margin 10. Great, some breathing room at least.

Now our page is responsive on mobiles. It's looking quite decent. We still need to add our theme and apply proper colors for this to look really good. But for now, at least, it's starting to come together and look like a real block. This video is already quite long, so I'm going to split it. And then in the next video, we will deal with the iPad and desktop screen sizes.