Bugcrowd design system: Layout

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.</>

Grid

Guidance last updated: Jun 17, 2020

A reimplementation of the 12-column Bootstrap 3 grid system.

This means you can use the Bootstrap 3 grid documentation to build grids.

Use a .bc-grid wrapper class for these otherwise unprefixed BS3 grid classes.

Rows can be placed anywhere provided they’re inside a .bc-grid container.

Grid test file.

Grid customizations

  1. Added xl breakpoint ($bc-media-xl)
    • *-xl-*” breakpoint classes
  2. .container-fluid__container: a fixed-width ‘inner’ container for the fluid container.

Common layouts

Guidance last updated: Jun 17, 2020

The common layouts we use in products.

A layout will apply to a viewport width ≥ its defined breakpoint and < the upper breakpoint(s).

This because the Grid system is mobile-first, and the bc-media mixin uses min-width instead of max-width.

Wide page layout

12 grid columns for full container-width wide content.

Use for

  • Big tables
  • Wide graphs
  • Hero or banner content

Wide content layout

Wide content layout test file.

Basic page layout

Page without sidebar.

Use for pages that:

The main content has:

  • 8 grid columns at width ≥ lg
  • 10 grid columns at width < lg and ≥ md.

Basic page layout

Basic page layout test file.

Supporting sidebar layout

8 grid columns for the main content, and 4 columns for the sidebar.

Use for pages that have main content and a related, secondary <aside> or sidebar.

At viewport width ≥ xm and < sm, the layout uses all 12 grid columns (full width), and so the sidebar appears below the main content.

Supporting sidebar layout

Supporting sidebar layout test file.

Important sidebar layout

8 grid columns for the main content, and 4 grid columns for the sidebar. The sidebar should contain information that is important.

Use for pages that have main content but a sidebar with information that comes first in the markup order.

Don’t use for pages that have long sidebar information. This will push the main content further down at screen width ≥ xm and ≤ sm.

At viewport width ≥ xm and < sm, the layout use 12 grid columns (full width) and the sidebar appears above the main content.

Important sidebar layout

Important sidebar layout test file.

Page with navigation

8 grid columns for the main content, and 3 grid columns for the side navigation.

Use for

  • Pages with vertical navigation on the left
  • Pages with data filters on the left.

Don’t use for pages that have main content and a sidebar with information on the left.

Page with navigation layout

Page with navigation layout test file.

Card grid

Cards arranged in a grid.

Each card has:

  • 3 grid columns at width ≥ lg
  • 4 grid columns at width < lg and ≥ md
  • 6 grid columns at width < md and ≥ sm
  • 12 grid columns at width < sm.

Card grid layout

Card grid layout test file.