A design team is always looking to improve its process. Often new tricks and tools are added rather piece-mill on the fly. From time-to –time I like to look at the process we are using and streamline things. The end of last year I set out with an objective of really performing a deep spring cleaning of the foundation set we use.

My objectives were:
1.Develop a clean & clear css foundation
2.Establish a set of solid (usable) design grids
3.Establish a better code snippet tool box

CSS
The first step was to replace our current patch work of CSS files (all the browser hacks and styles) with a new system. After several months of reading and research, I selected the Google Boilerplate CSS as the best model. Their system consist of one primary external style sheet containing import links to several style sheets contained in a library folder. The Google library consist of: forms, IE, reset, and topography style sheet files.

To simplify this process, I pulled the reset styles along with all the standard styles used the establish and clear tag s and establish a solid foundation from all the style sheets into one master file and call it “basecode.css”. The exception here is the IE file (because this one is larger and with IE 8 coming out I know it will be getting revised soon). Thus I used it not just for importing the various files from the library folder but I deploy my reset styles here to clear up all browser issues and start every project with a nice clean slate.

I revised the library folder based off the Google concept with some small modification to fit our process and flow. The new library contains style sheets named: fonts, forms, IE (like Google I retain this as a separate file), menus (only used on large projects), and project.

The project file contains project specific structural (non-typographical or font related) style elements. As the new grid design system is brought into place, most of the style in this file will be cleared out. Despite having the grid frame work there is always the need for project specific modifications or project specific specifications so this file will remain for that need.

I have used this system for several projects to-date and I can tell you it is a huge time saver. It really allows you to focus on the visual design rather than grinding out the code frame work for the site design. This also sets the stage to make updates and changes in design down the line are much faster. The file commenting and organization also makes it much faster to work with.

Following our previous standard the basecode file and library folder is located inside the “scripts” folder. It shares this folder with project needed JavaScript files and any other specialty scripts of code, such as asp or php mailer files. These other files represent a standard tool set that I will talk about later.

Resources:
Google Boiler Plate CSS page: http://code.google.com/p/css-boilerplate/