Horizontal Rhythm - Deepstash

Bite-sized knowledge

to upgrade

your career

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

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

It's time to

READ

LIKE

A PRO!

Jump-start your

reading habits

, gather your

knowledge

,

remember what you read

and stay ahead of the crowd!

Takes just 5 minutes a day.


TRY THE DEEPSTASH APP

+2M Installs

4.7 App Score