137 lines
4.1 KiB
Plaintext
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
|