Frameworks (Harry!!)

Kevin

Senior Member
Okay.... so there's been a big fuss about grids and frameworks lately. I understand what grids are and I understand how and why they are useful. So now someone explain me what (CSS) frameworks are and how/why they are useful. And since Harry made one himself, I'm sure he can explain it. But if anyone else feel he can sufficiently explain this to me, be my guest. :up:
 
A CSS framework is essentially a pre defined series of rules and styles that have been made to accomplish a specific goal: speed up the development process, bring standards into line (where a company might use their own framework to make sure all sites remain essentially the same), to provide a certain look or style (my Typogridphy framework covers typography, grids and em based layout).

Imagine how many websites use predefined columns and content widths? Making a framework that already has predefined rules in means you can ignore the boring repetetive parts and get stuck into the decent more specific and fun bits.

There are arguments for/against CSS frameworks. The arguments for are mostly above and the arguments against are very good ones:
1) Enforce non-semantic class names
This is to be expected because someone is building a generic template which will later be given specific uses. For example, my framework falls into this because the columns are named after their sizes, because I don't know what people will be using it for later on.
2) Enforce styles
If someone develops a framework they are most likely going to work some design elements in, these may not be to everyoe's liking and can often conflict with the design of the actual build.
3) Enforce techniques
CSS Frameworks are just as prone to errors as anything else built by a person. Therefore if people are (re)using poor code, the problems spread.


Another great idea for any developers similar to frameworks (but made by yourselves, rather than using one that someone else made) is modular CSS. Rather than tell you all about that though I can just point you toward: 24 ways: Making Modular Layout Systems


Hope that helps, anything else just gimme a shout.
 
I just discovered frameworks yesterday in A List Apart. A great idea in my opinion (you can always override the rules in your own sheet).

(As far as 'em' based grids are concerned, ALA's article was well worth a read!)
 
ALA linked to me and my framework in that article. Mine was one of the first em grid frameworks made, I just never publicised it properly :(</stupid>
 
Thanks for explaining. I downloaded your Typogridphy, but it seems to me that I would need to use it a couple times before I actually get the hang of it. But I like the idea of predefining repetitive classes and ids. Maybe I can just make a small framework for personal use, because I hardly use half of the things you defined in your framework. :eek:
 
Yeah definitely do that. Making your own is probably better than using someone elses really.
 
So what makes it be classed as a framwork? I design all my sites without images and colours first - all in greyscale and block colours for columns slightly varying in shades from one another - so I have quite a few of these....Could these be classed as framworks? Or am i completely missing something?
 
A framework remains identical and doesn't start a build - it has the ability complete a full build. If you start a project from the same CSS codebase each time (ie copying/pasting a full preset CSS file) then that's a framework. If you code similar stuff from the ground up each time you start a build then it's not a framework - it's just a habitual build process. A CSS framework is a CSS file/set of styles that already exists.
 
Would a reset CSS file be considered a (small) framework in that case?
Does anyone use any of the available reset stylesheets that are available from the likes of Yahoo Developer, or indeed your own reset stylesheet?
 
Nah a reset is a reset. Infinitely more valuable than a framework. I use the Yahoo! one but am thinking of switching to the Meyer one at some point. Also worth looking at is diagnostic CSS.
 
My reset is pretty limited but it does what it needs to do. I picked it up somewhere along the way (I can't remember where) but I've been using it for smaller projects (And I've only been having small things for the past few weeks... :p ). For bigger projects I use Meyerweb's Reset.

Code:
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
 
You can actually expand the usefulness of that infinitely whilst trimming it down loads:

Code:
* {margin:0;padding:0;}
 
Cool, thanks for the info Harry & Onartis, do you guys both use some form of reset CSS on every project you work on now?

Thanks,
Greg
 
Yeah, the Yahoo! one on every build. I have a 'top section' of a css file that I paste into every project. Looks like:

Code:
/*YAHOO! RESET*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {      margin:0;     padding:0; } table {     border-collapse:collapse;     border-spacing:0; } fieldset,img {      border:0; } address,caption,cite,code,em,strong,dfn,th,var {     font-style:normal;     font-weight:normal; } ol,ul {     list-style:none; } caption,th {     text-align:left; } h1,h2,h3,h4,h5,h6 {     font-size:100%;     font-weight:normal; } q:before,q:after {     content:''; } abbr,acronym {    border:0; }/*---------- END RESET ----------*//*MAIN---------------------------------------------------------------------------------------------------------------- */html{    font-size:100%; /* Make sure font-size = 16px */}body{    font-size:62.5%; /* Makes 1em = 10px */    font-family:[font];    color:[color];    background:[color]; /* Always define a background */}#wrapper{    width:94em;    padding:0 1em;    margin:0 auto;    overflow:hidden; /* Clears floats */}
 
As habit, yeah. Dead easy. The 62.5% on the body makes it a simple x/10 for ems so there's no reason not to once you get into the habit.
 
Yes I've seen the 62.5% a few times before. And I actually never knew (didn't really wonder about it either though) what it did. Until I saw your note behind it. I've learned a lot of new stuff from you today :)
 
Back
Top