A Sass mixin for block lists.

Readme.md

Turns a standard list into a block list; very useful for touch interfaces. Improvements welcome.

• Codepen: http://codepen.io/krisbulman/pen/zhlrs
• JSFiddle: http://jsfiddle.net/pwRqS/11/
• Ported into a mixin from inuit.css: https://github.com/csswizardry/inuit.css/blob/7dbc892f8d298795e19aeb64d1369ae3271561d1/objects/_block-list.scss

Thanks to Harry Roberts for this awesome technique.

index.html

<ul class="block-list">
  <li>
    Foo
  </li>
  <li>
    <a href="#">Bar</a>
  </li>
  <li>
    <a href="#">Baz</a>
  </li>
</ul>

style.css

.block-list {
  border-top: 1px solid #cccccc;
  list-style: none;
  padding-left: 0;
}

.block-list > li {
  border-bottom: 1px solid #cccccc;
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  padding: 0.75em;
}

.block-list > li a {
  display: block;
  padding: 0.75em;
  margin: -0.75em;
}

style.scss

// Block List of Content
//
// Turns a standard list into a block list; very useful for touch interfaces.
//
// Inspired by inuit.css https://github.com/csswizardry/inuit.css
//
// Arguments accepted:
// $selector - optionally configure block link selectors
// $border-color - color of border
// $border-bottom-width - size of bottom border
// $item-padding - a single value for space around the item
//
// Browser Compatibility:
// IE7+: This is a progressive enhancement mixin,
//       block links are not 100% width in IE7.

@mixin block-list($link-selector: 'a', $border-color: #ccc, $border-width: 1px, $item-padding: 0.75em) {
  border-top: $border-width solid $border-color;
  list-style: none;
  padding-left: 0;
  > li {
    border-bottom: $border-width solid $border-color;
    list-style-image: none;
    list-style-type: none;
    margin-left: 0;
    padding: $item-padding;
    #{$link-selector} {
      display: block;
      padding: $item-padding;
      margin: -$item-padding;
    }
  }
}

// Standard usage
.block-list {
  @include block-list('.block-list__link');
}