ℹ️ This feature doesn’t have a corresponding React component yet.

Proposed Design

1 main component

• BcGrid div.bc-grid

sub-components:

• BcGrid.Container div.container
• BcGrid.Row div.row
• BcGrid.Col div.col-${props}

Props

• all component/sub-components:

  • as - can be passed to specify the HTML element. The default is div.
  • extend html element

• Container accepts variants as string

  • available variants: [ 'fluid', 'fluid-container']

• Col allow breakpoints props. sm, md, lg, xl

Component Structure

<BcGrid>
  <BcGrid.Container as='ul'>
    <BcGrid.Row as='li'>
      <BcGrid.Col sm='12' md='4' lg='3' />
      <BcGrid.Col sm='12' md='4' lg='3' />
      <BcGrid.Col sm='12' md='4' lg='3' />
    </BcGrid.Row>
  </BcGrid.Container>
<BcGrid>

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

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

☞ Grid example.

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.

The grid container is made up of three elements: columns, rows and gutters.

Columns

Columns are content is placed in the areas of the screen that contain columns. Column width is defined as a % based on the column count, breakpoint class and the type (pull or offset) by using a helper mixin, rather than fixed values.

Default number of grid columns: 12

Gutter

A gutter is the space between columns that helps separate content.

Default gutter width: 24px

Customizations & additions

Custom max-width’d container

This (custom) fixed-width container class should be a child of .container-fluid and provides a fixed-width container with max-widths to allow implementers to have a fluid outer container (eg for full-viewport-width blocks with background images, etc.) but return to the fixed-width design of the BS3 .container class.

This is a re-implementation of the 12-column Bootstrap 3 grid system, it means you can use the Bootstrap 3 grid documentation to build grids.

• Common Layouts (Layout)
• Guided Setup Layouts (Layout)
• Onboarding Layouts (Layout)
• Nielsen Norman Group’s Using Grids in Interface Designs
• Brad Frost’s Layout & Grid in Design Systems