index.scss

// Dodging Bullets
//
// A mobile-first approach to hanging bullets and ordinals for ordered and unordered lists.
//
// Styleguide: list

// Unordered Lists
//
// Lists with mobile-first, hanging bullets.
//
// At small screen sizes, the list items
// are indented, creating a visual alignment between the bullets and the outer
// margin. At larger screen sizes, where there is room, the bullets will hang,
// creating the prefered visual alignment between the list item text and the
// outer margin.
//
// Markup:
// <ul>
//   <li>Skia</li>
//   <li>Carter Sans</li>
//   <li>Georgia</li>
//   <li>Verdana</li>
//   <li>Yale</li>
//   <li>Bitstream Charter</li>
//   <li>Bell Centennial</li>
//   <li>Tahoma</li>
// </ul>
//
// Styleguide: list.unordered-list
ul,
ol {
  padding-left: 0;
  margin-bottom: 1em;
  margin-left: 2em;
  // …hang after there’s enough space
  @media (min-width: 50em) {
    margin-left: 0;
  }
  ul,
  ol {
    padding: 0;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 1em;
  }
}

// Ordered Lists
//
// Lists with mobile first tabular, hanging numbers.
//
// At small screen sizes, the list items
// are indented, creating a visual alignment between the numbers and the outer
// margin. At larger screen sizes, where there is room, the numbers hang,
// creating the prefered visual alignment between the list item text and the
// outer margin.
//
// Based on [Normalize-OpenType.css](http://github.com/kennethormandy/normalize-opentype.css),
// and when the font supports it, tabular numbers are also used to vertically stack
// the item numbers. The old style variant is also chosen, to keep the x-height
// in-line with the list item text.
//
// Markup:
// <ol>
//   <li>Bell Centennial</li>
//   <li>Bitstream Charter</li>
//   <li>Carter Sans</li>
//   <li>Georgia</li>
//   <li>Skia</li>
//   <li>Tahoma</li>
//   <li>Verdana</li>
//   <li>Yale</li>
// </ol>
//
// Styleguide: list.ordered-list
ol {
  counter-reset: li;
  & > li {
    list-style: none;
    position: relative;
    &:before {
      content: counter(li) "."; // Use the counter as content
      counter-increment: li; // Increment the counter by 1
      text-align: left;
      // min-width: 2em; // Min-width of area for number
      // margin-left: -2em; // Hang number
      // padding-right: 0em; // Space between number and list item
      transform: translateX(-100%);
      padding-right: 0.5em;
      text-align: right;
      position: absolute;
      font-feature-settings: "kern" 0, "tnum" 1, "onum" 1, "liga" 1;
    }
  }
}