Morioh
Login
Zak Dyer

Zak Dyer

4 years ago

How to build CSS3 Flexbox Holy Grail Layout in Angular 8 Application?

This is a step by step guide on CSS3 Flexbox layout. This tutorial explains how to create Responsive Holy Grail layout in Angular 8/9 application.

Holy Grail layout is a typical layout pattern refers to a web page. It has equal height columns with a fixed header and footer, and a contains three columns left side nav (navigation), main content (primary content block) and right side sidebar (ads or other content).

CSS Grid vs Flexbox

Holy Grill layout can be developed with CSS Grid layout and popular CSS3 Flexbox method. In this tutorial, we will use the Flexbox method to develop Holy Grill layout in Angular.

Table of Contents

  1. CSS3 Flexbox Example
  2. Flexbox HTML Structure
  3. Install Angular Project
  4. Enable Routes
  5. Configure CSS3 Flexbox Layout in Angular 8/9
  6. Make Flexbox Responsive in Angular 8
  7. Conclusion

CSS3 Flexbox Example

Flexbox is a web layout model which helps in aligning and distributing the space automatically inside a container with the help of CSS3 properties. Due to higher flexibility, Flexbox method helps in designing a responsive web page without using the float, position properties.

Its a great tool for Angular, React and front-end developers to design web apps easily, we have following reasons to use:

  • Wide mobile and desktop browser’s support
  • Building repeatable components is easy
  • Supports media queries for responsive layout
  • Reverse or rearrange elements easily with the order property
  • Easily center elements

Flexbox HTML Structure

To get started with Flexbox, we need to use the below HTML structure. Following HTML elements will lay the foundation for flexible boxes. We used a parent div with container class, and inside this, we placed header, nav, main, aside and footer.

<div class="container">
  <header>
    <!-- Header -->
  </header>
  <nav>
    <!-- Left Nav -->
  </nav>
    <main>
    <!-- Main content -->
  </main>
  <aside>
    <!-- Right Sidebar -->
  </aside>
  <footer>
    <!-- Footer -->
  </footer>
</div>

To make the child elements flexible inside a parent element, we used the display: flex value to the parent container class.

By setting up shorthand “flex-flow: row wrap” property, we are assigning the flex-direction and flex-wrap properties to the container class.

.container {
  display:flex;
  flex-flow:row wrap;
}

The order property assign the order of the element inside a flexbox, for instance, the header has the order: 1, whereas nav (order: 2), main (order: 3), aside (order: 4) and footer(order: 5).

The flex property is a shorthand property, and it refers to the flex-grow, flex-shrink, and flex-basis properties for the flexible element. For example, the header is set to flex: 0 1 100%.

header {
  order:1;
  height:100px;
  flex:0 1 100%;
}

nav {
  order:2;
  flex: 0 1 200px;
}

main {
  order:3;
  flex: 1;
  min-height:500px;
}

aside {
  order:4;
  flex:0 1 200px;
}

footer {
  order:5;
  height:100px;
  flex:0 1 100%;
}

The flexible boxes will look something like this:

Angular 8/9 CSS3 Flexbox Holy Grail Layout

Install Angular Project

Install and Angular project using the below command.

ng new angular-holy-grail-flexbox

# ? Would you like to add Angular routing? Yes
# ? Which stylesheet format would you like to use? CSS

Get inside the project.

cd angular-holy-grail-flexbox

Run the project on the browser, run the below command.

ng serve --open

Create Angular Components

To set up a Holy Grail Flexbox layout we need to create the following components.

  • Header
  • Left Side Nav
  • Main Content
  • Right Sidebar
  • Footer

Run the command to generate the components.

ng g c header

ng g c nav

ng g c main

ng g c aside

ng g c footer 

ng g c privacy-policy

Enable Routes

Now, Insert the HTML inside the Angular 8/9 components.

First, go to app-routing.component.ts file and add the following code.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainComponent } from './main/main.component';
import { PrivacyPolicyComponent } from './privacy-policy/privacy-policy.component';

