When planning a page:

  • Know your use case
  • Prioritize your content
  • Keep related content close together

When laying out content on a page:

  • Use one of the Common layouts
  • Maintain a meaningful reading order across breakpoints between:
    1. Source/markup order
    2. Visual display order (the sequential logic of the graphical layout)
    3. Tab/keyboard focus order.
  • Use semantic HTML5 markup
  • Use Grid rows and columns only as needed
    • When customizing, beware of both squashed and overly-wide text content blocks
  • Test pages in viewport widths across all breakpoints (from 536 to 1200 pixels)
  • Define the language and reading direction in the <html> element (using lang and dir)
    • Use left- and right- aligned text for left-to-right and right-to-left languages respectively;
    • Be careful of eroding readability when using justified text;
    • Avoid centered text formatting outside of headings or hero copy.