Basic Understanding of CSS Frameworks

You don’t have to write the same CSS-code or (X)HTML-Markup over and over again. Whatever project you’re starting to work with, at some point you have to define classes and IDs you’ve already defined in your previous web-projects. To avoid unnecessary mistakes you might want to start not from a blank file, but from an almost “perfect” scratch. The latter might contain some basic definitions you’d write in your code anyway. However, once you’ve decided to create such a scratch, you need to make sure it is really bulletproof — besides, if the stylesheet also sets up optimal typographic rules and basic form styling you manage to kill two birds with one stone.

And this is where CSS Frameworks and CSS Reset are becoming important. Using them, you can get yourself a perfect default-stylesheet and markup, save your time and ensure the best quality of your code from the very beginning. But what are CSS Frameworks? And why do you need the Reset for?

So What is a CSS Framework?




A framework is a basic (usually abstract) conceptual structure which you can use as a “scratch” for your web-projects. For instance, instead of defining global reset, consistent baseline, typographic rules or basic styles for forms over and over again — every time you work on a new project — you can prepare a default-style once and reuse it in all your future projects. This is what you call a CSS Framework.

CSS frameworks don’t have to be complex or large, they may contain a set of simple CSS-styles such as

1. typography.css for basic typographic rules,
2. grid.css for grid-based layouts or
3. layout.css for general layouts,
4. form.css for basic form styling,
5. general.css for further general rules

and so on. In your code segmentation you can also go further, for instance: structure, typography, design presentation, specialist sections (e.g. menus, navigation), print, mobile web, tweaks (mostly old style browser hacks), browser specific workarounds (via IE conditional statement).

List of CSS Frameworks Available on the Web

1. The Blueprint CSS framework, created by Norwegian tech student Olav Frihagen Bjørkøy, is a very promising foundation for developing typographic grids using CSS. The framework offers an easily customizable grid, sensible typography, a typographic baseline and a stylesheet for printing. It also uses relative font-sizes, provides a CSS reset and is supposed to be cleaned of code bloats. The latter isn’t always true.

2. YAML is based on web standards and supports every modern web browser. All Internet Explorer’s major rendering bugs are countered. YAML fully supports all IE versions from 5.x/Win to 7.0.
   
   Apart from a number of standard-conform layouts the framework also offers a debugging stylesheet, print stylesheet as well as various robust tools for web-development in YAML. All CSS components of the framework as well as the various layout methods are thoroughly documented in both English and German, supplemented by numerous examples.

That's it for now. On my future post i will discuss about CSS Resets. If you have any suggestions comment below. Meanwhile, for additional topic relating to Web Design and Web Development you might consider reading What is really Web 2.0 and Mashup means?

Feel free to share it!

Subscribe To Us, It's Free!

Enter your email address:

Delivered by FeedBurner

Related Posts by Categories