const routes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'home' },
    { path: 'home', component: MainComponent },
    { path: 'privacy-policy', component: PrivacyPolicyComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule { }

Add home and privacy policy components in the app-routing.module.ts file. It enables the home and privacy-policy routes in the app.

Next, head over to the app.component.html file and include the header, nav, main, privacy policy, aside and footer tags.

<div class="container">
  <app-header></app-header>

  <app-nav></app-nav>

  <router-outlet></router-outlet>

  <app-aside></app-aside>

  <app-footer></app-footer>
</div>

Configure CSS3 Flexbox Layout in Angular 8/9

The header, footer and nav Angular components will deliver the same content between home and privacy policy pages.

Add the HTML code inside the header, nav, aside and footer Angular 8/9 components.

Add following code in app/header/header.component.html file.

<header>
    <h2>Angular Holy Grill Layout with CSS Grid</h2>
</header>

Include the given code in app/nav/nav.component.html file.

<nav>
    <ul>
        <li><a routerLink="/home">Home</a></li>
        <li><a routerLink="/privacy-policy">Privacy Policy</a></li>
    </ul>
</nav>

Place the following code in app/aside/aside.component.html file.

<aside>
    <h3>Sidebar</h3>
</aside>

Insert the given code in app/footer/footer.component.html file.

<footer>
    <span>
        Copyright 2019-2020
    </span>
</footer>

Now, in main/main.component.html file place the given below code.

<main>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nullam dolor velit, suscipit vel ultricies id, ultrices in
        augue. Aliquam volutpat, nunc id pulvinar tincidunt, leo nunc
        feugiat libero, quis luctus lectus ipsum et enim.
    </p>
</main>

In app-privacy-policy.component.html file insert the following code.

<main>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nullam dolor velit, suscipit vel ultricies id, ultrices
        augue. Aliquam volutpat, nunc id pulvinar tincidunt, leo nunc feugiat libero, quis luctus lectus ipsum et enim.
        Suspendisse potenti. Nullam ultricies congue magna non mattis. Cras enim velit, gravida in sem id, malesuada
        efficitur augue. Vivamus ullamcorper tincidunt tempus.
    </p>
</main>

Angular 8/9 Flexbox Layout CSS

Here is the final Flexbox CSS of this project to build a holy grail layout.styles.css file.

/* 
// CSS3 Flexbox Holy Grail Layout
// Made with ❤ by @ImDigamberSingh
// http://www.positronx.io
*/

* {
  box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: sans-serif;
}

.container {
  display:flex;
  flex-flow:row wrap;
}

app-header, 
app-nav, 
app-main, 
app-aside, 
app-footer {
  padding: 20px;
  margin:5px;
}

app-header {
  order:1;
  height:100px;
  flex:0 1 100%;
  background: #f1b5b5;
}

app-nav {
  order:2;
  flex: 0 1 200px;
  background: rgb(176, 165, 199);
}

app-main,
app-privacy-policy {
  order:3;
  flex: 1;
  min-height:500px;
  background: rgb(211, 216, 215);
}

app-aside {
  order:4;
  flex:0 1 200px;
  background: rgb(149, 180, 216);
}

app-footer {
  order:5;
  height:100px;
  flex:0 1 100%;
  background: rgb(119, 120, 121);
}

Here is our final app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { NavComponent } from './nav/nav.component';
import { MainComponent } from './main/main.component';
import { AsideComponent } from './aside/aside.component';
import { FooterComponent } from './footer/footer.component';
import { PrivacyPolicyComponent } from './privacy-policy/privacy-policy.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    NavComponent,
    MainComponent,
    AsideComponent,
    FooterComponent,
    PrivacyPolicyComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Make Flexbox Responsive in Angular 8/9

Setting up responsive feature in Flexbox Holy Grid layout is so simple. As you can see we used the flex: unset and width: 100% properties to make the HTML elements responsive inside a flexbox container.

@media (max-width: 768px) {
  app-header, 
  app-nav, 
  app-main, 
  app-aside, 
  app-footer {
    flex: unset;
    width: 100%;
  }
}

Conclusion

We have completed the Angular 8/9 UI tutorial in which we learned how to build Flexbox Holy Grail Layout with the help of modern CSS3 properties.

GitHub Repository

#angular #css #web-development

How to build CSS3 Flexbox Holy Grail Layout in Angular 8 Application?
33.05 GEEK