Skip to content

Instantly share code, notes, and snippets.

@Sulcalibur
Last active December 24, 2015 20:29
Show Gist options
  • Save Sulcalibur/6858463 to your computer and use it in GitHub Desktop.
Save Sulcalibur/6858463 to your computer and use it in GitHub Desktop.
Calca Bourbon Neat Grid Calculations
# Bourbon Neat Grid & Text Settings
## Grid Settings
### Mega Desktop
width = 1460
cols = 16
gutter = 20
margin = gutter => 20
becols = width - cols*gutter + 1*gutter => 1160
becols / cols = colwidth
colwidth => 72.5
width + 2*margin = totalwidth
totalwidth => 1500
### Desktop
width = 1000
cols = 12
gutter = 20
margin = gutter => 20
becols = width - cols*gutter + 1*gutter => 780
becols / cols = colwidth
colwidth => 65
width + 2*margin = totalwidth
totalwidth => 1040
### Tablet
width = 748
cols = 8
gutter = 20
margin = 10
becols = width - cols*gutter + 1*gutter => 608
becols / cols = colwidth
colwidth => 76
width + 2*margin = totalwidth
totalwidth => 768
### Mobile Landscape
width = 460
cols = 4
gutter = 20
margin = 10
becols = width - cols*gutter + 1*gutter => 400
becols / cols = colwidth
colwidth => 100
width + 2*margin = totalwidth
totalwidth => 480
### Mobile
width = 320
cols = 4
gutter = 20
margin = 10
becols = width - cols*gutter + 1*gutter => 260
becols / cols = colwidth
colwidth => 65
width + 2*margin = totalwidth
totalwidth => 340
## Text Settings
Pixels
basefont = 16
basefontspace = basefont + 50% basefont => 24
p = basefont => 16
p space = basefontspace => 24
24 / 16 => 1.5
blockquote = basefont + 25% basefont => 20
h6 = basefont => 16
basefontspace = h6 + 50% h6 => 24
24 / 16 => 1.5
h5 = h6 + 30% h6 => 20.8
basefontspace = h5 + 50% h5 => 31.2
31.2 / 16 => 1.95
h4 = h5 + 30% h5 => 27.04
basefontspace = h4 + 50% h4 => 40.56
40.56 / 16 => 2.535
h3 = h4 + 30% h4 => 35.152
basefontspace = h3 + 50% h3 => 52.728
52.728 / 16 => 3.2955
h2 = h3 + 30% h3 => 45.6976
basefontspace = h2 + 50% h2 => 68.5464
68.5464 / 16 => 4.2842
h1 = h2 + 30% h2 => 59.4069
basefontspace = h1 + 50% h1 => 89.1103
89.1103 / 16 => 5.5694
Rems
p / basefont => 1
p space / basefont => 1.5
blockquote / basefont => 1.25
h6 / basefont => 1
h5 / basefont => 1.3
h4 / basefont => 1.69
h3 / basefont => 2.197
h2 / basefont => 2.8561
h1 / basefont => 3.7129
----------------------------
#### Notes
20 /16 => 1.25
66 / 16 => 4.125
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment