Creating A Custom HTML and CSS Framework for Rapid Development

Posted in Tutorials4 years ago • Written by 22 Comments

In this article I will go over creating a custom framework to have and use for your own projects. This to me has been one of the best resources to me in creating websites for clients. I found just like everyone else that after doing so many web pages you hit the point of realizing you keep typing the same things over and over. To try and cut down on some of the time it was taking me just to get started on a project I decided to make my own “framework” that I would use as a basic starting point. I have found this to be a great way to carry around my framework with me anywhere I go on my USB memory stick, and to be able to start a project much faster than I normally would have. Since most of my programming is done with just a basic text editor, this has worked out really well for me.

Getting Started

To start with, I am going to take a look at my own needs and see what it appears I need the most. I want to make sure then when creating my own custom HTML & CSS framework, that I include the things I use the most so it will be useful to me in the future. When starting your own I would make a simple list of the most used things you have found yourself doing over and over with each website project.

For this example I will cover the items I found myself needing the most – You can always add or remove items to better fit your own needs when making your own custom HTML and CSS framework:

1. Basic starting DOCTYPE and website head area
2. Link on the HTML document to my .CSS stylesheet
3. A good .CSS reset file
4. A starting point for my project already in place
5. A .PNG fix for older browser versions

A Basic Starting Point

For a basic starting point we will need to know the main items that will be in every website. First will be our DOCTYPE. Although this may change for some people, I know that I mostly use the same one. I got tired of trying to remember it, and it was getting old trying to copy it each time I created a website. This is a must have item within our framework.

Lets begin by creating a new file and naming it index.html – This will be the first start of our framework. Open this file and add your DOCTYPE at the beginning of the document. Since I use the XHTML strict, then I have added the following to my index.html file.

Index.html File

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Now that we have a start of our index.html – We will continue on it by adding the HEAD section. This will be the area that we contain our meta information and link to your stylesheets in. Since I have used the same items for years, I want to make sure I include them. Adding them and leaving them blank will allow me to reuse the framework as many times as I want, and customize it each time I create a new project, but will prevent me from having to re-type it over and over every time I am creating a new website.

Now we will take a look at the other information we will be adding into our index.html file. This is the HEAD area:

Index.html

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->

<title></title>

</head>

Let’s take a look at everything we have added in the above code:

First is our content type, which is a must for proper document retrieval. Next is our description, keywords, and author. After these are our links to our stylesheets we will be creating (Both reset.css and style.css) – Next will be our JavaScript used to fix older browsers with the .PNG file viewing, and then all followed by our Title tag.

Adding these to the framework, and leaving the description, keywords, author and title blank – Will make it very easy to edit each time we make a new website using it.

I am going to add the following to my index.html since it is still a basic start to my every website I create. This will finish up our index.html – This will also create our BODY section of the website framework, and close out our HTML in our document.

Index.html

<body>

		<div id="wrapper">

		</div> <!-- End #wrapper -->

	</body>
</html>

Notice that I have also added a DIV for starting. This has always been my first created DIV on each website I have created unless I really needed something more specific and custom. For most generic websites this one has been a must, so I am adding it into my framework.

Here is a look at the entire Index.html file completed:

Completed Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->

<title></title>

</head>
	<body>

		<div id="wrapper">

		</div> <!-- End #wrapper -->

	</body>
</html>

Next we will take a look at our .CSS files that we will be adding. Since we have already linked to these in our index.html file, we can create them now to be added to our framework. Notice also that I am using a sub-folder called css. This folder will need to be created, and our .css files will need to be added to this folder. This will help us keep files organized in our framework.

First is going to be our main stylesheet which I have named style.css – Let’s take a look at the basic of what will be added to it for styling purposes:

Style.css

html, body, div, p{
  margin: 0;
  padding: 0;
  border: 0;
  }

/* Main Layout */

body{}

#wrapper{}

/* Extras */

