grid, layout, columns, templates #74
Replies: 1 comment 6 replies
-
Since we seem to be generally discussing layout methods, here are some layout and spacing related concepts to riff on what you've put above. Site layout -> this is how the major players on the page fit together. We can and should, in my mind, create a new implementation for this based on cssgrid. This deals with how the major elements (header, footer, table of contents, sidebar, etc) on a page resize and how much space they take up. Columns -> This is a standard old school styles 12 column grid. The elements that it contains can vary, but they're widths are in percentages. This isn't the most modern way of doing layout, but it works for many cases. This does not set max widths, 12 columns just takes up 100% of the container. As we've talked about in the past, gaps between columns can be 0, .75rem, and 1.5rem. Container -> This constrains widths of things, particularly of wide containers. This can set max widths. Page gutters -> This is what the old .uhf-container class on docs did. It made things line up with the side of the page. I am not entirely sure we need this, but as a concept it's definitely worth discussing. CSS Grid -> This is a modern series of css rules that provide us with a ton of flexibility. We do have some limitations until IE is no longer supported, but we can do most of what's here. On Docs and Learn, the most common case of it is on the content browsers. This is super handy because elements within the grid can automatically resize themselves given a set of minimums and maximum widths. This is chief among a host of reasons with css is great. CSS Feature -> Clamp! @5t3ph. With clamp You can set a minimum, preferred and maximum values for an elements width. This is flexible, modern and simple. Regarding this:
For a component design, I would not think it would be necessary to provide designs for different widths unless that component has different appearances at different widths. For anything where page reflow occurs and is a crucial part of the design (as in a page-layout specific design, perhaps) I would expect there to be designs for different. |
Beta Was this translation helpful? Give feedback.
-
I'm trying to understand how we're calculating the content widths and margin left/right at different breakpoints so I can help map templates into Figma for responsive design. The documentation is showing gap values in pixels/rem, but on the site I'm seeing percentages and a mix of classes I can't quite follow. It's not a 1:1 to get things into Figma but we can get close enough to translate the redlines.
I also need to set guidelines on what comps dev needs from design. I.e., do we need to deliver one at desktop, tablet, and mobile? Do we need widescreen? Or do our components solve all of this for us?
This is all in the name of creating Figma templates for designers with a grid built-in. But I need to know for different screen widths how the grid is calculated. What I have so far is the gap value (1.5 rem), so then do I set a max-width value at each breakpoint? From there Figma can split it into 12 columns.
Hopefully I'm making sense :D
Beta Was this translation helpful? Give feedback.
All reactions