search

cfpb / design-system

CFPB's work-in-progress design system
https://cfpb.github.io/design-system
Creative Commons Zero v1.0 Universal
37 stars 12 forks source link

Grid: Replace grid with CSS grid #1272

Open anselmbradford opened 3 years ago

anselmbradford commented 3 years ago

At some point we should migrate our grid to CSS grid to support model layout techniques https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout#building_a_layout_using_the_12-column_system

sonnakim commented 1 month ago

We won't work on this —we'll be creating layouts using CSS grid and flexbox as we move towards using web components.

Some of this was done with the RTL work (layouts 2-1 and 1-3 use CSS grid. The only other template style we use extensively is the full layout.) For this grid utility (as documented in the DS) PFC, Rate Explore, other one off apps use the grid utility documented in the Design System, but Ans thinks doing layouts in this manner is brittle. As we move into a world where things are collections of components, the components themselves should handle their own layouts, so we'd want to think of grid utilities as deprecated — they're not intuitive to work with.

As we work on layout related issues, we should use flexbox or CSS grid, and minimize usage of the grid utility mixins.