Compass Utilities Demo

Link Styling

• This is a link, nothing special about it.
• This is underlined when hovered because it is using the +hover-link mixin.
• This should have different colors because it is using the +link-colors mixin.
• This is some text with a link in it. But you shouldn't see it because it is using the +unstyled-link mixin.

Tag Cloud

This tag cloud is actually an ordered list so that the markup semantics are correct. It demonstrates the following mixins:

• +inline-list
• +tag-cloud(1em)
• +no-bullets

1. lorem
2. ipsum
3. dolor
4. sit
5. amet
6. consectetur
7. adipisicing
8. elit
9. sed
10. eiusmod
11. tempor
12. incididunt
13. labore
14. dolore
15. magna
16. aliqua

Lists

1. This uses the +pretty-bullets mixin.
2. Do you like them?
3. If you don't...
4. Make them yourself!

Tables

This table is styled using +alternating-rows-and-columns(#F9E5A7,#CEFBB3,#222) The first colors are the even/odd colors respectively and the last argument is a shade that is subtracted from those colors for the even columns.