Creating A Custom HTML and CSS Framework for Rapid Development

Door globecom op zo, 2014-12-28 14:27

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

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

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

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

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 {
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 = " + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\">"
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:

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

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

// Creating the output for the data
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!