The 12 Column Grid

[bhamtil-twilio]

Hello! I'd like to better define guidelines for responsive behavior in Console, I'm trying to better understand how we use the Grid and Flex systems. It seems Grid and Flex are useful front-end implementation tools for general layout, but I'm not clear on how they're meant to be used during the design stage. For example, should we be defining elements on the page by X columns instead of pixel values or even percentages? Should we be sticking to 24px spacing between elements, given the fixed 24px gutters between each column? Any more background info would be helpful!

[rosemaryluo]

Zhen mentioned that when engineers are building on Paste that they need to define widths by the 12 columns but there's flexibility in defining the gutter. In my current case I need >24px gutters to account for vertical separators. Would love to get confirmation + answer to Brittany's question above!

[SiTaggart]

Hi folks, bit of a two part answer here.

The Grid indeed is a flexible, 12 column grid, and the gutters are also flexible to any spacing token. So when designing your page layout, the grid sizing and guttering is really up to you and the product.

In Figma, designers can create a grid layout from which to work on. Paste provides "grid styles", which I'm not 100% sure on how to access, but I think they look like this:

You can set the gutter size, the number of columns and then align your elements to the grid columns for easy engineering hand off. Again, not sure if those are the Paste Grid Styles we provide, but its equivalent.

Avoid providing pixels or percentages in heights or widths. These will never work the way you want them to in a fluid width page. You need to let the content flow with the containers they sit in and let the grid utilities do their work in code.

Vertical separators

Probably too hard to do with the grid utilities, they don't really accommodate for them. You can create that, though, just using Box, percentage widths, borders and spacing. Little more work for your engineering team, but very achievable.

Defining Guidelines

We'll be doing some layout guidelines to accompany the new design language, but it won't be super opinionated. Just some best practices and templates for different types of screens that we typically see across Console, Flex, Segment and SendGrid. I still suspect each product experience will have their own needs, as an Enterprise productivity app is pretty different from a Admin console layout wise.

The struggle you will find with Console specifically is that, until every team is migrated to the new Console repository, we can't have nice things. Roughly 60% of traffic is still using legacy Console layouts, which include a hard coded, fixed width viewport. No matter your screen size, the width of the page is the same, you just zoom out more on small devices to fit it on the screen. You largely won't be able to set a responsive, fluid page guideline because you will make the old pages unusable. You will be able to set some desktop to landscape tablet guidelines though, that will be largely implementable.

Hope that helps.