Now that our business has evolved to include web development projects, I increasingly feel the need to standardise design elements across websites. A couple of reasons for which are
a) Repeating the same set of actions for a variety of projects - browser styles reset, base typography, base styles for standard tags.
b) Accidentally using class names which I had used for another project.
I am evaluating whether I should be using an exisiting framework, or develop one of my own. The latter is tempting because it means no excess code, and instant recall on what does what. However, there seems to be inherent value in using another one - in terms of cross browser compatibility and basic learning (for example, I just learnt that I can use textarea and other form elements to mimic body typography by using an 'inherit' declaration instead of declaring them again explicitly).
But given the time constraints, I think for now I will end up using a combination of the two. The framework I have selected for the above is Even the Playing Field, it seems lightweight and suitably modular (and also taught me the little nugget above). Other options were blueprint and YAML
The list of things I inevitably end up doing:
CLEAN-UP
1. Master Reset. Question: CSS Framework seem not to use *{margin:0; padding:0} and declare tags explicitly - is there a specific reason to do so?
INDIVIDUAL ELEMENTS
2. Base styles for paragraphs, headings, tables, content lists (as against structural lists), images. Question: I end up using a margin-bottom:XXpx; for all my content items - not sure if I should use margin-top:5px, margin-bottom:5px; Intuitively, I have been unable to figure out what works best. Is this article on 'vertical-rhythm' a solution?
3. Link styling.
4. Button styling. Tricky, because often I'd like a link to imitate a button - and haven't figured a consistent way to do this. Also, should one use CSS to highlight the hover and active states through background images (which takes tons of extra mark-up and CSS) or just stick to something like jQuery?
SUB STRUCTURAL ELEMENTS
5. Image thumbnail galleries. Variants: Image alone, Image with Title, Image with Controls (as in a checkbox, crop button etc.)
6. Forms
7. (Not strictly CSS) : Image Slideshows.
OVERALL STRUCTURAL ELEMENTS
7. Grids! One Columns, Two Column, Three Column, Liquid or Fixed? My Achilles heel right now.
8. Navigation. Suckerfish Drop Downs.
HACKS/BROWSER CONSISTENCY
9. Separate stylesheet for IE6
NEW TECH?
10. CSS Sprites?
Article will continue to evolve as I figure this out along with work.
