2020-11-10 Meeting notes
Goals
Decide whether to accept foundations for Spacing, Grid and Elevation
Gather feedback on work in progress
Card-like Components
Elevation components
Colors updates
Present
@Gabriel Weinberg @Adam Butterworth (Deactivated) @Lael Birch (Deactivated) @Ben Warzeski (Deactivated) @Adam Stankiewicz @Stacey Messier (Deactivated) @Alasdair Swan (Deactivated) @Eugene Kang @Jeff Witt (Deactivated)
Discussion topics
Time | Item | Presenter | Notes |
---|---|---|---|
10 | Decide: Spacing & Grid | @Eugene Kang | Using 4 and 8px spacing. It’s important to use even numbers so we don’t end up with half pixels in some situations. 4px is useful for more granularity on mobile. Baseline grid is 4px baseline. Lael: As a dev, I would like very clear usage guidelines. I’d love user guidelines. What should I start with? 12 or 16? How do I decide what spacing to use where? Ben: As a dev, I want less of that information. I like that UX to be responsible. These are things the UX person should be making decisions on. Lael: Agrees, but also I want CSS variables for all of these spacings (and line heights!) Alasdair/Adam: These will map to bootstrap spacing utilities. Jeff: Variable font sizes (“grow the text a little bit”) Does anything containing the text flex in side with the containing text? Can we have the ability to control these spacings in relation to the user defined font size. Can you grow the containers when you nneed to, or is it just a media query thing. |
10 | Feedback: Card-like components | @Eugene Kang | Alerts, Banners, Cards Ben: Alerts are we using elevation instead of border? Shadow is better than not having it. Gabe: How many actions do we think alerts will have? What if there are two primary actions Ben: fwiw 2 primary actions it might be better to have some custom solution. Do we want different icons for warning and error or just rely on color? E: We will nont rely on color alone, will have multiple icons. Bullhorn for warning and exclamation for danger.
|
15 | Decide: Elevation | @Gabriel Weinberg | https://www.figma.com/file/dJr5ixCRKlXiuA4BsKxAk3/Design-System-Workspace?node-id=231%3A1346 Lael: when we’re walking elevation, both z-index and shading. wondering what we’re thinking for z-indexes. In order to leave the most flexibility is to use an order of magnitude between each one. Jeff: Today we use hover shadows was for course cards, I want to sanity check that that’s still out intention. G: Depends on if the whole container is clickable, if the whole card is clickable then it would have the hover/focus shadow but if it had more than one control inside it it wouldn’t. Jeff: You could do both, CSS has the ability to do it. |
10 | Feedback: Color system tweaks | @Adam Butterworth (Deactivated) | A: Should limestones be “secondary” in bootstrap, or “grey” in bootstrap? |
Action items
Decisions
- We will design elevation as presented. Z-Index decisions to be worked through in the future.
- We will define Spacing as presented