Showcase of Web Based Data Grids

Smashing Magazine has an excellent review of JavaScript based data grids. The showcased products cover a range of licenses and price points. With more and more projects moving towards rich user interfaces some of these may come in handy. The data grid from ExtJs, along with the entire ExtJs library, looks like something I can put to use right away.

Wordpress Themes as Web Design Examples

This week this blog has been featured on The New Blog Carnival, a listing of new blogs. The showcase includes blogs of several different targets, but I did notice a list of 74 Wordpress themes. I do not use Wordpress for my own blogs (although I may switch sometime in the future), but they are a good source of web design and CSS ideas. I invite you to go take a look.

Better CSS Coding

You can find a lot of advice on how to write optimized CSS code. Unfortunately, the more optimized the code is, the harder it is to maintain. I like to recommend to people to focus on writing clear and understandable CSS code. Once your CSS is easy to understand, optimizations such as reduction of duplicated code will soon follow. Thus I was happy to see Smashing Magazine have a post 70 Expert Ideas For Better CSS Coding that focuses on how to write better CSS code.

Using Ems for More than Font Size

It is common practice to use the em unit to specify font sizes in CSS. What I have not seen very often is using ems to specify other styles like width. For example, say you have a fixed width menu specified with the following style:

div.menu
{
   width: 175px;
   font-size: 1.1em;
}

This is good practice since you or the end user can change the font size of the page and the font size of your menu will change accordingly. However, since the width of your menu is fixed, the text may wrap as font size increases. An alternative style would be:

div.menu
{
   width: 10em;
   font-size: 1.1em;
}

Specifying the width in ems forces the width to be relative to the font size. Therefore as the font size of your page increases, the absolute width of your menu increases as well.

For more information on using ems for widths check out this article on the css-discuss Wiki.

A Nested Format for CSS Files

As my comfort level with Cascading Style Sheets has increased, I found my CSS files growing in size and complexity. The struggle has been to keep these files organized and easy to maintain. My approach in the past has been to keep my CSS selectors in the following order:

1. Tags
2. Classes
3. IDs

and using alphabetical order within these categories. While it is a method for organization, it is not very good. There is no visual connection between my CSS code and my HTML document, and the format does not lend itself well to optimizing the code.

Last week I stumbled on the Sass framework. Sass is a Ruby library for generating CSS files. While I do not use Ruby so I cannot make use of the framework, one of the output formats intrigued me. This format uses whitespace to give the appearance of one selector being nested inside of another.

Original

table
{
   margin: 25px 0 25px 0;
   border: 1px solid black
}

thead th
{
   text-align: left;
   font-size: 1.2em;
}

th.numeric,
td.numeric
{
   text-align: right;
}

tbody th
{
   text-align: left;
}

Nested

table {
   margin: 25px 0 25px 0;
   border: 1px solid black; }

   table .numeric {
       text-align: right; }

   table thead {}
       table thead th {
           text-align: left;
           font-size: 1.2em; }

   table tbody {}
       table tbody th {
           text-align: left; }

If you pay attention to the braces you will notice that the selectors are not actually nested, but the whitespace give the illusion that they are. I am still experimenting how explicit to be when nesting the selectors. I like the format because it corresponds to the structure of the related HTML document and makes it easier to see duplicated style rules.

Give this CSS format a try and let me know what you think.