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
There are four usage options available:
css/breadcrumbs.cssand include it in your layout.
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.
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.cssfile. 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.
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!