Layout
Screen size
Mobile-first
Think about how your content or design will work for small screens first using a single column layout
Devices
Don’t design for a specific device, instead design for screen sizes that are common to your audience
Content container
Content is typically displayed in a container that, after allowing for padding, has a maximum width of 1064px
Breakpoints
- Mobile breakpoint: 320px
- Tablet breakpoint: 768px
- Laptop breakpoint: 1024px
- Small desktop breakpoint: 1440px
- Large desktop breakpoint: 1920px
Ions
Breakpoint definitions are available to developers in the form of design tokens called ions Use these as a guide when creating pages.
For special circumstances and edge cases, use a tool like Google Analytics for research into your audience’s common screen sizes. For example, prospective students in some countries may commonly use older mobile devices more than newer devices.
Grid
The BRGR grid consists of a responsive 12 column structure.
Use the grid to:
- Lay out content on a page
- Provide a consistent experience
Why do we use a grid?
Using the grid in a consistent way brings order to a page. Users can quickly understand how certain components are positioned across all systems that use the BRGR design language.
Grid definitions
- Max grid width: 1280px
- Grid offset (desktop): 168px
- Grid offset (small desktop): 60px
- Grid offset (tablet): 24px
- Grid offset (mobile): 18px
- Number of columns: 12
- Gutter width: 16px
- Column widths: [Calculated percentages]
- Max column width: 92px
Ions
Grid definitions are available to developers in the form of design tokens called ions
