Responsive grid system
For all web applications that implement our vi16 CMS components we leverage a 12-column grid system that responds automatically to screen size and orientation. We use this to maintain structure and consistency throughout our sites. All of our vi16 & vi20 web components align to this grid system and are fully responsive from device to device.
Grid and breakpoints
Horizontal grid & breakpoints
A breakpoint is a predetermined size that adjusts layouts to suit the screen size and orientation. Breakpoints define how the layout changes at certain screen-sizes.
At BlackRock we use a responsive, fluid grid system which adapts to any screen size or device. When designing our CMS components and page layouts, we design across 5 breakpoints; mobile XS - S, tablet (M), small desktop (L), and large desktop (XL), which does not extend beyond 1920px (see Development note below). All of these layouts use a 12-column grid.
DEVELOPMENT NOTE:
To lock the grid beyond 1920px, you must use a wrapper CSS class on all our vi16 and vi20 components. The bootstrap XL class does not do this automatically.
Definition of that class:
{max-width: 1920px !important;
width: 100% !important;
padding-left: 80px !important;
padding-right: 80px !important;
}
| Breakpoint | Value (px) | Col nr | Margins (left and right) |
Gutter width | Col width |
| Extra Small | 0-599 | 12 | 20 | 4 | % |
| Small | 600-767 | 12 | 20 | 8 | % |
| Medium | 768-1023 | 12 | 32 | 16 | % |
| Large | 1024-1439 | 12 | 40 | 16 | % |
| Extra large | 1440-1920 | 12 | 80 | 16 | % |
8px baseline grid and spacing
Baseline grids are invisible, vertical lines that are used to create consistent vertical spacing between standard elements, such as an app bar, list item, or typographic layouts. At BlackRock, we align to an 8px grid. We also use multiples of 8 when defining measurements, spacing, and positioning elements.
Best practice: Align your bounding box to the grid, not the baseline of your text.
Component & page layouts
Our component system is designed using full-width CMS layouts. This gives the effect of having multiple columns of content, detached from page layout in the CMS.
At BlackRock, we currently design all of our components using full-page layouts. The advantage of this is that for the CMS user they simply drop in full-with components and don’t need to worry about the horizontal placement.
