Using Skeleton

To format the web page into a Grid, I used Skeleton. This is a super-lite CSS boilerplate that requires no setup or installation and provides you with a starting point for a responsive website. This uses the 960px Grid System which many sites follow as convention.

To find out more watch the video:

The 960px Grid

The Grid used by Skeleton is made of 12-columns with a max width of 960px that shrinks according to browser size (Responsive). This allows for content to be structured easily and for positioning to be simple without the need for much additional CSS coding.

Below is a diagram of the Skeleton 960px Grid system that it uses. It shows the different variations of the columns that each row can have. These are defined using CSS classes to create the grid.

Features of Skeleton

Code Weight

Skeleton CSS Boilerplate is a very small CSS document which gives the naked HTML of a web page some structure and a way to quickly and easily follow website conventions. With less than 400 lines of code, it’s easy to edit and adapt and perfect for the project I need.

Classes

Skeleton uses classes to define the contents position on a page. For example if you wanted a paragraph text on one half of the grid. You would rap it in a <div></div> tag and give it a class of “one-half column”. This would automatically fit into the grid system taking up half of the grid.

Responsive

A benefit of using skeleton is that it is responsive. This means that the size of the grid and layout changes dependant on the browser size. If the webpage is viewed on a mobile device, then the layout changes accordingly for the best viewing for the user. This is a trend on the web as it heads more web friendly so follows convention and trends.

Support

With lots of designers and developers using Skeleton, there is plenty of support on sites such as Stack Overflow. Only a Google search away!

Webpage Development

Using only HTML, I created a basic structure for a Recipe. This includes the title and description of the recipe along with a list of ingredients, the method used to prepare and cook the recipe with an Image of the final result.

Using GridLover, it allows me to paste in the body of my HTML and play around with the drag and drop style settings to get a feel for the look and layout that the recipe could have. This is an easy tool which I found great to learn positioning into a grid system.

The next step is fitting it into a grid system such as Skeleton. I decided to try implement it using the Skeleton CSS boilerplate. It looks much more professional with the grid and follows convention and is a great skill to learn for future development.

Further Implementation

Grid systems are an integral part of web design and allows for a style to be implemented. Skeleton is a great boilerplate for adding layout to the page and will be used further in the unit.

When creating a site for singer/songwriter Harry Seaton, I will use Skeleton to lay the website and create a structure that follows convention and is scalable with a mobile-first approach.

Tom.