Bite-sized knowledgeto upgrade
your career
to upgrade
Ideas from books, articles & podcasts.
Horizontal Rhythm
The standard Bootstrap grid is a 12 column layout, with a 15px margin on each side of the column, resulting in a 30px gutter between columns plus 15px to the left and right of the grid.
The entirety of the grid is called Container. A container can be either fluid or responsive in size. A fluid container will always take the whole available width.
- Customising for a desktop: Each column should be 72px wide, with a gutter of 24px or 32px.
- Designing for mobile is up to you: Not all mobile devices' width dimension is divisible by 8. 12 columns aren't practical for narrow screens.
STASHED IN:
6
created an idea from a article:
MORE IDEAS FROM THE SAME ARTICLE
Rows should be 8px tall.
- It scales perfectly in all the different screen displays (including android’s @0.75 and @1.5).
- Apple and Google advise so.
- It's a good basic unit to work with. 4 and 8 are easily multiplied, are flexible and consistent.
We use small artboards while the devices we design for are huge. For example:
Icons designed on an 8pt based grid will scale perfectly.
... using the extended framework for the 8pt grid: Typography, Icons and Layout.
While the font sizes can vary and move away from the 8 multiplication, the line height will not.
1 Reaction
Comment
IDEA ABOUT
MORE LIKE THIS
created 10 ideas
7
Comment
12.4K reads
❤️ Brainstash Inc.