Andrew Dorokhov
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 open_in_new great article about grid layouts.
We can:
- Create a CSS layout by ourselves.
- Using
float. - Using
flexbox. - Using
display: grid- new feature (experimental).
- Using
- Take a ready-made grid layout.
- open_in_new Bootstrap (part of the framework).
- open_in_new Foundation (part of the framework).
- open_in_new Skeleton .
Normalizing
open_in_new 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.