Responsive Layout Setup (Header, Content, Footer) for React Apps

7 min readJul 2, 2021

Context

When designing the layout for your application, there are a number of ways to set it up, along with a few implementation options such as Grids, FlexBox, etc.

However before I get into the ‘how’, let’s cover some of the basics we should follow these days to set up a layout:

Responsive: is perhaps the most obvious one. There are so many devices out there with different dimensions that need to be supported when loading your application. From phones, to tablets, to desktops, to folding screens. This means our layout needs to be able to be flexible enough so we can add new form factors as they become available such as recent folding phones.
Multiple Landing Pages: You should design your layout in a way that supports multiple landing pages, as you might be running Ad Campaigns and your marketing team needs you have different landings for different ads.

By the way, this topic belongs to the series to set up a Single Page Application using React, Redux and Asp.NET 5.0.

Structural Elements

A standard website layout, like this website, has three common elements of Header, Body, and Footer. For the purpose of this guide, I have assumed that Headers and Footers are elements that won’t change when you navigate from one screen to the other, they are fixed, and common.

With that in mind, we then can have the below form as a guideline:

Please note that I have simplified and removed a few elements such as Routing to provide this simplified structure.

Basically what this means, is having GlobalNavigation and Footer fixed and common across all screens, Body element will change based on the screen/component being loaded.

1. Header

I have covered the header (in our case Global Navigation) extensively in a separate post. For more information on the how to implement the header, refer to Global Navigation.

2. Body

Now let’s dig deeper into the Body element. As mentioned, Body is the part that renders the content based on the screen we want to show the user, and therefore it needs to dynamically switch from one component to the other. A less simplified version of the above snippet looks like this:

With the styles like below:

For this website, at the time of writing, the siteFooterHeight for desktop is 24rem, and for mobile and tablet 42rem. For the complete guide on how to use variables, refer to Styling and Theme Management in React.

Media Queries

The other point I’d like to highlight is around the Media Queries. Those slide which need to be rendered differently on different device dimensions, they all need to have Media Queries (like above).

1.1 AppRouter

Following the above snippet, we then need to implement AppRouter, which is the file containing all the routes to our components. It is basically a Switch that loads a particular screen based on the URL, and here is the code:

Here are a few points about AppRouter:

Lazy Loading: I am loading the components in lazy mode, as I’d like to have a performant app, and not all the screens as part of one giant package.
Landing: So far I only have one landing page in this application, which is Home, and I will cover it later. If you had more landing pages, simply add them here with “exact” paths pointing to them.
Not Found: With all the components that are intended to be loaded in Body here, I have put the last component as Not Found, so if there was no match for the intended URL, Not Found would be rendered.

Global Router

At some point in your component hierarchy, you would need to have a router, which all of these routes fall under. Something that falls along these lines:

I will cover routing in a separate post.

2.1 Home page (Landing Pages)

Now lets cover a landing page, and how it looks lik. Again, I start at a very high level. For the Home page, which is a landing page, I have the below elements:

Don’t worry about SEO for now, and I will cover it in a later post. It is basically a set of Structured Schema elements for search engines to understand your page, and it won’t have any impact on how your page looks.

As an example, I cover the Banner and Benefits components, and the rest will be the same. The reason I am covering two components is that one component has width of 100vw, which means it fills the browser width no matter how big it is. And the other (Benefits component) is limited to the body content (generally around 1024px).

Here is the banner that is 100vw, and it fills the whole page. To achieve that, we need the below code,

and the styles are as follow:

For the component that is not 100vh, all you need to do is to wrap them inside a Container element like below:

You don’t need much style for the above component from the structure point of view, and it looks like below:

Flexible Width Across All Page Components

As you can using this approach you have so much flexibility how to render your content. This is why we didn’t have a Container at the root level, so you have components with different width level across every page.

Note
Configuration, plumbing and troubleshooting your software foundation take a considerable amount of time in your product development. Consider using Pellerex which is a complete foundation for your enterprise software products, providing source-included Identity and Payment functions across UI (React), API (.NET), Pipeline (Azure DevOps) and Infrastructure (Kubernetes).

3. Footer

Footer is a really simple, but annoying element at the same time. Despite the Header which you want it to be sticky at the top, even when the user scrolls, footer needs to belong to the bottom. There is a great post by Dominic Fraser on How to keep your footer where it belongs, which you should check it out. For completeness, I will include my implementation of it, here.

*Figure 1. How to keep your footer where it belongs*

Here is the JSX code you need to build your footer:

And some points you need to be aware of when using it:

Semantic UI Grid: I am using Semantic UI Control Library in our application. It is a very well-designed set of UI controls and in my view is a strong contender to Bootstrap. For this case, I have used Grid to create multiple columns for links and other elements. Of course you could also use FlexBox, or any other styling library.
Wide: The footer is 100% wide, and cover the entire width of the window. If you liked to contain it to be maximum at the same width as the body, you need to put a container around it typically at 1024px. Same applies to the header (Global Navigation in our case.)

To have a footer like this, with the above elements:

You need the below style here:

And here we go, you have your general website layout in place for your React Single Page application.

Pellerex Foundation: For Your Next Enterprise Software

How are you building your current software today? Build everything from scratch or use a foundation to save on development time, budget and resources? For an enterprise software MVP, which might take 8–12 months with a small team, you might indeed spend 6 months on your foundation. Things like Identity, Payment, Infrastructure, DevOps, etc. they all take time, while contributing not much to your actual product. These features are needed, but they are not your differentiators.

Pellerex does just that. It provides a foundation that save you a lot development time and effort at a fraction of the cost. It gives you source-included Identity, Payment, Infrastructure, and DevOps to build Web, Api and Mobile apps all-integrated and ready-to-go on day 1.

Check out Pellerex and talk to our team today to start building your next enterprise software fast.