Codenstuff.com: Boilerplate

Boilerplate

2 posts Page 1 of 1

Post Reply

Contributors

RunarM
Hardcore Programmer

Posts: 508

Joined: Wed Nov 18, 2009 11:33 pm

Boilerplate
RunarM
Wed Mar 06, 2013 1:09 pm

In this tutorial I will teach you what a boilerplate code is and we will create a basic website using one.

The idea of a boilerplate is to give a base set of code which you won't need to change.
Here is a common example of HTML boilerplate:

Code: Select all

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
 
</body>
</html>

This boilerplate is used as a basic empty template and is present in most web pages.

Here is a list of good boilerplates you should try out:
-Skeleton (website - demo)
-Bootstrap (website - demo)
-HTML 5 Boilerplate (website - demo)
-Responsive (website - demo)

For this tutorial we will be using Skeleton, you can download it here:
http://www.getskeleton.com/#download

When the download is complete just open the zip file and drag the folder named "dhgamache-Skeleton-7ab6820" to the desktop or the location of your chose.

When you look inside the folder you should see 2 folders and a file named "index" or "index.html"

If you double click on "index" it should open in your default browser and look like this:
http://runarm.no/CnS/dhgamache-Skeleton-7ab6820/
You can try to resize your browser to any sizes and see that the site changes with size.

Now open the index.html in your favorite text editor and you will have something like this:

Note how everything got comments to explain what it is.

I am going to go through the code using colors:

[red] - DOCTYPE is a declaration in HTML so the browser knows what type of document to expect.
[blue] - Special instructions for Internet explorer.
[orange] - Basic page information like your site title.
[pink] - Specifies the relationship between the current document and the linked resource.
[green] - Icons that can be saved on mobile devices - example

The rest is the content that will be showed on your site.

You can see how "sixteen columns" is a full page and "one-third column" is one third of the page. If you go into the stylesheet folder and open "skeleton" or "skeleton.css"