.clear{clear:both;}

Now for the ever so popular Eric Meyer Reset. This will be in it’s own file named reset.css and will also be added to our css folder we have created.

Reset.css

/* CSS Reset created by Eric Meyer - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Now we will need to create our JavaScript that will fix older browsers and allow them to see .PNG files correctly. I like to use PNG files when possible mainly because of the quality, but I need to keep in mind that some people still use older versions of IE which cannot properly view .PNG files. To fix this, I will make another folder and call it “js” – This folder will hold all of my JavaScript files that I would need to use on any website I am creating, but for now it will hold my pngfix.js file. Create a new file called pngfix.js and we will add the followiing:

pngfix.js

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

This will make IE correctly display our .PNG files. We have already added the script code to our index.html file when we created it that will look for this file. Simple enough right?

Let’s move on! – Now we should have a basic setup of files that we have created that we can use as our framework. There are still a few other things that I have found that save time for me when I am creating a website so I have made sure to add them here. If you have seen my other tutorial on creating a PHP website from scratch, then you will know I frequently convert my HTML websites to PHP. To set up my framework to be readily modified to convert, I have set up my framework with the folders and files I would create when converting my HTML website. I will now add the vars folder, to place my PHP variables, and I will also add my includes folder that will have my PHP include files when and if I choose to convert the HTML to PHP.

Notice that I have also added another blank folder to my framework setup for images. This is the folder I always create and add my website images to for any project that I create. This helps organize my files when making new websites.

Here is a look at what my folder setup looks like with everything complete:

HTML CSS Framework
|
|-- index.html
|--- js
|     |-- pngfix.js
|--- images
|--- vars
|--- includes
|--- css
|     |-- style.css
|     |-- reset.css
|

A quick overview of the files we have created:

index.html – Our main html file for website creation

style.css – reset.css – Contained within our css folder, and used for styling the look of our website

pngfix.js – Our JavaScript file that fixes IE to properly view .PNG files

images folder – For adding our website images we will be using when creating the website using our framework

includes folder – For placing files we would create if converting the HTML website to PHP

vars folder – For adding variables to use with our PHP website if we converted it

PHP Notes for Conversion

For those of you that are like me and would be using this framework to make the website, then convert it to PHP – Here are some quick notes on including the PHP files, and also setting and using variables. This is just a quick reference that you can save and even keep as a txt file within your framework if you want for later use.

// Including the external PHP within XHTML
<?php include('path/filename.php') ?>

// Setting the variable itself
$variable="data details";

// Creating the output for the data
<?php
echo $variable
?>

Overall Focus

The overall focus of creating your own HTML & CSS framework is really to save time. It helps when having everything together and ready each time you want to start a new project for yourself or a client. Saving time and having some things already in place can also help with organization. Putting attention into these can sometimes help you be more creative and flexible since you would not have to waste time doing the same things over and over again. This can also help you place more attention on detail and prevent you from running your energy out on items not needed. All together this could mean the difference in yourself or a client being happy or not, and also meeting a deadline in time knowing that certain things are already done for you.

Download

If you would like to download the files that I have created within this tutorial to use for yourself in your own projects then feel free to. I have found making a simple framework is a priceless thing to have and has helped me numerous times. I do know that many of you may already have your own framework that you use but I wanted to share mine with you. Feel free to download the example tutorial files by clicking [HERE]

In Closing…

I hope everyone has enjoyed the article, and finds it useful in making your own HTML and CSS Framework. If you have any suggestions or questions then feel free to comment below and let me know. I hope that you also find it useful in your own projects and see the difference in time it takes to begin a new project. I hope it also helps everyone with creativity since you can now focus more energy into more important things such as design, and client specifics instead of starting a project from small snippets or trying to remember DOCTYPE’s – Happy coding! and thank you for reading!

10 Written Articles

My name is Kevin. I am a 30 year old freelance web designer. I have been working with HTML, CSS, and PHP for 6+ years - And creating websites using Wordpress for 3 years. I enjoy creating websites and also doing some graphic design using Photoshop and Illustrator. I hope everyone enjoys reading my articles and I look forward to your questions, comments, and feedback.

22 Comments Best Comments First
  • Dave

    Friday, September 17th, 2010 16:00

    1

    Hi Kevin,

    nice tutorial. Congrats.

    Now a few notes on your post. You said you are using XHTML Strict as Doctype.

    Then on script tag, the attribute defer should be written as defer=”defer”, instead of just attribute name (despite this, I’m glad to see defer attribute being used. Just a few developers use it or even know about it’s existence).

    Another mention is about PNG fix. It works, your solution is fine, but I think publish this is kinda awkward, hence usage of IE6 or below just dropped a lot on the last year (see Stat Counter statistics). Google cutted off support to IE6, M$ strongly recommends any user to update to version IE8, in an open manner…

    That’s all.

    0
    • Kevin Stanley

      Friday, September 24th, 2010 17:15

      12

      Dave, thanks for the feedback. Sad but true, many people still have outdated browsers. I have noticed by checking stats and analytics that more people are using outdated browsers to visit some of my sites. I wanted to ensure a proper page visit, so that was just something I found useful and added. The defer attribute is something I have used since college. Just made it a habbit I guess. I noticed also not everyone uses it though.

      0
  • Lucian

    Saturday, September 18th, 2010 12:38

    8

    Very good article , thanks!

    0
  • Kristy

    Saturday, September 18th, 2010 23:57

    9

    Very nice article. Thanks for putting it together.

    This is great for a very simple site, however, if you work with custom content management systems or WordPress blog integration like I do all the time, I have to have separate sets of frameworks for these.

    0
  • KA

    Monday, September 20th, 2010 08:16

    10

    Nice one – I do this, not in the form of files, but in the form of “clips” in coda, so I just type html5 and a nicely formatted html5 template populates. Same for css. :)

    Instead of leaving the meta values blank, consider putting something like “METADESCRIPTION” – makes it easier to select (using a double click) and it draws your attention so you won’t forget to fill it up!

    0
  • jesus

    Saturday, September 18th, 2010 14:07

    7

    Ive been using something like this for years.
    Your aproach is very good if you are developing static o low dinamic websites. You have the “initial skeleton” ready for use.

    But, in the end, if you have to deal intensively with databases, you will end using a premade framework, or developing yours (for dealing with db, i mean).

    Anyway, i like your post, and i appreciate you are sharing this.

    PD: I know my english sucks…..

    0
  • edopenroz

    Saturday, September 18th, 2010 04:02

    6

    Excellent! Really good tutorial. Thanks!

    0
  • Maxim

    Friday, September 17th, 2010 16:35

    2

    I am very newbie in html. I m not much brilliant like other. So I feel learning html is very hard. I need to remember many codes. and a few of experts are friendly as I wish. I want to learn html, css and I think I need to learn it from a real man not from internet. I am many sily question about html but none of them are want to hear them.
    This article feels quiet easy. I know those basic html code. I also thought that typing those premier code everytime at begging of a page is disturbing. I didn’t thought that I can copy it every time. Thanks for this great tips.

    0
  • Stone Deft

    Friday, September 17th, 2010 16:58

    3

    thanks … for the framework, it’s just as simple as cut paste everything on my local host

    0
  • David Duvall

    Friday, September 17th, 2010 16:10

    4

    nice post here sir. wondering if you’ll be doing something like this for html5 and css3

    0
    • Kevin Stanley

      Friday, September 24th, 2010 17:16

      13

      Now that you say that, I am considering it. Nice suggestion David! :)

      0
  • David

    Saturday, September 18th, 2010 00:42

    5

    This article shows your experience. Keep up, look forward more tutorials like this… for newbie like me…….

    0
  • Kevin Stanley

    Friday, September 24th, 2010 17:13

    11

    Your right. I add that before linking the reset.css sometimes just to make sure everything is being displayed correctly. Funny you noticed it.

    0
  • Fernando

    Tuesday, October 4th, 2011 18:16

    19

    Nice stuff, clean and ready to use. Thanks!

    0
  • Tuan Nguyen

    Friday, March 2nd, 2012 09:55

    20

    Thank you! I’m looking for a simpler html framework instead of Twitter bootstrap. Thank you very much for your work! Nice day

    0
  • David Nemes

    Monday, April 23rd, 2012 16:23

    21

    Try Siimpler it’s a simple html/css framework. http://siimpler.com/

    0
    • Dainis Graveris

      Wednesday, April 25th, 2012 04:20

      22

      Thanks for share, David!

      0
  • Jack

    Monday, August 22nd, 2011 15:43

    18

    I Love the Reset.css. I usually mess up a lot on defining un even padding and margin. Resetting the margin to 0 helped me to fix most of the issues easily. Now I am looking at other items so that I can take advantage of the Reset.Css completely.

    0
  • Renato Alves

    Monday, May 2nd, 2011 00:59

    17

    It is really gonna help me don’t waste time and worry about the most important things. Thanks for sharing…

    0
  • brad

    Tuesday, October 5th, 2010 16:00

    14

    One note: You should always have the leading / in the css and image paths… Here is an example of a site that didn’t do that
    http://www.wheresmycellphone.com/index.php/
    If you put the trailing / on the url it looks in the wrong place for the css and images because it is relative. But if you have a leading / (ex. ) it will go to the root directory and start there

    0
  • Brett Widmann

    Thursday, January 27th, 2011 21:27

    15

    This is a really helpful tutorial! Thank you for the help.

    0
  • Rao Ayyoub

    Thursday, February 17th, 2011 18:37

    16

    I’m very much new to Web Development. I write the HTML and the CSS each time I develop a web page. This is very first moment, when I came to know about an HTML/CSS Framework. Please tell me, how can use it.

    0
  • David Nemes

    Monday, April 23rd, 2012 16:23

    21

    Try Siimpler it’s a simple html/css framework. http://siimpler.com/

    0
    • Dainis Graveris

      Wednesday, April 25th, 2012 04:20

      22

      Thanks for share, David!

      0
  • Tuan Nguyen

    Friday, March 2nd, 2012 09:55

    20

    Thank you! I’m looking for a simpler html framework instead of Twitter bootstrap. Thank you very much for your work! Nice day

    0
  • Fernando

    Tuesday, October 4th, 2011 18:16

    19

    Nice stuff, clean and ready to use. Thanks!

    0
  • Jack

    Monday, August 22nd, 2011 15:43

    18

    I Love the Reset.css. I usually mess up a lot on defining un even padding and margin. Resetting the margin to 0 helped me to fix most of the issues easily. Now I am looking at other items so that I can take advantage of the Reset.Css completely.

    0
  • Renato Alves

    Monday, May 2nd, 2011 00:59

    17

    It is really gonna help me don’t waste time and worry about the most important things. Thanks for sharing…

    0
  • Rao Ayyoub

    Thursday, February 17th, 2011 18:37

    16

    I’m very much new to Web Development. I write the HTML and the CSS each time I develop a web page. This is very first moment, when I came to know about an HTML/CSS Framework. Please tell me, how can use it.

    0
  • Brett Widmann

    Thursday, January 27th, 2011 21:27

    15

    This is a really helpful tutorial! Thank you for the help.

    0
  • brad

    Tuesday, October 5th, 2010 16:00

    14

    One note: You should always have the leading / in the css and image paths… Here is an example of a site that didn’t do that
    http://www.wheresmycellphone.com/index.php/
    If you put the trailing / on the url it looks in the wrong place for the css and images because it is relative. But if you have a leading / (ex. ) it will go to the root directory and start there

    0
  • Kevin Stanley

    Friday, September 24th, 2010 17:13

    11

    Your right. I add that before linking the reset.css sometimes just to make sure everything is being displayed correctly. Funny you noticed it.

    0
  • KA

    Monday, September 20th, 2010 08:16

    10

    Nice one – I do this, not in the form of files, but in the form of “clips” in coda, so I just type html5 and a nicely formatted html5 template populates. Same for css. :)

    Instead of leaving the meta values blank, consider putting something like “METADESCRIPTION” – makes it easier to select (using a double click) and it draws your attention so you won’t forget to fill it up!

    0
  • Kristy

    Saturday, September 18th, 2010 23:57

    9

    Very nice article. Thanks for putting it together.

    This is great for a very simple site, however, if you work with custom content management systems or WordPress blog integration like I do all the time, I have to have separate sets of frameworks for these.

    0
  • Lucian

    Saturday, September 18th, 2010 12:38

    8

    Very good article , thanks!

    0
  • jesus

    Saturday, September 18th, 2010 14:07

    7

    Ive been using something like this for years.
    Your aproach is very good if you are developing static o low dinamic websites. You have the “initial skeleton” ready for use.

    But, in the end, if you have to deal intensively with databases, you will end using a premade framework, or developing yours (for dealing with db, i mean).

    Anyway, i like your post, and i appreciate you are sharing this.

    PD: I know my english sucks…..

    0
  • edopenroz

    Saturday, September 18th, 2010 04:02

    6

    Excellent! Really good tutorial. Thanks!

    0
  • David

    Saturday, September 18th, 2010 00:42

    5

    This article shows your experience. Keep up, look forward more tutorials like this… for newbie like me…….

    0
  • David Duvall

    Friday, September 17th, 2010 16:10

    4

    nice post here sir. wondering if you’ll be doing something like this for html5 and css3

    0
    • Kevin Stanley

      Friday, September 24th, 2010 17:16

      13

      Now that you say that, I am considering it. Nice suggestion David! :)

      0
  • Stone Deft

    Friday, September 17th, 2010 16:58

    3

    thanks … for the framework, it’s just as simple as cut paste everything on my local host

    0
  • Maxim

    Friday, September 17th, 2010 16:35

    2

    I am very newbie in html. I m not much brilliant like other. So I feel learning html is very hard. I need to remember many codes. and a few of experts are friendly as I wish. I want to learn html, css and I think I need to learn it from a real man not from internet. I am many sily question about html but none of them are want to hear them.
    This article feels quiet easy. I know those basic html code. I also thought that typing those premier code everytime at begging of a page is disturbing. I didn’t thought that I can copy it every time. Thanks for this great tips.

    0
  • Dave

    Friday, September 17th, 2010 16:00

    1

    Hi Kevin,

    nice tutorial. Congrats.

    Now a few notes on your post. You said you are using XHTML Strict as Doctype.

    Then on script tag, the attribute defer should be written as defer=”defer”, instead of just attribute name (despite this, I’m glad to see defer attribute being used. Just a few developers use it or even know about it’s existence).

    Another mention is about PNG fix. It works, your solution is fine, but I think publish this is kinda awkward, hence usage of IE6 or below just dropped a lot on the last year (see Stat Counter statistics). Google cutted off support to IE6, M$ strongly recommends any user to update to version IE8, in an open manner…

    That’s all.

    0
    • Kevin Stanley

      Friday, September 24th, 2010 17:15

      12

      Dave, thanks for the feedback. Sad but true, many people still have outdated browsers. I have noticed by checking stats and analytics that more people are using outdated browsers to visit some of my sites. I wanted to ensure a proper page visit, so that was just something I found useful and added. The defer attribute is something I have used since college. Just made it a habbit I guess. I noticed also not everyone uses it though.

      0

Comments are closed.

54.237.32.10 - unknown - unknown - US