Tachyons

Docs

/

Layout

/

Spacing

Version
<%= moduleVersion %>
Filesize
<%= moduleSize %>
Declarations
<%= moduleObj.declarations.total %>
Selectors
<%= moduleObj.selectors.total %>
Max. Specificity Score
<%= moduleObj.selectors.specificity.max %>
Size of Avg. Rule
<%= moduleObj.rules.size.average %>

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 in 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 times 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 reflective 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

paxs, pas, pam, pal, paxl, paxxl, paxxxl

pan
paxs
pas
pam
pal
paxl
paxxl
paxxxl

Padding Horizontal

phn
phxs
phs
phm
phl
phxl
phxxl
phxxxl

Padding Vertical

pvn
pvxs
pvs
pvm
pvl
pvxl
pvxxl
pvxxxl

Padding Left

pln
plxs
pls
plm
pll
plxl
plxxl
plxxxl

Padding Right

prn
prxs
prs
prm
prl
prxl
prxxl
prxxxl

Padding Top

ptn
ptxs
pts
ptm
ptl
ptxl
ptxxl
ptxxxl

Padding Bottom

ptn
pbxs
pbs
pbm
pbl
pbxl
pbxxl
pbxxxl

Margin All

maxs, mas, mam, mal, maxl, maxxl, maxxxl

man
maxs
mas
mam
mal
maxl
maxxl
maxxxl

Margin Horizontal

mhn
mhxs
mhs
mhm
mhl
mhxl
mhxxl
mhxxxl

Margin Vertical

mvn
mvxs
mvs
mvm
mvl
mvxl
mvxxl
mvxxxl

Margin Left

mln
mlxs
mls
mlm
mll
mlxl
mlxxl
mlxxxl

Margin Right

mrn
mrxs
mrs
mrm
mrl
mrxl
mrxxl
mrxxxl

Margin Top

mtn
mtxs
mts
mtm
mtl
mtxl
mtxxl
mtxxxl

Margin Bottom

mbn
mbxs
mbs
mbm
mbl
mbxl
mbxxl
mbxxxl

Previous

Box Sizing

Next

Floats
src/_spacing.css

<%= srcCSS  %>

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