<%= head %> <%= siteHeader %>

Spacing

Spacing comes in two flavors. Depending on borders and background colors, the difference between padding and margin can be invisible to the naked eye of the user. But to a developer, they serve different roles. Most codebases lack a ratio based scale and instead are littered with values that are just magic numbers. This is bad.

Good design is based on math. Certain patterns and ratios are so prevelant in nature and music that they can't be denied as elegant design solutions. Even in the 18th century, pages in books were designed with ratios. In the 21st century, we have gotten away from this on the web, often using magic numbers to match a 'spec' that has been produced in a graphics program such as photoshop, illustrator, or sketch. While these programs are useful for sketching ideas, they aren't 100% accurate in their reflection of how the web works across device sizes or how things get drawn to the screen.

Tachyons features a spacing scale based on powers of two that starts at .25rem (for most devices this will be the equivalent of 4px). Since tachyons uses rem units with px as a fallback, if a user has declared a different base font-size for their device, your spacing will scale based on a defined ratio that has stood the test of time. As powers of two will always produce integers, there will be no problems with sub pixel rendering across browsers. Computers aren't that great at math and so decimals lead to inconsistencies across platforms. Inconsistencies should be avoided where possible. You'll find that when using a well thought out scale - things just line up. It works, with little effort, regardless of your design knowledge or sensibilities.

Examples

Padding All

pa1, pa2, pa3, pa4, pa5, pa6, pa7

pa0
pa1
pa2
pa3
pa4
pa5
pa6
pa7

Padding Horizontal

ph0
ph1
ph2
ph3
ph4
ph5
ph6
ph7

Padding Vertical

pv0
pv1
pv2
pv3
pv4
pv5
pv6
pv7

Padding Left

pl0
pl1
pl2
pl3
pl4
pl5
pl6
pl7

Padding Right

pr0
pr1
pr2
pr3
pr4
pr5
pr6
pr7

Padding Top

pt0
pt1
pt2
pt3
pt4
pt5
pt6
pt7

Padding Bottom

pt0
pb1
pb2
pb3
pb4
pb5
pb6
pb7

Margin All

ma1, ma2, ma3, ma4, ma5, ma6, ma7

ma0
ma1
ma2
ma3
ma4
ma5
ma6
ma7

Margin Horizontal

mh0
mh1
mh2
mh3
mh4
mh5
mh6
mh7

Margin Vertical

mv0
mv1
mv2
mv3
mv4
mv5
mv6
mv7

Margin Left

ml0
ml1
ml2
ml3
ml4
ml5
ml6
ml7

Margin Right

mr0
mr1
mr2
mr3
mr4
mr5
mr6
mr7

Margin Top

mt0
mt1
mt2
mt3
mt4
mt5
mt6
mt7

Margin Bottom

mb0
mb1
mb2
mb3
mb4
mb5
mb6
mb7

Previous

Box Sizing

Next

Floats

<%= name %>

v<%= moduleVersion %> <%= moduleSize %>
Declarations
<%= moduleObj.declarations.total %>
Selectors
<%= moduleObj.selectors.total %>
Max. Specificity Score
<%= moduleObj.selectors.specificity.max %>
Size of Avg. Rule
<%= moduleObj.rules.size.average %>
src/_spacing.css

<%= srccss  %>

<%= navDocs %>
<%= siteFooter %> <%= googleAnalytics %>