Update the docs for lists.

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'

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'

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

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'

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;
+  }
+}

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;