DS: Grid and Breakpoints Library

[jessicashanshanhuang]

Working on implementing the new figma grids and breakpoints library for the new DS, Streetscape.

to-do:

• [x] columns
• [x] gutters
• [x] margins
• [x] breakpoints
• [x] documentation

currently: adding documentation to library file

[jessicashanshanhuang]

looking at the following:

Guide to Creating Responsive Grids

breakpoints refer to the specific points where a website layout changes. They trigger when certain criteria (e.g. specific screen size dimensions) are met, and help to ensure that content is displayed correctly no matter how the user is accessing it

USWDS responsive grid

Materials Design layout grid

Materials Design Understanding layout

rems units and grids

Figma: creating grid layouts

questions/notes:

• would be good to see what breakpoints ae is currently using across all products
• current grid in the old design system aren't really being used
• old design system rem is in multiples of 4px

[jessicashanshanhuang]

current breakpoints from ae-streetscape, they're derived from chakra ui:

[jessicashanshanhuang]

current approach: using the Guide to Creating Responsive Grids a general outline to create a the grid system and following USWDS responsive grid for decision making for grid & breakpoint system

creating grids with figma

microsoft fluent 2 guide to grids

[jessicashanshanhuang]

wip desktop grid:

columns:

• 12 columns w/ gutter of 4px, stretchy type to be responsive when resizing frames
• most aim for 12 column system (multiple of 4) for proper spacing without elements being too crowded

rows:

• 24 rows w/ gutter of 0px, stretchy type
• did 24 to have three rows per column, using rule of thirds to make it easier for horizontal alignment

[jessicashanshanhuang]

wip tablet and mobile grids:

• tablet gutter: 3 px
• mobile gutter: 2 px

[jessicashanshanhuang]

chakra ui grid

chakra ui breakpoints

comes with predetermined commonly used breakpoints, which i assume is what ae is currently using

something to look into the future for testing breakpoints is figma's responsive prototyper that was just release from config 2024

const breakpoints = {
  base: '0em', // 0px
  sm: '30em', // ~480px. em is a relative unit and is dependant on the font size.
  md: '48em', // ~768px
  lg: '62em', // ~992px
  xl: '80em', // ~1280px
  '2xl': '96em', // ~1536px
}

[!NOTE] seems like there is no current direct method to work with breakpoints in house, most figma plugins for breakpoints are paid

figma recommends 8-point grid, though it seems more suited for mobile design primarily but still useful for responsive web design

[jessicashanshanhuang]

working on using grids on the landing page, refer to changelog in file.

[jessicashanshanhuang]

Updated elements using grid as well as some typography elements:

[jessicashanshanhuang]

• creating responsive using chakra breakpoints that are referenced in ae-streetscape
• draft of margins, using percentage scale based off breakpoints

[jessicashanshanhuang]

updating edde redesign using new desktop grid with margins