Introduction
I recently attended An Event Apart Boston in June. Among the many talented speakers was Eric Meyer. The CSS Guru gave a very informative presentation on CSS frameworks and one of the first things he suggested doing was creating your own. His research provided information such as commonly used font sizes for headings, naming conventions and layouts. I was relieved knowing that I had already spent some time building my own and that it was in accordance to Eric’s suggestion.
Before I get into the inner workings of my framework I would like to discuss a few organizational points. One of the things that I’ve found to be very useful is dividing my CSS into 3 separate areas.
- main.css - layout aspects such as height, width, padding, margins, etc…
- type.css - typography aspects including line-height, font sizes, text transformations & letter spacing.
- color.css - background images and colors, borders, text decorations & list styles
From this point I link to ‘main.css’ and ‘@import’ the other 2 along with a browser reset style sheet which I will discuss later. This is only personal preference as I find easier to find and manage specific areas of my code. Keep in mind, however, that IE6 will not cache the imported style sheets and will reload them with each page load. Also remember when importing that your @import must be the first rules in your ‘main.css’ style sheet.
My CSS Framework began with me pulling code snippets from various resources and gradually layering in things such as header sizes and various layout schemes. It is an ever growing child and like some children it can grow up to be very, very ugly. In other words, it has the potential to get extremely bloated and messing. I myself appreciate the light-weight frameworks such as jQuery and endeavor to keep this as light-weight as possible.
Tracking Your Styles
Whether you work alone or as part of a team, using comments in your code can be very helpful in maintaining your code and ultimately your websites. Each style sheet contains relevant information commented conveniently at the top. Here is a look at ‘main.css’.
/*------------------------------------------------------------------
[Master Stylesheet]
Project:
Version:
Last change:
——————————————————————-*/
You can add any relevant data that suites your specific work-flow. As of this posting I have not discovered a need for any sort of commented guidelines for ‘type.css’. Moving on. Let’s look at ‘color.css’ which contains a color glossary.
/*------------------------------------------------------------------
[Color Glossary]
Mid Gray (background) #808080
Dark Gray (text) #1E1E1E
Light Blue (headings) #99FFFF
Yellow (header) #FFFF33
Dark Purple (navigation) #660099
Aqua Blue (links) #00FFFF
——————————————————————*/
This is one of the most useful tools in your framework. It helps to keep a consistent color scheme and you never have to go scramble to figure out what the hex value to use.
Going back to ‘main.css’ directly after the commented data I want to import ‘reset.css’ followed by ‘type.css’ and ‘color.css’.
@import url('reset.css');
@import url('color.css');
@import url('type.css');
Now our CSS Framework has a solid foundation for building additional rules. You can organize your style sheets anyway that suites you or your teams work-flow. I hope you enjoyed this epic post and will return to read the upcoming and exciting sequels.
