Bugcrowd design system: Layout

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.

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 test file.

Basic page layout

Page without sidebar.

Use for pages that:

• Don’t need a sidebar or Vertical navigation
• Feature centered [primary] content.

The main content has:

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

☞ 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 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 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 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 test file.

Ideal for setting up engagements and objects that require multiple steps to complete.

All pages follow the basic page layout. 8 grid columns at width ≥lg, 10 grid columns at width <lg and ≥md.

Setup layouts maintain the standard header and footer to allow the user to leave the workflow and re-engage at a later time.

All setup flows must have a start, summary, and end page.

Containers and wrappers

Guidance on styles

Use:

• bc-setup-layout__header__title: to remove the top and bottom margins for the page title.
• bc-setup-layout__header__heading: to reduce top and bottom margins for headings nested in the header container.
• bc-setup-layout__image: to make an image responsive to its grid layout.
• bc-setup-layout__lead: to style text following a header. Makes body text larger and grey.

Guidance on variants

Use:

• bc-setup-layout--start-end: with bc-setup-layout for start and end pages to vertically align content.
• bc-setup-layout__footer--single: with bc-setup-layout__footer for single actions within setup page footers. Keeps the primary action on the left of the page.

Introduction/Start page

Introduces the user to what they are setting up, what to use it for, what they will need, and an estimate of how long it will take to complete.

Be sure to identify what it is used for and what they need to start with bullet points.

Use for

• Start of workflow
• Setup introduction
• Preparing the user for what is to come

☞ Setup start test file.

Card selection page

Allows user input with large, multi/single select cards. These cards can either be radio or checkboxes, but should offer larger affordance and rich content for usability.

See Forms > Control input > –card variant for how to implement card selection.

Use for

• Presenting options for the user to choose from.

☞ Setup card selection test file.

Form page

Allows user input with form inputs. These can be labeled semantically with aria-labelledby attribute by the title and description, or with a standard visible <label>.

See Forms > Labels for how to implement form labels.

Use for

• Requesting user input

☞ Setup form test file.

Summary page

Allow users to check the final details. Use this page as confirmation before users submit the recorded information. This provides users with an overview of their actions.

Use for

• Summarizing entered details
• Accepting terms and conditions

☞ Setup summary test file.

Finish/confirmation page

This uses the start page layout. It is the final confirmation page at the end of the workflow.

Include the following points where possible:

• Summarize what was done
• Identify the next steps
• Suggest what to do next
• How to get help if there is an issue

Use for

• End of workflow
• Confirmation of completion

☞ Setup finish test file.

Onboarding layouts is a one-time experience and is recommended for introducing and familiarizing a new user to Bugcrowd’s products and services.

Avoid complex steps with a maximum of:

• 3 form inputs per step
• 2 form input types in a single step
• 5 steps (not including start and end pages) in a single onboarding experience.

The header is simplified, and the footer is removed to minimize distraction.

Use this layout for flows such as:

• onboarding
• introductions
• account setup
• splash pages
• or feature presentations.

All onboarding flows must have a start and end page.

Page layout

All pages follow the basic page layout. 8 grid columns at width ≥lg, 10 grid columns at width <lg and ≥md.

Buttons

The primary action should always come first and should be the action that progresses the workflow.

All buttons are center aligned with the following column widths:

Forms

Form inputs are purposely left-aligned for scanability. Maintain consistency between the form fields and buttons by using the same grid layout.

Containers and wrappers

Guidance on styles

Use:

• bc-setup-layout__header__heading: to reduce the top and bottom margins for headings nested in the header container.
• bc-setup-layout__image: to make an image responsive to its grid layout.
• bc-setup-layout__lead: to style text following a header. Makes body text larger and grey.

Guidance on variants

Use:

• bc-setup-layout--start-end: with bc-setup-layout for start and end pages to vertically align content.

Introduction/Welcome page

Introduces the user to who we are, what they are going to do, why they are doing it, and an estimate of how long it will take to complete.

Use for

• Start of workflow
• Splash pages

☞ Onboarding start test file.

Card selection page

Allows user input with large, multi/single select cards. These cards can either be radio or checkboxes, but should offer larger affordance and rich content for usability.

See Forms > Control input > --card variant for how to implement card selection.

Use for

• Presenting options for the user to choose from.

☞ Onboarding card selection test file.

Form page

Allows user input with form inputs. These can be labeled semantically with aria-labelledby attribute by the title and description, or with a standard visible <label>.

See Forms > Labels for how to implement form labels.

Use for

• Requesting user text input

☞ Onboarding form test file.

Finish/Thank you page

Similar to the start page layout, but with a completed progress bar. This page confirms the completion of the onboarding experience.

Use for

• End of workflow

☞ Onboarding finish test file.