June 19, 2011

June 2011 Meeting Report:
CSS Grids

At the June meeting, we went through a number of preliminary topics before getting to the main meeting. We demo'ed a new Windows utility from Stardock called Fences. Fences organizes icons on a desktop in movable sections. There are free and Pro versions. We then looked at two interesting navigation concepts for websites. One was the State of Utah's new site, which is very search-centric. The other site was called Eight, and it is inspired by the new Windows 8 interface that has been getting some notice recently.

Next we tried out a new, free HTML editor called BlueGriffon. BlueGriffon has a heritage from an earlier editor called Nvu. The new version has a toggle between wysiwyg and source screens, letting you edit in either, and there are premium add-ons available to purchase. There are versions for Win, Mac, Ubuntu, and of course OS/2. We used this editor during the meeting to edit our demo files. There are videos on how to create a website using BlueGriffon. The first video of the series is at http://youtu.be/bWPj7EGjQt0 .

Our main topic was wire frames or grids -- CSS files that set up intuitive layout schemes, letting you organize multiple elements on a page without a lot of effort. To demonstrate the concept, we used Blueprint, a CSS framework that includes a grid setup plus a full set of files to form the foundation of a site. Blueprint sets up a fixed width page. It then uses div's that have widths based on 1/24 of the page width and floats them to organize the elements. There is a lot of non-semantic code in frameworks, and the style sheets have a lot of declarations that end up not being used. But there are advantages to using grids to create page templates, particularly if you are working with other content producers.

I found this tutorial from Net Tuts + to be very useful in learning how to use Blueprint.

There are many other frameworks out there, and Tripwire Magazine has an article on twelve of them.

No comments: