rajesh’s blog

Cascading style sheets(CSS), which is responsible for styling various web pages, is and has always been going through a lot of changes. This blog post, tries to summarize some of the new and exciting ways to write it.

1. Grids
   • Reset - reset the default font styling in all major browsers
   • Column grid
   A set of classes or styles, which you can use to generate a grid. This is extremely helpful if you want to layout a site quickly. Most often these grids provide a centered layout of some xxx px, which can be split into any number of columns that you wish.
   • Typography
   A set of classes which prescribe the default font sizes and the type of fonts to use. For example,<h1> bold 36px Verdana and <h2> bold 30px Verdana
   • Icons
   A set of icons that are widely used. Although the default icons may not be useful or ideal for everyone, they can act as a placeholder. Typically they include icons such as RSS feed, user add/delete, buttons etc
   • Styles for form elements
   This is very helpful, if the website that you are developing includes lot of forms. Frequently the grids provide ways to develop inline and block styles for form elements.
   • Scripts/Tools
   Scripts to minify/compress the css. These could help you save bandwidth. My personal preference is the Yahoo UI compressor, which can compress both your css and js.
CSS Grids are widely used to handle the differences between various browser implementations and to simplify common tasks. Of the various grids - 960.gs, YUI grid, Blueprint, Bluetrip seem to be ones that are widely used. CSS grids typically include the following - You can choose one or more of the available components from a CSS Framework depending on your situation. Be advised, there is no one framework that can be used for handling all the styles/issues that you have in mind. Each CSS framework is designed with a set of principles in mind, while being flexible enough to allow addition of other styles.
2. OO approaches to write/generate CSS

First of all, CSS is not object oriented and is not a programming language. The sole purpose of CSS is to let the browser know how to display or render a HTML element. Object oriented approaches to CSS, are targeted at redundancies in writing CSS. For example, consider the following CSS

#container #content #header .title {

    font-size: 16px;

}

#container #content #header .sub-title {

    font-size: 12px;

}

You see the problem? If you change the name of the '#content' to '#newcontent', within your html markup, then you end up changing all occurrences of #content in your CSS. SaSS and xCSS are attempts at applying the DRY (Do not Repeat Yourself) programming paradigm to CSS. They typically rely on a programming language such as PHP or ruby to generate CSS. For example, SaSS converts

#box
:border 0
:color black
.orange
:border 1px orange

to

#box {
border: 0;
color: black;
}
#box .orange {
border: 1px orange;
}

 Combine this with the abilities to use variables, mixins and templates. You can see how useful it could be in managing the css for a big corporate website.

I am eager to hear about any good frameworks or tools that I might have missed as part of this blog post.

Here is how you can position an element at the center of a web page (both horizontally and vertically).

The content of the div with the id 'centered', will be positioned at the center of the web page. The 'absolute' positioning ensures that it is positioned at the center w.r.t the webpage or document.Instead if you want to position an element relative to an enclosing div, changing docheight and docwidth variables accordingly ensures that your element is centered.

This is often useful in situations where you want to display error messages like 404-page not found and for showing 'page redirect' messages.