Boilerplate

2 posts Page 1 of 1
Contributors
User avatar
RunarM
Hardcore Programmer
Hardcore Programmer
Posts: 508
Joined: Wed Nov 18, 2009 11:33 pm

Boilerplate
RunarM
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
Image

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.
Image

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

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:
Image
Note how everything got comments to explain what it is.

I am going to go through the code using colors:
Image

[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.
Image
Image

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"
Image

You can see and go through all the different classes that you may use.
Image


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:
Image
and you can view the page here: http://runarm.no/CnS/boil/tutorial/

Good luck using boilerplate!

-RunarM
Just another day in my life.
http://www.codexvideos.com
User avatar
Danny
VIP - Donator
VIP - Donator
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm

Re: Boilerplate
Danny
I made my own boilerplate based on that (:
2 posts Page 1 of 1
Return to “Tutorials”