Research Boostrap Grid and multipliers

[taisdesouzalessa]

ETHERPAD

Research if there is an existing grid system in Sketch format for Bootstrap 4 and also what are the default multipliers for Bootstrap to see if they make sense to our design system.
If there is no existing grid: build one in Sketch
When we find the multipliers, adopt them in our library as spacings. Like this cool example from AirBnb:

cc: @kristinashu @flukeout @xmatthewx @hannahkane @alanmoo @gvn @mmmavis

[taisdesouzalessa]

The responsive default breakpoints for bootstrap are:

1. @media (min-width: 544px) { ... }
2. @media (min-width: 768px) { ... }
3. @media (min-width: 992px) { ... }
4. @media (min-width: 1200px) { ... }

I was taking a look at the Science site and all breakpoints match the default from bootstrap except the 1. Ours seem to be 576px.

Question: is 576px as our smallest breaking point?

[alanmoo]

Bootstrap 4's smallest breakpoint is 576px, so that's why the science site is using it. http://v4-alpha.getbootstrap.com/layout/grid/#grid-options

[taisdesouzalessa]

That's interesting...I got the breakpoints from here (which seems to be from Bootstrap 4 too): http://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints
Thanks for the info @alanmoo :)

[alanmoo]

Ah, that looks like a bug in the documentation...I'll file a PR to have them update it.

[taisdesouzalessa]

Here are the multipliers based on code inspection of their demo page:

QUESTIONS:

• Are we using the default Bootstrap multipliers from now on? Font size 16px, line-height:24px (1.5em). Applied example:

• What are the key breakpoints we should consider when doing mockups? I would assume 1200px and 576px but I could be wrong...

[taisdesouzalessa]

Summary of our talk on this subject:

• Find a balance between design needs and coding needs. Concern: being very prescriptive. From the design standpoint we need some rules to build a system around.
• Alan showed us the system behind the items we can customize:
  variables.scss. Our version of that file, right now: overrides/_variables.scss
• Mofo Bootstrap CSS overrides
• When using grids, keep in mind those cases: Bigger than 1200px - what happens? Minimum size of 320px for the mobile audience (the narrower screen they could have - design for this case) - also get @gvn @mmmavis perspectives on it.

NEXT STEPS:

• Research if there is an existent Sketch Library with the default Bootstrap grid.
• Check the existing grid in our UI Toolkit.
• Analyze the documents Alan shared.
• Build a grid and vertical rhythm model in the Sketch Library.

Anything I missed here? @alanmoo @sabrinang @kristinashu

[mmmavis]

@taisdesouzalessa +1 on what has been discussed. Happy to chat about it sometime next week when we are both in the office (or earlier via Vidyo). 👍