compass/examples/compass/utilities.html.haml

137 lines
4.1 KiB
Plaintext

!!! Transitional
%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
%head
%meta{'http-equiv' => "content-type", :content => "text/html;charset=UTF-8"}
%title Compass Utilities Example
%link{:rel=>"stylesheet", :href=>"stylesheets/utilities.css", :type=>"text/css", :media=>"screen, projection"}
%body
#utilities
%h1 Compass Utilities Demo
#links
.example
%h2 Link Styling
%ul
%li.normal
%a{:href => "#normal-link"} This is a link, nothing special about it.
%li.hover
%a{:href => '#hover-link'}
This is underlined when hovered because it is using the
%code.mixin +hover-link
mixin.
%li.colored
%a{:href => '#colored-link'}
This should have different colors
because it is using the
%code.mixin +link-colors
mixin.
%li.unstyled
This is some text
%a{:href => '#unstyled-link'} with a link in it.
But you shouldn't see it
because it is using the
%code.mixin +unstyled-link
mixin.
#tag-cloud
.example
%h2 Tag Cloud
%p
This tag cloud is actually an ordered list so that the markup semantics are correct.
It demonstrates the following mixins:
%ul
%li
%code.mixin +inline-list
%li
%code.mixin +tag-cloud(1em)
%li
%code.mixin +no-bullets
%ol
%li.xxs lorem
%li.xs ipsum
%li.s dolor
%li sit
%li.l amet
%li.xl consectetur
%li.xxl adipisicing
%li.xs elit
%li.s sed
%li.l eiusmod
%li.xxl tempor
%li.xxs incididunt
%li labore
%li.xs dolore
%li magna
%li.xl aliqua
#lists
.example
%h2 Lists
.p
This text contains
%ul.inline
%li a
%li list
%li that
%li is
%li completely
%li inline
so be semantic!
My favorite colors are:
%ul.comma-delimited
%li red
%li yellow
%li blue
%ol.pretty
%li
This uses the
%code.mixin +pretty-bullets
mixin.
%li Do you like them?
%li If you don't...
%li Make them yourself!
#tables
.example
%h2 Tables
%p
This table is styled using
%code.mixin +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.
%table.alternating
%thead
%tr
%td  
%th.even Header #1
%th.odd Header #2
%th.even Header #3
%tr.odd
%th Row #1
%td.numeric.even 1.1
%td.numeric.odd 1.2
%td.numeric.even 1.3
%tr.even
%th Row #2
%td.numeric.even 2.1
%td.numeric.odd 2.2
%td.numeric.even 2.3
%tr.odd
%th Row #3
%td.numeric.even 3.1
%td.numeric.odd 3.2
%td.numeric.even 3.3
%tr.even
%th Row #4
%td.numeric.even 4.1
%td.numeric.odd 4.2
%td.numeric.even 4.3
%tr.odd
%th Row #5
%td.numeric.even 5.1
%td.numeric.odd 5.2
%td.numeric.even 5.3
%tfoot
%tr
%th Totals
%td.numeric.even 15.5
%td.numeric.odd 16.0
%td.numeric.even 17.5