Simple, Robust, Responsive, Grid Layout for GetSimple

The Standard GetSimple Page Layout

Creating a standard page layout of Header, Content, Sidebar and Footer was remarkably easy. All the html needs to be included in a div of  class="container" which at full width is 960 pixels wide. Each area of the page inside the 'container' is then given a div and the div is given a class from the skeleton.css according to how wide it should be.

Skeleton uses a 16 Column grid so the full width nav menu div is given class="sixteen columns". Same for the site title and tagline area. The main page Guy Rose November Twilightarea div is given class="two-thirds column" and the sidebar class="one-third column". The footer is then full width again.

Inside the footer I wanted the text blocks to have spaces either side of them so the first div, for the copyright statement is written <div class ="four columns offset-by-two" so that the first two sixteenths of the page width will be left blank.

There is no need to worry about whitespace and margins - the default Skeleton css will take care of that.

GSkeleton © 2020
Powered by GetSimple