From 8d5e6406fa13bbf8e3ce0c6e1362fbdb33d739a6 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Mon, 26 Apr 2010 01:34:56 -0700 Subject: [PATCH] Update the docs for lists. --- .../reference/compass/utilities/lists.haml | 5 ++- .../compass/utilities/lists/bullets.haml | 5 ++- .../utilities/lists/horizontal_list.haml | 18 ++++++++-- .../compass/utilities/lists/inline_list.haml | 5 ++- .../compass/utilities/lists/_bullets.scss | 34 +++++++++++++------ .../compass/utilities/lists/_inline-list.scss | 10 +++--- 6 files changed, 50 insertions(+), 27 deletions(-) diff --git a/doc-src/content/reference/compass/utilities/lists.haml b/doc-src/content/reference/compass/utilities/lists.haml index ffe5ea8d..8f7190f4 100644 --- a/doc-src/content/reference/compass/utilities/lists.haml +++ b/doc-src/content/reference/compass/utilities/lists.haml @@ -5,11 +5,10 @@ framework: compass stylesheet: compass/utilities/_lists.scss layout: core nav_stylesheet: compass/_utilities.scss +meta_description: Tools for styling lists. classnames: - reference - core - utilities --- -- render 'reference' do - %p - Lorem ipsum dolor sit amet. += render 'reference' diff --git a/doc-src/content/reference/compass/utilities/lists/bullets.haml b/doc-src/content/reference/compass/utilities/lists/bullets.haml index 6c5d1444..94da0c93 100644 --- a/doc-src/content/reference/compass/utilities/lists/bullets.haml +++ b/doc-src/content/reference/compass/utilities/lists/bullets.haml @@ -4,12 +4,11 @@ crumb: Bullets framework: compass stylesheet: compass/utilities/lists/_bullets.scss layout: core +meta_description: Mixins for managing list bullets. nav_stylesheet: compass/_utilities.scss classnames: - reference - core - utilities --- -- render 'reference' do - %p - Lorem ipsum dolor sit amet. += render 'reference' diff --git a/doc-src/content/reference/compass/utilities/lists/horizontal_list.haml b/doc-src/content/reference/compass/utilities/lists/horizontal_list.haml index 44ba14a4..56a4cd86 100644 --- a/doc-src/content/reference/compass/utilities/lists/horizontal_list.haml +++ b/doc-src/content/reference/compass/utilities/lists/horizontal_list.haml @@ -4,6 +4,7 @@ crumb: Horizontal List framework: compass stylesheet: compass/utilities/lists/_horizontal-list.scss layout: core +meta_description: Float a list so it appears horizontally. nav_stylesheet: compass/_utilities.scss classnames: - reference @@ -11,5 +12,18 @@ classnames: - utilities --- - render 'reference' do - %p - Lorem ipsum dolor sit amet. + :markdown + Easy mode using simple descendant li selectors: + + ul.nav + +horizontal-list + + Advanced mode: + If you need to target the list items using a different selector then use + +horizontal-list-container on your ul/ol and +horizontal-list-item on your li. + This may help when working on layouts involving nested lists. For example: + + ul.nav + +horizontal-list-container + > li + +horizontal-list-item diff --git a/doc-src/content/reference/compass/utilities/lists/inline_list.haml b/doc-src/content/reference/compass/utilities/lists/inline_list.haml index aacbedb0..17545c86 100644 --- a/doc-src/content/reference/compass/utilities/lists/inline_list.haml +++ b/doc-src/content/reference/compass/utilities/lists/inline_list.haml @@ -4,12 +4,11 @@ crumb: Inline List framework: compass stylesheet: compass/utilities/lists/_inline-list.scss layout: core +meta_description: Style a list as inline text. nav_stylesheet: compass/_utilities.scss classnames: - reference - core - utilities --- -- render 'reference' do - %p - Lorem ipsum dolor sit amet. += render 'reference' diff --git a/frameworks/compass/stylesheets/compass/utilities/lists/_bullets.scss b/frameworks/compass/stylesheets/compass/utilities/lists/_bullets.scss index dbd81b26..6581d28c 100644 --- a/frameworks/compass/stylesheets/compass/utilities/lists/_bullets.scss +++ b/frameworks/compass/stylesheets/compass/utilities/lists/_bullets.scss @@ -1,22 +1,34 @@ // Turn off the bullet for an element of a list @mixin no-bullet { - list-style-image: none; - list-style-type: none; - margin-left: 0px; } + list-style-image : none; + list-style-type : none; + margin-left : 0px; +} // turns off the bullets for an entire list @mixin no-bullets { list-style: none; - li { - @include no-bullet; } } + li { @include no-bullet; } +} -// Make a list(ul/ol) have an image bullet -// mixin should be used like this for an icon that is 5x7: -// ul.pretty -// +pretty-bullets("my-icon.png", 5px, 7px) -@mixin pretty-bullets($bullet-icon, $width, $height, $line-height: 18px, $padding: 14px) { +// Make a list(ul/ol) have an image bullet. +// +// The mixin should be used like this for an icon that is 5x7: +// +// ul.pretty +// +pretty-bullets("my-icon.png", 5px, 7px) +// +// Additionally, if the image dimensions are not provided, +// The image dimensions will be extracted from the image itself. +// +// ul.pretty +// +pretty-bullets("my-icon.png") +// +@mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px) { margin-left: 0; li { padding-left: $padding; background: image-url($bullet-icon) no-repeat 0 + ($padding - $width) / 2 ($line-height - $height) / 2; - list-style-type: none; } } + list-style-type: none; + } +} diff --git a/frameworks/compass/stylesheets/compass/utilities/lists/_inline-list.scss b/frameworks/compass/stylesheets/compass/utilities/lists/_inline-list.scss index 7550f64b..329b5b30 100644 --- a/frameworks/compass/stylesheets/compass/utilities/lists/_inline-list.scss +++ b/frameworks/compass/stylesheets/compass/utilities/lists/_inline-list.scss @@ -11,13 +11,13 @@ display: inline; } } // makes an inline list that is comma delimited. -// use of this recipe is not recommended at this time due to browser support issues. +// Please make note of the browser support issues before using this mixin. // -// use of :content and :after is not fully supported in all browsers. -// See http://www.quirksmode.org/css/contents.html#t15 for the support matrix +// use of `:content` and `:after` is not fully supported in all browsers. +// See quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t15) // -// :last-child is not fully supported -// see http://www.quirksmode.org/css/contents.html#t29 for the support matrix +// `:last-child` is not fully supported. +// see quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t29). @mixin comma-delimited-list { @include inline-list;