My Approach to CSS Frameworks

I just finished reading an article, Using CSS Frameworks, which is a great read.  I personally do not use any of the listed CSS Frameworks, because a few years ago I developed my own “Framework”.  I’m not trying to be a CSS elitest by using my own framework, because I truly believe a lot of CSS Frameworks are great.  The reason I still utilize my own framework/structure is the reason behind my framework, I develop the way I do to make browser compatibility easier…specifically IE 6.

Grid Layouts
I think grid layouts is a great idea/concept for developing websites.  The problem usually resides with the designer.  Either 1. the designer didn’t design for a Grid layout or 2. the designer fails to fully comprehend the rules of designing grid (believe me it has happened before).

My Framework/Structure
The following is a list of files that make up my structure, as of today:

• default.css - Reset css
• forms.css - Anything that deals with forms (input, buttons, labels, fieldsets, etc.)
• ie.css - All IE overrides go here.
• master.css - This is the css file that does all the @import for all css files
• menu.css - I usually only use this when I utilize a drop down menu
• Typography.css - This contains all headings, links and helper classes (float_left, photo_left, highlight, etc.)
• Structure.css - All structural items are held here (Container, Header, Footer, etc.)

The most helpful part of what I do is probably my helpers.  When I structure a website I use .float_left, .float_right, and .float_contain.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* Helper Classes
-------------------------------------------------------------- */
 
.clear         { clear:both; }
.float_left    { float:left; }
.float_right   { float:right; }
.float_contain { overflow:auto; }
 
.text_left     { text-align:left; }
.text_right    { text-align:right; }
.text_center   { text-align:center; }
.text_justify  { text-align:justify; }
 
.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }
.superscript   { vertical-align:top; font-size:xx-small; }
 
.photo_left    { float:left; margin:4px 10px 4px 0; }
.photo_right   { float:right; margin:4px 0 4px 10px; }
 
.nopadding     { padding:0; }
.nomargin	   { margin:0; }
.noindent      { margin-left:0; padding-left:0; }
.nobullet      { list-style:none; }
.nowrap		   { white-space:nowrap; }

1
2
3
4
5
6

<div id="Main" class="float_contain clear">
<div id="Content" class="float_left">
    Main Content</div>
<div id="Sidebar" class="float_right">
    Sidebar Content</div>
</div>

My floats are “contained” and this becomes very helpful with IE 6. Here is an example of a basic ie.css.

.photo_left,
.photo_right,
.float_left,
.float_right,
.float_contain {
	display:inline;
}
.float_contain {
	float:left;
}

Those who deal with IE 6 on a regular basis understand the most common bug is the “Double Margin” bug. This happens when you apply a margin to a floated element, by adding “display: inline;” it prevents the bug. It is also a good idea to “clear” at the end of a block to prevent IE6 from riding up on rows it shouldn’t be on.

Conclusion
I am  a huge advocate of frameworks in any language, because of the structure, documentation and ease of building a team.  I also believe that everyone should develop their own framework, even in the simplest form. By doing this you not only learn how the framework functions, but can help contribute or amend as it fits into your development process. My team finds my framework/structure easy to follow, and believe me I amend it based off of their opinions.  I think I may share my “framework” to the outside world just to make it more efficient.  Anyone interested in utilizing or providing feedback?

This entry was posted on Monday, June 8th, 2009 at 10:45 am and is filed under HTML/CSS, Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.