Added a compass example page that demonstrates the various utility mixins
This commit is contained in:
Chris Eppstein
parent
fbceb3fbbc
commit
0897cb6f64
BIN
examples/compass/stylesheets/images/blue_arrow.gif
Normal file
BIN
examples/compass/stylesheets/images/blue_arrow.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 B |
66
examples/compass/stylesheets/utilities.sass
Normal file
66
examples/compass/stylesheets/utilities.sass
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
@import compass/reset
|
||||||
|
@import compass/utilities
|
||||||
|
@import yui/modules/base
|
||||||
|
@import blueprint/modules/grid
|
||||||
|
@import blueprint/modules/scaffolding
|
||||||
|
|
||||||
|
html
|
||||||
|
+reset-html
|
||||||
|
+yui-base
|
||||||
|
|
||||||
|
h2
|
||||||
|
:margin-top 0
|
||||||
|
:border-bottom 2px solid #777
|
||||||
|
|
||||||
|
#utilities
|
||||||
|
+container
|
||||||
|
|
||||||
|
.example
|
||||||
|
:border 2px solid #ccc
|
||||||
|
:padding 4px
|
||||||
|
|
||||||
|
#links
|
||||||
|
+column(8)
|
||||||
|
|
||||||
|
.hover a
|
||||||
|
+hover-link
|
||||||
|
.colored a
|
||||||
|
+link-colors(#C00, #C0C, #700, #707, #777)
|
||||||
|
.unstyled
|
||||||
|
:color #333
|
||||||
|
a
|
||||||
|
+unstyled-link
|
||||||
|
.mixin
|
||||||
|
:font-family monospace
|
||||||
|
:border
|
||||||
|
:width 1px
|
||||||
|
:style solid
|
||||||
|
:border-color #ccc
|
||||||
|
:border-color -moz-use-text-color
|
||||||
|
:padding 2px
|
||||||
|
:line-height 22px
|
||||||
|
|
||||||
|
|
||||||
|
#tag-cloud
|
||||||
|
+column(8)
|
||||||
|
ol
|
||||||
|
:margin 0
|
||||||
|
+inline-list
|
||||||
|
+tag-cloud(1em)
|
||||||
|
li
|
||||||
|
+no-bullets
|
||||||
|
|
||||||
|
#lists
|
||||||
|
+column(8, last)
|
||||||
|
ul.inline
|
||||||
|
+inline-list
|
||||||
|
ul.comma-delimited
|
||||||
|
+comma-delimited-list
|
||||||
|
ol.pretty
|
||||||
|
+pretty-bullets(images/blue_arrow.gif, 5px, 7px, 24px)
|
||||||
|
|
||||||
|
#tables
|
||||||
|
+column(16)
|
||||||
|
table.alternating
|
||||||
|
:width 100%
|
||||||
|
+alternating-rows-and-columns(#F9E5A7,#CEFBB3,#222)
|
||||||
136
examples/compass/utilities.haml
Normal file
136
examples/compass/utilities.haml
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
!!! 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
|
||||||
Loading…
Reference in New Issue
Block a user