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.

June 2011 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, June 18, at our usual 9-10 hour. This session is the last until PACS meets again in September.

Last month, we started on CSS grids, and we will get to that topic in more depth this month, including looking at some examples.

I also want to take a quick look at BlueGriffon, a new free cross-platform website editor. And I will demonstrate a new desktop utility that has nothing to do with CSS but is pretty cool anyway.

Designing a Scheme for Website Navigation

We have spent a lot of time at our meetings talking about techniques for website navigation. This article from Smashing Magazine is a great compilation of ideas on designing a navigation system for your site.

At our next meeting, I will demo a completely different navigation system from a state government's re-designed site.