Easy Responsive Web Grid
In this recording we will be applying our responsive grid system to our HTML page.
By default all html elements will appear on a web page one right after another. If the elements are inline, they will set right next to each other. Blocked elements will appear on their own line.
In order to have better control of how the elements are placed on the screen you need to apply a grid system to the page.
There are different types of grid systems but the most common ones today are responsive grids. These grids divide up the page into columns and gutters based on a percentage of the master grid size. The mater grid is a fixed pixel size.
Usually the smallest column size in a responsive grid system is 5%, while gutters are usually around 1% or 2% of the master grid size.
A grid system is written using CSS. There are many grid frameworks that are open source (free to use) for any project. However, for this example we are going to create a very basic grid system from scratch.
In our style.css document we set style rules for specific html elements. However, in a grid system we don't want to do that.
Instead we will create rules that can be shared by any element we choose. For example if we create a rule that says the content has a column size of 50% (the grid) we want to be able to apply that rule to any html element we want to be 50% wide.
In order to create rules that any element can use we have to create these style rules as a class. A class is simply a key word that we create. In the CSS we create a class using the period (dot), followed by our keyword. Then we add the style rules for that class within curly brackets, just like any other type of style rule.
To apply the rule to HTML you simply add the class attribute followed by the class name (without the period). Multiple classes (rules) can be applied to a single HTML element simply by adding a space between class names within the class attribute value.
For this example we will beginning with a sample HTML document from pervious examples. This document is already divided up using the HTML5 structural elements.
The sample document also has a link to an external style.css file. This is so that you can see some basic styles on the page.
Note that CSS documents are loaded from the top down. Which means the last CSS document you load, may override a rule from a previous document.
Because of the CSS top down load, it is best practice to link any overrides (reset styles) CSS documents first. Next you would load all your gird CSS files and lastly your main style.css.