Inspired by the Apps for Democracy contest which encouraged developers to build useful applications from DC’s Data Catalog, I built a Google Maps mashup which displays bike lanes and signed bike routes. Use the map as a starting to point to plan your ride through the city.

Tech Notes

The ‘Bicycle Lane‘ and ‘Signed Bike Route‘ KMZ files from the DC Data Catalog are used. Data is pulled daily. Before displaying, the files are filtered to display only existing bike lanes.

After much delay comes the new update. I’m not extending the functionality at this point but making some tweaks and fixing some of the small bugs. You can grab it from the main page: Lightbox JS v2.03

• Object and Embed elements hidden on Lightbox activation, prevents Flash movies and other media from appearing through Lightbox image
• extended keyboard support (arrow keys, esc key)
• added toggle in Javascript file to turn off animations
• imagemap support
• valid CSS
• clicking anywhere in ‘shadow’ closes Lightbox
• removeDuplicates function works with incontiguous items
• a bit of code cleanup

Like I said, minor stuff.

Better late then never? The forum is run with Vanilla, a web forum created by the team over at Lussumo.

Use the comments on this entry to post and discuss bugs, questions, and troubleshoot the script. I’ll be in and out of here.

3/31/06: I’ve Released a minor update v2.01 that fixes IE6 centering and smooths out the kinks in the resize transition. If you’re looking for multi-line captions or keyboard navigation, expect another minor update this weekend.

4/4/06: New update v2.02 that keeps the layout in check when captions extend to multiple lines. Keyboard navigation has also been enabled. Lastly, the addition of a variable in the lightbox.js configuration section to control the speed of the resize transitions.

Grouping Your Styles

Group your styles into categories (ex. layout, typography, forms, so on) and visually seperate them in your css file. A title and table of contents doesn’t hurt either:

/*
	HuddleTogether.com Screen Styles

	Table of Contents:
		layout
		typography
		forms
*/

/* layout
----------------------------------------------- */

/* typography
----------------------------------------------- */

/* forms
----------------------------------------------- */

Choosing Your Categories

Even though I do have some common practices, I don’t have a ‘template’ for how to breakdown styles into categories.

For starters, I almost always have layout and typography categories. With typography defining the sitewide look and feel. Depending on the complexity, I may break out the table and form styles into their own categories.

Next, I address the physical sections of the page with their own categories: header, sidebar, content, and footer for example. Lastly, I collect the page and content section specific styles and place them in their own category (and sometimes subcategories).

Importing Stylesheets

Another method is to categorize the styles and place them in seperate CSS files which are all imported by one main CSS file. I find this method good in theory but it can lead to overlapping styles, specification issues, and general confusion if you’re not very careful:

@import url("layout.css");
@import url("typography.css");
@import url("forms.css");

Linebreaks and Indenting

When styling multiple tags, ids, or classes with common attributes, display each on its own line. Also, indent closing braces. Both these actions keep the left column clean so you can quickly skim your stylesheet:

h2,
h3,
h4 {
	font-weight: bold;
	padding-bottom: 1.5em;
	}
h5 {
	font-weight: normal;
	font-size: 1.5em;
	padding-bottom: 0;
	}

Descendant Selectors

Use descendant selectors generously and consistently to keep your styles grouped neatly and CSS specificity in check:

#header {}
#header .logo {}
#header .logo img {}

Quick Disable

A trick I use all the time to temporarily disable a style attribute involves simply adding an ‘x’ in front of the attribute name. It’s safer then cutting and quicker then commenting out:

#footer{
	border-top: 1px solid #e5e5e5;
	xborder-bottom: 1px solid #e5e5e5;
	}

Keeping Track of Divs

Quick HTML pointer. For div tags that stay open for a number of lines, add a small comment after the closing tag about the opening div’s id or class:

<div id="content">
	<h2></h2>
	<p></p>
	<p></p>
	<p></p>
	<p></p>
</div><!-- end #content-->

Question: Anyone have an idea why my RSS feed appears ‘broken’ at the moment? I’m using WordPress 1.5. hmm…

Grab the latest files here: Lightbox JS

Just a teaser, but per many requests for extended functionality, I am working on a complimentary ‘photo-gallery’ script. It will include forward/back navigation, preloading, and much more. Check back next week.