Layout

Notes

Page width

The default maximum page width is 1020px, but go wider if the content requires it.

Use a grid to lay out your content. To prevent long lines of text, content should sit in a column which is two-thirds of the page width.

Long lines reduce legibility, so all lines of text should be no longer than 70 to 80 characters.

Screen size

Design for small screens first using a single column layout.

Optimise for different screen sizes, but don’t make assumptions about what devices people are using.

Spacing

  • spacing between elements is usually 5px, 10px, 15px or multiples of 15px
  • gutters are 15px for smaller screens and 30px for larger screens
<!-- Start: @layout--default -->
<div class="grid-row">
    <div class="column-full">
        <p style="background-color:#dee0e2;padding:10px;text-indent:-9999px">Column</p>
    </div>
</div>

<div class="grid-row">
    <div class="column-one-half">
        <p style="background-color:#dee0e2;padding:10px;text-indent:-9999px">Column</p>
    </div>
    <div class="column-one-half">
        <p style="background-color:#dee0e2;padding:10px;text-indent:-9999px">Column</p>
    </div>
</div>

<div class="grid-row">
    <div class="column-one-third">
        <p style="background-color:#dee0e2;padding:10px;text-indent:-9999px">Column</p>
    </div>
    <div class="column-one-third">
        <p style="background-color:#dee0e2;padding:10px;text-indent:-9999px">Column</p>
    </div>
    <div class="column-one-third">
        <p style="background-color:#dee0e2;padding:10px;text-indent:-9999px">Column</p>
    </div>
</div>

<div class="grid-row">
    <div class="column-two-thirds">
        <p style="background-color:#dee0e2;padding:10px;text-indent:-9999px">Column</p>
    </div>
    <div class="column-one-third">
        <p style="background-color:#dee0e2;padding:10px;text-indent:-9999px">Column</p>
    </div>
</div>

<div class="grid-row">
    <div class="column-one-quarter">
        <p style="background-color:#dee0e2;padding:10px;text-indent:-9999px">Column</p>
    </div>
    <div class="column-one-quarter">
        <p style="background-color:#dee0e2;padding:10px;text-indent:-9999px">Column</p>
    </div>
    <div class="column-one-quarter">
        <p style="background-color:#dee0e2;padding:10px;text-indent:-9999px">Column</p>
    </div>
    <div class="column-one-quarter">
        <p style="background-color:#dee0e2;padding:10px;text-indent:-9999px">Column</p>
    </div>
</div>
<!-- End: @layout--default -->
 
<div class="grid-row">
  <div class="column-full">
    {{ columnContent }}
  </div>
</div>

<div class="grid-row">
  <div class="column-one-half">
    {{ columnContent }}
  </div>
  <div class="column-one-half">
    {{ columnContent }}
  </div>
</div>

<div class="grid-row">
  <div class="column-one-third">
    {{ columnContent }}
  </div>
  <div class="column-one-third">
    {{ columnContent }}
  </div>
  <div class="column-one-third">
    {{ columnContent }}
  </div>
</div>

<div class="grid-row">
  <div class="column-two-thirds">
    {{ columnContent }}
  </div>
  <div class="column-one-third">
    {{ columnContent }}
  </div>
</div>

<div class="grid-row">
  <div class="column-one-quarter">
    {{ columnContent }} 
  </div>
  <div class="column-one-quarter">
    {{ columnContent }}
  </div>
  <div class="column-one-quarter">
    {{ columnContent }}
  </div>
  <div class="column-one-quarter">
    {{ columnContent }}
  </div>
</div>
 
{
  "@layout--default": {
    "columnContent": "<p style=\"background-color:#dee0e2;padding:10px;text-indent:-9999px\">Column</p>"
  }
}