diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ef718f3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/.sass-cache/ +/compass-build/ +/config.rb \ No newline at end of file diff --git a/README.md b/README.md index 1deab73..51dc3e4 100644 --- a/README.md +++ b/README.md @@ -5,11 +5,13 @@ page layouts obsolete in favor of semantic HTML and CSS3 styling. Download & Use ------------------ -Clone this repository with +You can clone this repository with git clone git://github.com/komputerwiz/css3-breadcrumbs.git -There are three usage options +or download a [zip file][zip-download] or [tarball][tar-download] snapshot. + +There are four usage options available: 1. Copy [`css/breadcrumbs.css`][breadcrumb-css] and include it in your layout. @@ -18,8 +20,12 @@ There are three usage options any necessary browser prefixes (needed for declarations separated by blank line), and use that in your theme. -3. Use the files under [`scss`][breadcrumb-scss] to build your own distribution using the - [SASS Stylesheet Language][sass]. +3. Use the files under [`scss`][breadcrumb-scss] to build your own distribution + using the [SASS Stylesheet Language][sass]. + +4. If you use the [Compass framework][compass-style], just copy + [`compass/breadcrumbs.scss`][breadcrumb-compass] into the appropriate folder + in your project. Demo ---- @@ -27,28 +33,40 @@ Demo File Manifest ------------- -* `index.html`: Sample markup for your breadcrumbs. +* `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 plug-and-play CSS stylesheet with hover and click - states. + +* `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][demo]. -* `scss/breadcrumbs.css`: All of the logic used to build the `breadcrumbs.css` - file. This might be a little easier to understand. + +* `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][adambom] for the _Sass-Math_ functions: it brought - to mind several good memories of sequences and series from my Calculus 2 - course! + [Adam Savitzky][adambom] 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][compass-style]. License ------- -Apart from [_Sass-Math_][adambom-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! +Apart from [_Sass-Math_][adambom-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! +[zip-download]: https://github.com/komputerwiz/css3-breadcrumbs/zipball/master +[tar-download]: https://github.com/komputerwiz/css3-breadcrumbs/tarball/master [breadcrumb-css]: https://github.com/komputerwiz/css3-breadcrumbs/blob/master/css/breadcrumbs.css [breadcrumb-slim]: https://github.com/komputerwiz/css3-breadcrumbs/blob/master/css/breadcrumbs-slim.css [breadcrumb-scss]: https://github.com/komputerwiz/css3-breadcrumbs/tree/master/scss +[compass-style]: http://www.compass-style.org +[breadcrumb-compass]: https://github.com/komputerwiz/css3-breadcrumbs/blob/master/compass/breadcrumbs.scss [sass]: http://sass-lang.com "Syntactically Awesome StyleSheets" [demo]: http://komputerwiz.net/demos/css3-breadcrumbs/ [adambom]: https://github.com/adambom/Sass-Math diff --git a/compass/breadcrumbs.scss b/compass/breadcrumbs.scss new file mode 100644 index 0000000..d88ddd5 --- /dev/null +++ b/compass/breadcrumbs.scss @@ -0,0 +1,120 @@ +@import 'compass'; + +$height: 2em; +$default-border-radius: 4px; + +$inactive: #f0f0f0; +$inactive-dark: #d3d3d3; +$inactive-text: #444; +$inactive-sep: #999; + +$hover: #99e; +$hover-dark: #66c; +$hover-text: #fff; +$hover-sep: #777; + +$active: desaturate(darken($hover, 10%), 10%); +$active-dark: desaturate(darken($hover-dark, 10%), 10%); +$active-text: #eee; +$active-sep: $hover-sep; + +$current-text: #666; + +.breadcrumbs { + border: 1px solid $inactive-sep; + display: inline-block; + font: { + family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; + size: 13px; + } + @include border-radius; + @include box-shadow(0 1px 3px rgba(0,0,0,0.5)); + @include background(linear-gradient(top, $inactive, $inactive-dark)); + @include clearfix; + + ul { + @include inline-list; + + li:first-child { + a, span { + padding-left: 1em; + @include border-left-radius; + } + } + + li:last-child { + a, span { + @include border-right-radius; + + &:after { content: normal; } + } + } + } + + a, span { + color: $inactive-text; + display: block; + float: left; + position: relative; + line-height: $height; + padding: 0 1em 0 1.5em; + text-decoration: none; + @include text-shadow(0 1px 0 rgba(255,255,255,0.7)); + @include background(linear-gradient(top, $inactive, $inactive-dark)); + + &:after { + content: ''; + display: block; + z-index: 1; + + @include box-sizing(border-box); + height: $height; + width: $height; + + border: { + right: 2px solid $inactive-sep; + top: 2px solid $inactive-sep; + } + + position: absolute; + right: 0; + top: 0; + + @include background(linear-gradient(left top, $inactive, $inactive-dark)); + @include transform(translateX($height/2) rotate(45deg) scale(1/sqrt(3)) skew(15deg, 15deg)); + } + + &:hover { + color: $hover-text; + @include text-shadow(0 -1px 0 rgba(0,0,0,0.5)); + @include background(linear-gradient(top, $hover, $hover-dark)); + + &:after { + border-color: $hover-sep; + @include background(linear-gradient(left top, $hover, $hover-dark)); + } + } + + &:active { + color: $active-text; + @include background(linear-gradient(top, $active, $active-dark)); + @include box-shadow(inset 0 0 3px rgba(0,0,0,0.5)); + + &:after { + border-color: $active-sep; + @include background(linear-gradient(left top, $active, $active-dark)); + @include box-shadow(inset -2px 2px 3px rgba(0,0,0,0.5)); + } + } + + &.current, &.current:hover, &.current:active { + background: inherit; + color: $current-text; + @include text-shadow(0 1px 0 rgba(255,255,255,0.7)); + @include box-shadow(none); + @include border-right-radius; + + &:after { content: normal; } + } + } +} \ No newline at end of file diff --git a/css/breadcrumbs-slim.css b/css/breadcrumbs-slim.css index 9eafc6e..9267696 100644 --- a/css/breadcrumbs-slim.css +++ b/css/breadcrumbs-slim.css @@ -1,7 +1,7 @@ .breadcrumbs { display: inline-block; border: 1px solid #999; - font-family: "Lucida Grande"; + font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; font-size: 13px; border-radius: 4px; @@ -18,14 +18,13 @@ } .breadcrumbs ul { - padding: 0; - margin: 0; - list-style: none; + list-style-type: none; } -.breadcrumbs ul li { - list-style: none; - float: left; +.breadcrumbs ul, .breadcrumbs ul li { + padding: 0; + margin: 0; + display: inline; } .breadcrumbs ul li:first-child a, .breadcrumbs ul li:first-child span { @@ -35,6 +34,15 @@ border-bottom-left-radius: 4px; } +.breadcrumbs ul li:last-child a, .breadcrumbs ul li:last-child span { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} + +.breadcrumbs ul li:last-child a:after, .breadcrumbs ul li:last-child span:after { + content: normal; +} + .breadcrumbs a, .breadcrumbs span { color: #444; display: block; @@ -43,6 +51,7 @@ line-height: 2em; padding: 0 1em 0 1.5em; text-decoration: none; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); background: linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%); } @@ -61,10 +70,11 @@ box-sizing: border-box; background: linear-gradient(left top, #f0f0f0 0%, #d3d3d3 100%); - transform: translateX(1em) rotate(45deg) scale(0.5774) skew(15deg,15deg); /* 1/sqrt(3) = 0.5774 */ + transform: translateX(1em) rotate(45deg) scale(0.5774) skew(15deg, 15deg); /* 1/sqrt(3) = 0.5774 */ } .breadcrumbs .current { + background: inherit; color: #777; border-top-right-radius: 4px; diff --git a/css/breadcrumbs.css b/css/breadcrumbs.css index f52ee5f..570b630 100644 --- a/css/breadcrumbs.css +++ b/css/breadcrumbs.css @@ -1,7 +1,7 @@ .breadcrumbs { display: inline-block; border: 1px solid #999; - font-family: "Lucida Grande"; + font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; font-size: 13px; -webkit-border-radius: 4px; @@ -41,28 +41,49 @@ } .breadcrumbs ul { - padding: 0; - margin: 0; - list-style: none; + list-style-type: none; } -.breadcrumbs ul li { - list-style: none; - float: left; +.breadcrumbs ul, .breadcrumbs ul li { + padding: 0; + margin: 0; + display: inline; } .breadcrumbs ul li:first-child a, .breadcrumbs ul li:first-child span { padding-left: 1em; -webkit-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; + -moz-border-radius-topleft: 4px; + -ms-border-top-left-radius: 4px; + -o-border-top-left-radius: 4px; border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; + -moz-border-radius-bottomleft: 4px; + -ms-border-bottom-left-radius: 4px; + -o-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } +.breadcrumbs ul li:last-child a, .breadcrumbs ul li:last-child span { + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; + -ms-border-top-right-radius: 4px; + -o-border-top-right-radius: 4px; + border-top-right-radius: 4px; + + -webkit-border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + -ms-border-bottom-right-radius: 4px; + -o-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; +} + +.breadcrumbs ul li:last-child a:after, .breadcrumbs ul li:last-child span:after { + content: normal; +} + .breadcrumbs a, .breadcrumbs span { color: #444; display: block; @@ -71,6 +92,7 @@ line-height: 2em; padding: 0 1em 0 1.5em; text-decoration: none; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); background: #e1e1e1; background: -webkit-linear-gradient(top, #f0f0f0 0%, #d3d3d3 100%); @@ -94,8 +116,6 @@ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - -o-box-sizing: border-box; box-sizing: border-box; background: #e1e1e1; @@ -168,14 +188,18 @@ .breadcrumbs .current, .breadcrumbs .current:hover, .breadcrumbs .current:active { background: inherit; color: #666; - text-shadow: none; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; + -ms-border-top-right-radius: 4px; + -o-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; + -ms-border-bottom-right-radius: 4px; + -o-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -webkit-box-shadow: none; @@ -187,10 +211,4 @@ .breadcrumbs .current:after, .breadcrumbs .current:hover:after, .breadcrumbs .current:active:after { content: normal; - - -webkit-box-shadow: none; - -moz-box-shadow: none; - -ms-box-shadow: none; - -o-box-shadow: none; - box-shadow: none; } diff --git a/index.html b/index.html index 62373df..b34e116 100644 --- a/index.html +++ b/index.html @@ -2,20 +2,21 @@ - Breadcrumbs + CSS3 Breadcrumbs
diff --git a/scss/breadcrumbs.scss b/scss/breadcrumbs.scss index 5ca4b3e..62b06ad 100644 --- a/scss/breadcrumbs.scss +++ b/scss/breadcrumbs.scss @@ -3,44 +3,73 @@ @import 'css3'; @import 'math'; +$height: 2em; +$border-radius: 4px; + +$inactive: #f0f0f0; +$inactive-dark: #d3d3d3; +$inactive-text: #444; +$inactive-sep: #999; + +$hover: #99e; +$hover-dark: #66c; +$hover-text: #fff; +$hover-sep: #777; + +$active: desaturate(darken($hover, 10%), 10%); +$active-dark: desaturate(darken($hover-dark, 10%), 10%); +$active-text: #eee; +$active-sep: $hover-sep; + +$current-text: #666; + .breadcrumbs { - border: 1px solid #999; - font-family: "Lucida Grande"; - font-size: 13px; + border: 1px solid $inactive-sep; + font: { + family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; + size: 13px; + } - @include border-radius(4px); + @include border-radius($border-radius); @include box-shadow(0, 1px, 3px, rgba(0,0,0,0.5)); - @include gradient(#f0f0f0, #d3d3d3); + @include gradient($inactive, $inactive-dark); @include clearfix; ul { - padding: 0; - margin: 0; - list-style: none; - - li { - list-style: none; - float: left; + list-style-type: none; + + &, & li { + padding: 0; + margin: 0; + display: inline; + } - &:first-child a, &:first-child span { + li:first-child { + a, span { padding-left: 1em; - @include border-left-radius(4px); + @include border-left-radius($border-radius); + } + } + + li:last-child { + a, span { + @include border-right-radius($border-radius); + + &:after { content: normal; } } } } a, span { - $size: 2em; - - color: #444; + color: $inactive-text; display: block; float: left; position: relative; - line-height: $size; + line-height: $height; padding: 0 1em 0 1.5em; text-decoration: none; - - @include gradient(#f0f0f0, #d3d3d3); + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); + @include gradient($inactive, $inactive-dark); &:after { content: ''; @@ -48,55 +77,53 @@ z-index: 1; @include vendor-prefixes(box-sizing, border-box); - height: $size; - width: $size; + height: $height; + width: $height; border: { - right: 2px solid #999; - top: 2px solid #999; + right: 2px solid $inactive-sep; + top: 2px solid $inactive-sep; } position: absolute; right: 0; top: 0; - @include gradient(#f0f0f0, #d3d3d3, left top); - @include transform(translateX($size/2) rotate(45deg) scale(1/sqrt(3)) skew(15deg, 15deg)); + @include gradient($inactive, $inactive-dark, left top); + @include transform(translateX($height/2) rotate(45deg) scale(1/sqrt(3)) skew(15deg, 15deg)); } &:hover { - color: #fff; + color: $hover-text; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); - @include gradient(#99e, #66c); // used to be #99e--#66e + @include gradient($hover, $hover-dark); &:after { - border-color: #777; - @include gradient(#99e, #66c, left top); + border-color: $hover-sep; + @include gradient($hover, $hover-dark, left top); } } &:active { - @include gradient(desaturate(darken(#99e, 10%), 10%), desaturate(darken(#66c, 10%), 10%)); + color: $active-text; + @include gradient($active, $active-dark); @include vendor-prefixes(box-shadow, inset 0 0 3px rgba(0,0,0,0.5)); &:after { - @include gradient(desaturate(darken(#99e, 10%), 10%), desaturate(darken(#66c, 10%), 10%), left top); + border-color: $active-sep; + @include gradient($active, $active-dark, left top); @include vendor-prefixes(box-shadow, inset -2px 2px 3px rgba(0,0,0,0.5)); } } &.current, &.current:hover, &.current:active { background: inherit; - color: #666; + color: $current-text; text-shadow: none; - @include vendor-prefixes(box-shadow, none); - @include border-right-radius(4px); + @include border-right-radius($border-radius); - &:after { - content: normal; - @include vendor-prefixes(box-shadow, none); - } + &:after { content: normal; } } } } \ No newline at end of file