Dorokhov.codes

05. Creating layouts

There are two types of layout - block and table.

Table layouts aren’t actual anymore because they involve a lot of redundant code.

The most actual type of website layout is block-based. It is based on the <div> tag, which is used to create containers that encompass all the content of a page or a specific block. For example, we can divide a website into several blocks and each block will have its own <div> tag.

Grid layouts

Grid layout is a standard and a best practice for creating website layouts.

A grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. Here’s a great article about grid layouts.

We can:

  • Create a CSS layout by ourselves.
    • Using float.
    • Using flexbox.
    • Using display: grid - new feature (experimental).
  • Take a ready-made grid layout.

Normalizing

Link to the home page.

<link href="normalize.css" rel="stylesheet">

Normalizing is a very useful little CSS library written by Nicholas Gallagher that automatically does some useful basic layout fixes and makes the default styling of elements more consistent across browsers.

Every layout should be begun with normalizing.

Good to understand

It will be useful to understand the next terms:

Check using validators

After creating a layout it’s a good idea to check it using validators:

Process creating layouts

The most simple structure:

layout/
  index.html
  css/styles.css

In this case we don’t use any preprocessors and tools. We just include CSS into the HTML page with link tag.