CSS Frameworks, just make your own
July 24th, 2008
While in theory, and from an educational standpoint I do not have a problem with CSS Frameworks. On the other hand, I do not personally see a point in relying on one that someone else made, for my projects.
First things first.
What exactly is a CSS Framework really?
Let’s first look at a definition:
A CSS framework is a pre-prepared library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks (usually packaged as external .css sheets inserted into the header) package a number of ready-made options for designing and outlaying a webpage.
OK, so it is more of a building block than anything else. A stepping stone, or kick-off point for a new web project. I can go along with that.
I think that it would be fair to say that anyone who has designed a website especially from scratch in notepad, is probably well acquainted with the ‘copy + paste’ method for repetitive markup. To take it a step further, when we find some code that works, we will tend to reuse it more frequently because of its reliability, which in turn speeds up development time (and helps us get some sleep).
So back to the topic at hand. A CSS Framework is a library of CSS files that we can include into our documents straight off the bat, to help get things rolling. I don’t know about you but I do this already, which leads me to my next point…
Why can’t we just build one ourselves?
Excellent question, and glad you asked it. The answer of course being, you most certainly can, and should, and it will be better than anything you can download.
In an article from blueflavor, on Blueprint (one of the first, and more well known frameworks), they even explain that it will take a some time, perhaps hours to get accustomed to the code and the way of the lands. The reason I said it will be “better than anything you can download” is that you will have created it, using your conventions, and best practices.
Don’t be confused by the title, thinking it is more than meets the eye (thank you Transformers). These frameworks are just merely a set of baseline styles that you can build off of. This is probably something you are already doing, even if you are not aware of it. Let’s see what actually goes into a framework.
Building our own framework
We need a few things to get the ball rolling on all projects, here is a list of how I usually get started, once I have a solid PSD.
Checklist of what we need:
- “img” or “images” directory
- css or styles directory
- scripts directory
- index.html
So this is how I will roughly start off each project. Now to dive a little deeper into what goes into each of these.
Inside our image directory we can then have sub-directories if needed, or if you have a certain naming convention, go with that.
Within the CSS or Styles directory we will have multiple files that we can choose to include, or disregard depending on the design. For example:
- reset.css (this is where you will reset all your styles to try to achieve better cross browser compatibility)
- global.css (in here I will set some default styles for type, line-height, etc. since we reset everything in the above)
- grid.css (if you are using a grid system or plan to, this is where you can define such styles)
- main.css (this is the file that will have the project specific details that make it unique, such as imagery, positions…)
For the scripts directory, this is where I can include my JavaScript, or JQuery (one framework I am starting to love more and more, and am glad someone built that one for me, heh).
I always start off with an index.html file if for nothing else but a clean and valid DOCTYPE, feel free to rename it to your liking. I start out with html and if I need php or asp then I will go down that road and rename it acordingly.
There is one more I left out, and this is basically depending on if you are using a server-side language, and that is an “includes” folder. This is where you can separate out your document into manageable pieces such as:
- masthead (all your styles, DOCTYPE, basically up until the closing </head>)
- main-nav (your main navigation in once place, included on all pages, so you can easily make site-wide edits)
- secondary-nav (pretty self explanatory, just a place to keep your sidebar, or secondary navigation)
- footer (perhaps some bottom navigation, or copyright information can go here)
Take it for what it is worth, but this is just the basics of templating, based on a framework I call my own.
All in all, what it comes down to is performance, client expectations, maintainability, and overall usability. If that means you need to use a “pre-defined” system, so be it. I just think that in the long run you will be learning more, and developing life long practices that will help you grow as a developer and or designer.
For a list of some common frameworks: http://en.wikipedia.org/wiki/List_of_CSS_frameworks
Answer me these qustions “three”
- Why do you use a framework? Or, why don’t you?
- Which one do you use? Why?
- How much time has it saved?
- Posted at 1:52 pm in css
- Leave a comment