Grid Guidelines

Welcome to the Grid Guidelines! Grid is a model that Nerds use to create more consistent UI layout across NerdWallet. It originated from FEI, as part of the design system core team’s work. It’s both a conceptual model for thinking about layout and responsiveness, as well as a set of tools for implementing that layout, including Sketch files, documentation, and React components.

This is a kickstart doc to get Nerds up and running thinking about how to use Grid in their designs. It’s divided into three sections: Background (context and rationale for the project), Features (which covers implementation), and Adoption, which walks through the steps of how to onboard to Grid.

Note: feedback is always welcome! If you have questions about this doc, it’d be fantastic if you leave a comment to help the next Nerd reading this.

Background

What is the Grid?

When a designer or engineer says “let’s use the Grid!”, what does that mean? Grid is both a conceptual model, and a set of tools to implement that model. Gridding something is a tightly collaborative process that involves close work with design and eng.

Audit

To develop the Grid, we compiled some representative experiences across NerdWallet and captured all their breakpoints in an effort to see similarities/differences.

Deciding on Breakpoints

After auditing our different grid systems, we set out to develop a grid that would work simply and elegantly across all of NerdWallet. We looked at the data to inform which viewport sizes our users made the most use of and found that 4.3% used a tablet-sized breakpoint.

After synthesizing the data, we decided to focus our efforts and develop a system with one breakpoint at 768px. We tested it on representative experiences across the product to verify its effectiveness and iterated until we found one that worked best with our existing designs.

Features

Responsiveness

The Grid is responsive; the layout is both fluid (layout is calculated by a percentage, and scales linearly with the viewport), and adaptive (layout snaps at specific breakpoints). See this excellent article to understand what those mean.

Columns

The NDS Grid uses 4 and 12 column layouts. Column widths are responsive (fluid and adaptive) and depend on the viewport size.

Gutters

Gutters are the distance between columns. They’re implemented as having fixed padding on each side of the column. At specific screen widths (viewport sizes) the gutter sizes adapt.

Outer Side Margins

The NDS Grid has fluid outer side margins that create space between the outermost columns and the edges of the viewport.

In devices with a screen width greater than 768px, the outer side margins start at a fluid (spacing-5) on both sides and scale as the viewport size increases (up to the max width at 1280px).

Max Width

The Grid system has a max width of 1280px. In practice, this means that columns will stop growing at 1280px, and designers don’t need to account for layouts beyond 1280px.

Content Area / Content Width

This is the space inside the outer side margins, ie. the sum of the columns and gutters.

Breakpoints

The NDS Grid is responsive; it’s both fluid and adaptive. See this article for a demo of the differences. The NDS Grid only has one breakpoint. From our minimum width at 375px, we have four fluid columns until 768px. Then, from 768px onwards, the Grid uses 12 fluid columns.

Note: 1280px is provided to show the fluidity of the outer side margins. At the 768px breakpoint, the outer side margins fluidly (percentage-based) grow to an upper bound of 64px at 1280px.

Note to designers: be sure to share mocks at the hotspot of 768px. This is when the Grid reshapes to become 12 columns, from the previous 4 column layout. So it’s important that we capture what this will look like.

Examples

Adoption

Component Layout vs. Page Layout

Grid helps negotiate where the containers fall horizontally within a breakpoint. In some instances, the Grid will be suitable for a smaller component. In others, it may be suitable for a larger page layout.

Elements within a component won’t necessarily fit perfectly within the grid on the first usage. NDS spacing should be applied horizontally and vertically if needed to create space within the containing columns of the grid.

Onboard to Grid

When a team is preparing a new design, it’s a great time to start to think about using Grid. Here are some high level steps:

1. Early integration meetings with design, eng and QA
2. Design phase
3. Engineering phase
4. Testing phase

Pilot / Integration Meeting

Having a pod team adopt Grid might require a mindset shift in how we’re thinking about design, eng and QA. Having early meetings with these mixed disciplines during a team’s onboarding to Grid will likely improve the adoption process.

Design Phase

Keep the Design System team and others informed on the progress of adoption. Especially think about how the design behaves around the single breakpoint hotspot of 768px. This is when the Grid reshapes to become 12 columns, from the previous 4 column layout.

Engineering Phase

Pod team works with React components and base-styles breakpoints to implement layout in app-specific projects.

Testing Phase

The team’s QA may need an understanding on how the Grid has modified the team’s layouts. Having them present at an earlier integration meeting can help set expectations of what to look for after the team is done adopting Grid.

Usage Examples

Fixed Width Components

Use case: team has a design that includes a component (like a CTA) with width that’s content doesn’t fit within the columns of the Grid.

Solution: not all content has to be within specific Grid columns. If that’s understood, and fixed-width content is extending outside of the expected width, try to modify the component to have responsive behavior to align with the Grid. Add a max-width to the component to constrain it from bleeding into the other columns of the Grid.