What is CSS Framework?
A CSS framework is a simple template that may contain several CSS and HTML files which you can use as a starting point for your websites. Every web developer knows, that at some point you have to define classes and IDs you’ve already defined in your previous web-projects, so instead of defining global reset, consistent baseline, page structure CSS definitions or basic styles for forms over and over again - every time you work on a new site - you can prepare a default-style once and reuse it in almost all your future projects. This is what we 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
- reset.css global CSS reset,
- elements.css default elements definitions (h1 â h6, p, a, … etc.).
- grid.css for grid-based layouts or
- structure.css for page main containers (header, sidebar and footer),
- form.css for basic form styling
and so on. In your code segmentation you can also go further, for instance: print, mobile web, tweaks (mostly old style browser hacks), browser specific workarounds (via IE conditional statement). There is one thing that you should bear in mind - code segmentation in frameworks is handy to work with, but it can add some real load to a server with the extra HTTP requests per page view.
Below you will find several ready-to-use frameworks:
Blueprint
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.
Besides, you can also use the Blueprint Grid CSS Generator to generate more flexible versions of Blueprint’s templates. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint CSS Framework - a new “to-become-standard” in grid-based design approach.
Yahoo! UI Library CSS Foundation
Yahoo! UI Library presents a set of CSS frameworks: the core YUI CSS foundation includes the Reset CSS, Base CSS, Fonts CSS, and Grids CSS packages.
While Reset CSS removes and neutralizes the inconsistent default styling of HTML elements, Base CSS applies a consistent style foundation for common HTML elements across A-grade browsers.
Fonts CSS offers cross-browser typographical normalization and control; the framework provides consistent font sizing and line-height, supports user-driven font-size adjustment in the browser, including cross-browser consistency for adjusted sizes and works in both Quirks Mode and Standards Mode.
Grids CSS delivers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. The framework supports easy customization of the width for fixed-width layouts; it also supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number. YUI also offers The YUI Grids Builder - a simple interface for Grids customization.
You should be aware that these frameworks are often criticized for bloating the code with non-semantic markup and generating too many unnecessary classes, IDs and div-containers in CSS. Yahoo! UI Library also provides a detailed documentation with numerous examples, tutorials, cheat sheets, templates and tools.
YAML (Yet Another Multicolumn Layout)
Dirk Jesseâs extensive (X)HTML/CSS Framework offers the whole bunch of default-templates for a number of simple or more complex web-projects. 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.
You can also use a YAML Builder to develop your layout visually - in your web-browser. You can choose a Doctype, basic layout elements (#header, #footer, â¦), the number of content columns as well as preferred column order and set the layout and column widths. You can also drag & drop and nest both sub-templates and dummy content, display and output the complete code (XTHML markup and CSS) and switch between draft mode and preview of the finished layout.
Tags: blueprint, browser, CSS, frameworks, generator, grid, HTML, layout, Library, reset, template, web, yaml, yui
Related:
Posted in CSS. 368 views
You can leave a response, or trackback from your own site.
