Code

Inline

Wrap inline snippets of code with <code>.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

User input

Use the <kbd> to indicate input that is typically entered via keyboard.

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

Scrollable

You may optionally add the .scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.

@mixin column-child($columns) {
  > .column {
    width: percentage(1 / $columns);
  }
}

@mixin column-self($columns, $value) {
  &.column {
    width: percentage(1 / $columns * $value);
  }
}


$columns: "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve";

@for $i from 1 through length($columns) {
  .grid.#{nth($columns, $i)} {
    @include column-child($i + 1);
    @for $j from 1 through $i - 1 {
      > .#{nth($columns, $j)}{
        @include column-self($i + 1, $j + 1);
      }
    }
  }
}

<pre class="scrollable">
  ...
</pre>