MAF vs. Web Components
The technical details of our grid systems vary depending on the development platform your project uses. MAF uses a custom grid system, which they call their Flex component. Our Web Components styles include Bootstrap 5’s grid system, Flexbox utilities, and CSS Grid utilities. Both options are powerful ways to layout a modern, responsive web application. The principles below should be the same, though the particulars may differ slightly in each platform.
Grid System Fundamentals
Many designers don't about using a grid system when they design. This is something we’d like to change at Nielsen. It can create issues whenever designs are handed off to development. Using a grid system makes responsive web design more straightforward. It also helps designers and developers to speak the same language during the design and development processes.
Grid System Best Practices
- Know your page’s breakpoint and container max width
- Think in rows...then in columns
- Start with a simple column layout like halves or thirds
- Stop thinking in fixed widths. Switch to percentages and max widths.
- Nest your containers and columns
- Every so often, think about smaller and larger screens
Responsive Breakpoints
To target different layouts at different browser widths, we set CSS breakpoints. Content should shuffle or reframe appropriately depending on the user’s browser width.
Some of our B2B applications will not work on smaller browser widths. Our system will alert the user whenever this is the case. Our B2B applications will target xl and xxl browser widths while our Panel applications will target desktop, tablet, and mobile sizes.
Containers
Containers wrap content to either be fully fluid or center constrained. Fluid containers take up the 100% of the content left to right. Center-constrained containers adopt the maximum width depending on screen size. They then center that content horizontally. See the table below for more information.
Bootstrap’s containers allow you to target a larger screen size and then gracefully switch to 100% fluid on smaller screen sizes.
Column Gutters
Gutters are the gaps in between columns. The default is 16px.
Optionally, you can set gutters responsively at different breakpoints. For example, adding the classes: g-lg-1 g-xl-2 would give you a 16px gutter on XL widths, and 8px for all other smaller widths.