.texture-examples
  .texture-examples-container
    %h3 Legend
    :javascript
      for (i = 1; i < 89; i++) {
        document.write('<div class="texture-' + i + '">')
          document.write('<h4>' + i + '</h4>')
          document.write('<div class="examples">')
            document.write('<div class="example-normal"></div>')
            document.write('<div class="example-inverted"></div>')
          document.write('</div>')
        document.write('</div>')
      }
    .instructions
      %b Instructions
      %p Each texture has two versions, shown in each box in the pattern; a normal version and an inverted one. Some versions work better on dark backgrounds, some on light. Switch between the two by changing between 0 and 1 for the final argument passed in the @include.
      %p The mixin can change background color – or gradient colors – for the texture, along with gradient angle.
      %p
        The two squares below is what will be rendered if you copy-paste the code. Use the numbers in the legend above to switch textures in the code. This is done by changing the texture number in the @include for .texture-normal or .texture-inverted. The default selection is texture number 67. Most of these textures are from
        %a{href: "http://subtlepatterns.com/"} subtlepatterns.com