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
CSS Frameworks, just make your own | ifoh designs
Why you should just make your own CSS “framework”
Great article! I threw around the idea a blueprint for awhile, but then decided against it.
1. I personally do not use a framework. I can code nearly half a site by the time I get a framework working like I need it to. Often times there are many features I won’t even use, meaning extra code, meaning extra bandwidth.
2. I use a home brew one I suppose, pretty much verbatim from the way you start your process.
3. It’s saved me time not trying to learn the proper implementation of the some of these frameworks. I understand their purpose and I’m sure they’re great for some, just not for me.
Hey Joe, thanks for the comment, and glad you liked the post.
I agree with you that they might be more geared towards designers with less web experience. It may be a good jumping off point for them, but in no way should it replace an organic, home grown solution.
Thanks for stopping by!
I tried out BluePrint on a design I did, and I was amazed by how quickly I was able to do some pretty complex things, however I still have to do a whole bunch of fancy finangling to get things proper.
Here’s the BluePrint version: http://www.allnewcomics.com/00_newSite.html
I kind of roll my own, which sort of incorporates what you said.
Back a six or so years ago when I was building TSN.ca as a standards compliant table-less css based site, I came up with a type.css, navs.css, and layout.css trio of conventions which got imported from a basic.css. Basic was just that, base fonts so that Netscape 4.7 users could see the site (and see that they needed to upgrade), the others all did things like set typefaces, and set navigation styles, and finally set column widths (and have any fancy things inside of them).
Nowadays I do something similar except it has reset.css, type.css, and navs.css with a base CSS which formats the layout, specifies grids, and anything not connected with the other three.
I took the CSS blank template in CSS Mastery and added defaults that I like to work with. I also have a default xhtml page that I use with naming conventions that I am comfortable and familiar with.
With every new project I open these two file, save as and get to work. It makes life much easier.
Another to put forward is……
http://csswizardry.com/typogridphy/
By Harry Roberts.
Great Article
I’m a new fan of Tripoli (http://devkick.com/lab/tripoli/), which is sort of like a mega-reset.css. Frameworks, in my experience, are overkill for small sites, and you’re better off writing a custom one for big sites, based on the individual site needs.
It seems like everyone so far has similar understandings, in that the overall idea and concept of using a “framework” is more important than “the” framework.
Depending on the project you would be right Adam. Some of the extra bloat within frameworks might be overkill for a simple site.
Thanks for the responses
i can understand your point about using a huge library or framework that you essentially retrofit to your own needs. Scaling things back and peeling away what you know you won’t use can be rather time consuming.
With that said i think starting from a framework can save time and reduce initial re-work.
(i’ll admit that i’m more than likely bending the definition of a CSS framework and applying it to a very simple template and its default CSS.)
Obviously the best way to go is to build your own framework because its no different than finding a great cup of coffee - which is always at home because it’s made just the way you like it.
Frameworks… while I’ve viewed blueprint, yui, and emastic as of late …. I’ve adopted not one.
I kinda take (study) the best elements and concepts from each and then kinda fly from there. With all of the IE / browser incompatibility this and that the frameworks can get you over alot of those hurdles without excessively killing brain cells.
Alot of the knowledge offered in those frameworks has been a Godsend … I wouldn’t have even been able to figure the number of books I would have had to read to figure out alot of that stuff. Course I tend to lean toward anything that is HACK FREE — whatever shape and form that comes in.
Lately I’ve started with the meyer-reset (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
and built things back up from that starting point. Also studying the http://960.gs/ grid stuff which is interesting.
[…] CSS Frameworks, just make your own […]