Clean Application — Block Positions

The second part of step-by-step tutorial to build a clean, lightweight, and extremely fast web application.

Photo by Joanna Kosinska on Unsplash

This is the second part of a step-by-step tutorial to build a clean, lightweight, and extremely fast web application together without any fast-food frameworks. Please check out the first part if you haven’t already:

Block Positions

When we deal with positioning our contents on a page, there are various useful properties that can be helpful in manipulating different positions of an element.

│<---------SCREEN-WIDTH--------->│
    │<------SITE-WIDTH------>│
+---+------------------------+---+
│...│     HEADER SECTION     │...│
│...+------------------------+...│
│...│                        │...│
│...│        CONTENT         │...│
│...│        SECTION         │...│
│...│                        │...│
│...│                        │...│
│...+------------------------+...│
│...│     FOOTER SECTION     │...│
+---+------------------------+---+

Understanding the Positions

For simplicity, we will reuse the previous code and create the new 02-positions folder and copy the contents of 01-layout into it. We will use the following directory structure:

02-positions
├── styles
│   ├── app.css
│   ├── flex.css
│   └── theme.css
└── index.html

We can now create the app.css file for our main application styles:

body {
  font-family: arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#main {
  margin: 5em auto 0;
}

header,
footer {
  height: 5em;
  width: 100%;
}

header {
  position: fixed;
}

header h1 {
  float: left;
}

@media only screen and (min-width: 768px) {
  header,
  footer,
  #main {
    max-width: 1440px;
  }

  header,
  footer {
    margin: 0 auto;
  }

  header {
    left: 50%;
    transform: translateX(-50%);
  }
}

Explanation

The header element with position: fixed will be positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

Setting margin: 0 auto property to horizontally center the header and footer elements within body container. Elements will occupy the specified width and the remaining space will be divided evenly between the left and right margins.

To fix the Safari issue with the positioning of the element with a fixed position to the page center, we will use translateX(-50%) property for the header element.

Next, we link app.css file to our index.html page:

<link href="./styles/app.css" rel="stylesheet">

Once done, we then wrap header with the <h1> tag simply to improve the visibility:

<header><h1>Header</h1></header>

We can now open index.html page using any browser. You may try to scroll and resize the page or even use Chrome Dev Tools to emulate for any mobile device.

In the next tutorial we will create smooth and animated menu button for a better user experience — Hamburger Menu.