CSS3 Breadcrumbs

This is my humble contribution to the general movement to make image-based web page layouts obsolete in favor of semantic HTML and CSS3 styling.

Download & Use

You can clone this repository with

git clone git://github.com/komputerwiz/css3-breadcrumbs.git

or download a zip file or tarball snapshot.

There are four usage options available:

1. Copy css/breadcrumbs.css and include it in your layout.

2. Copy css/breadcrumbs-slim.css, modify it to include any necessary browser prefixes (needed for declarations separated by blank line), and use that in your theme.

3. Use the files under scss to build your own distribution using the SASS Stylesheet Language.

4. If you use the Compass framework, just copy compass/breadcrumbs.scss into the appropriate folder in your project.

Demo

See this code in action!

File Manifest

• index.html: Sample HTML file with markup for your breadcrumbs.

• css/breadcrumbs-slim.css: The minimum required CSS to get the basic styling. This file does not have any vendor prefixes and will probably not display well in all web browsers. Please modify to fit your needs.

• css/breadcrumbs.css: A filled-in version of the slim file with hover and click states; designed to be plug-and-play.

• css/demo.css: Stylesheet for demo web page.

• scss/breadcrumbs.css: All of the (Sassy) logic used to build the breadcrumbs.css file. This might be a little easier to understand.

• scss/_*.scss: other libraries that you might find useful. Credit to Adam Savitzky for the Sass-Math functions: it brought to mind several good memories of sequences and series from my Calculus 2 course!

• compass/breadcrumbs.scss: Duplicate of the SASS version, but written for the Compass CSS Authoring Framework.

License

Apart from Sass-Math, this is my own work, which I hereby release to the public domain. Feel free to do whatever you want with this code. Enjoy!