Boilerplate
Posted: 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:
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"
You can see and go through all the different classes that you may use.
Now that we have gone through most of what you need to know I will just edit some of the code and make a site:
and you can view the page here: http://runarm.no/CnS/boil/tutorial/
Good luck using boilerplate!
-RunarM
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
This boilerplate is used as a basic empty template and is present in most web pages.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>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"
You can see and go through all the different classes that you may use.
Now that we have gone through most of what you need to know I will just edit some of the code and make a site:
and you can view the page here: http://runarm.no/CnS/boil/tutorial/
Good luck using boilerplate!
-RunarM