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