Research Boostrap Grid and multipliers

mozilla / mofo-bootstrap

Mozilla Foundation's Bootstrap 4 theme.

https://mozilla.github.io/mofo-bootstrap/demo/

Mozilla Public License 2.0

61 stars 17 forks source link

Research Boostrap Grid and multipliers #90

Open taisdesouzalessa opened 7 years ago

taisdesouzalessa commented 7 years ago

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 commented 7 years ago

The responsive default breakpoints for bootstrap are:

@media (min-width: 544px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 992px) { ... }
@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.

tabs-576

people-576

Question: is 576px as our smallest breaking point?

alanmoo commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

taisdesouzalessa commented 7 years ago

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

multipliers

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 commented 7 years ago

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 commented 7 years ago

@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). 👍