Breakpoint info & column sizes

Jump to bottom Edit New page

mhulse edited this page Oct 29, 2012 · 1 revision

Code:

For your viewing pleasure:

Mobile:

[ A ]LPHA

viewport < 665px

Container size (`px`):

100%

Column sizes (`px`):

100%

Column sizes (`h2o`):

130px
- remainder w/170px margin left and/or right.

Tablet:

[ B ]RAVO • Breakpoint #1

(viewport >= 665px) & (viewport < 1005px)

Container size (`px`):

640px

Column sizes (`px`):

130px
300px
470px

Column sizes (`h2o`):

130px
- remainder w/170px margin left and/or right.
300px
- remainder w/340px margin left and/or right.
470px
- remainder w/510px margin left and/or right.

Desktop:

[ C ]HARLIE • Breakpoint #2

(viewport >= 1005px) & (viewport < 1345px)

Container size (`px`):

980px

Column sizes (`px`):

130px
300px
470px
640px
810px

Column sizes (`h2o`):

130px
- remainder w/170px margin left and/or right.
300px
- remainder w/340px margin left and/or right.
470px
- remainder w/510px margin left and/or right.
640px
- remainder w/680px margin left and/or right.
810px
- remainder w/850px margin left and/or right.

Big desktop:

[ D ]ELTA • Breakpoint #3

viewport >= 1345px

Container size (`px`):

1320px

Column sizes (`px`):

130px
300px
470px
640px
810px
980px
1150px

Column sizes (`h2o`):

130px
- remainder w/170px margin left and/or right.
300px
- remainder w/340px margin left and/or right.
470px
- remainder w/510px margin left and/or right.
640px
- remainder w/680px margin left and/or right.
810px
- remainder w/850px margin left and/or right.
980px
- remainder w/1020px margin left and/or right.
1150px
- remainder w/1190px margin left and/or right.

All breakpoints:

Column sizes (`%`):

1/2 or 50%
1/3 or 33.33333%
2/3 or 66.66666%
1/4 or 25%
3/4 or 75%
1/5 or 20%
2/5 or 40%
3/5 or 60%
4/5 or 80%
1/6 or 16.6666666%
5/6 or 83.3333333%
1/7 or 14.2857143%
2/7 or 28.5714286%
3/7 or 42.8571429%
4/7 or 57.1428572%
5/7 or 71.4285715%
6/7 or 85.7142858%
1/8 or 12.5%
3/8 or 37.5%
5/8 or 62.5%
7/8 or 87.5%

Created by Micky Hulse/The Register-Guard.