Position
Html elements are initially set to a position of 'static'. Tachyons provides classes
- for setting position to be relative or absolute.
+ for setting position to be relative or absolute.
-
+
Absolute elements are
absolutely positioned inside of a relative element. You can use absolute
positioning to stretch elements making sure they fill the width and height of a
diff --git a/docs/layout/spacing/index.html b/docs/layout/spacing/index.html
index 5d1fc7e7f..4582849a4 100644
--- a/docs/layout/spacing/index.html
+++ b/docs/layout/spacing/index.html
@@ -64,54 +64,46 @@
diff --git a/docs/layout/widths/index.html b/docs/layout/widths/index.html
index d9b3701ff..a05ad1b1e 100644
--- a/docs/layout/widths/index.html
+++ b/docs/layout/widths/index.html
@@ -64,54 +64,46 @@
diff --git a/src/modules/box-sizing.js b/src/modules/box-sizing.js
index 6663f7376..535a2f146 100644
--- a/src/modules/box-sizing.js
+++ b/src/modules/box-sizing.js
@@ -17,7 +17,7 @@ var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
var head = fs.readFileSync('./src/templates/head.html', 'utf8')
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
-
+var layoutNav = fs.readFileSync('./src/templates/layout-nav.html', 'utf8')
var template = fs.readFileSync('./src/templates/docs/box-sizing/index.html', 'utf8')
var tpl = _.template(template)
@@ -31,7 +31,8 @@ var html = tpl({
siteFooter: siteFooter,
googleAnalytics: googleAnalytics,
head: head,
- siteHeader: siteHeader
+ siteHeader: siteHeader,
+ layoutNav: layoutNav
})
fs.writeFileSync('./docs/layout/box-sizing/index.html', html)
diff --git a/src/modules/clearfix.js b/src/modules/clearfix.js
index ddedd599f..5db4c0702 100644
--- a/src/modules/clearfix.js
+++ b/src/modules/clearfix.js
@@ -17,6 +17,7 @@ var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
var head = fs.readFileSync('./src/templates/head.html', 'utf8')
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
+var layoutNav = fs.readFileSync('./src/templates/layout-nav.html', 'utf8')
var template = fs.readFileSync('./src/templates/docs/clearfix/index.html', 'utf8')
var tpl = _.template(template)
@@ -30,7 +31,8 @@ var html = tpl({
siteFooter: siteFooter,
googleAnalytics: googleAnalytics,
head: head,
- siteHeader: siteHeader
+ siteHeader: siteHeader,
+ layoutNav: layoutNav
})
fs.writeFileSync('./docs/layout/clearfix/index.html', html)
diff --git a/src/modules/debug-grid.js b/src/modules/debug-grid.js
index 060b3d97c..689498745 100644
--- a/src/modules/debug-grid.js
+++ b/src/modules/debug-grid.js
@@ -18,6 +18,7 @@ var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
var head = fs.readFileSync('./src/templates/head.html', 'utf8')
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
+var layoutNav = fs.readFileSync('./src/templates/layout-nav.html', 'utf8')
var template = fs.readFileSync('./src/templates/docs/debug-grid/index.html', 'utf8')
var tpl = _.template(template)
@@ -31,7 +32,8 @@ var html = tpl({
siteFooter: siteFooter,
googleAnalytics: googleAnalytics,
head: head,
- siteHeader: siteHeader
+ siteHeader: siteHeader,
+ layoutNav: layoutNav
})
fs.writeFileSync('./docs/debug-grid/index.html', html)
diff --git a/src/modules/debug.js b/src/modules/debug.js
index 2cdde8afd..263f26412 100644
--- a/src/modules/debug.js
+++ b/src/modules/debug.js
@@ -18,6 +18,7 @@ var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
var head = fs.readFileSync('./src/templates/head.html', 'utf8')
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
+var layoutNav = fs.readFileSync('./src/templates/layout-nav.html', 'utf8')
var template = fs.readFileSync('./src/templates/docs/debug/index.html', 'utf8')
var tpl = _.template(template)
@@ -31,7 +32,8 @@ var html = tpl({
siteFooter: siteFooter,
googleAnalytics: googleAnalytics,
head: head,
- siteHeader: siteHeader
+ siteHeader: siteHeader,
+ layoutNav: layoutNav
})
fs.writeFileSync('./docs/debug/index.html', html)
diff --git a/src/modules/display.js b/src/modules/display.js
index 201ef191d..a366458f0 100644
--- a/src/modules/display.js
+++ b/src/modules/display.js
@@ -18,6 +18,7 @@ var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
var head = fs.readFileSync('./src/templates/head.html', 'utf8')
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
+var layoutNav = fs.readFileSync('./src/templates/layout-nav.html', 'utf8')
var template = fs.readFileSync('./src/templates/docs/display/index.html', 'utf8')
var tpl = _.template(template)
@@ -31,7 +32,8 @@ var html = tpl({
siteFooter: siteFooter,
googleAnalytics: googleAnalytics,
head: head,
- siteHeader: siteHeader
+ siteHeader: siteHeader,
+ layoutNav: layoutNav
})
fs.writeFileSync('./docs/layout/display/index.html', html)
diff --git a/src/modules/flexbox.js b/src/modules/flexbox.js
index 5a7692161..de4888e34 100644
--- a/src/modules/flexbox.js
+++ b/src/modules/flexbox.js
@@ -19,7 +19,7 @@ var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
var head = fs.readFileSync('./src/templates/head.html', 'utf8')
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
-
+var layoutNav = fs.readFileSync('./src/templates/layout-nav.html', 'utf8')
var template = fs.readFileSync('./src/templates/docs/flexbox/index.html', 'utf8')
var tpl = _.template(template)
@@ -33,8 +33,8 @@ var html = tpl({
siteFooter: siteFooter,
googleAnalytics: googleAnalytics,
head: head,
- siteHeader: siteHeader
-
+ siteHeader: siteHeader,
+ layoutNav: layoutNav
})
fs.writeFileSync('./docs/layout/flexbox/index.html', html)
diff --git a/src/modules/floats.js b/src/modules/floats.js
index bd41d8040..36238f91d 100644
--- a/src/modules/floats.js
+++ b/src/modules/floats.js
@@ -18,6 +18,7 @@ var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
var head = fs.readFileSync('./src/templates/head.html', 'utf8')
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
+var layoutNav = fs.readFileSync('./src/templates/layout-nav.html', 'utf8')
var template = fs.readFileSync('./src/templates/docs/floats/index.html', 'utf8')
var tpl = _.template(template)
@@ -31,7 +32,8 @@ var html = tpl({
siteFooter: siteFooter,
googleAnalytics: googleAnalytics,
head: head,
- siteHeader: siteHeader
+ siteHeader: siteHeader,
+ layoutNav: layoutNav
})
fs.writeFileSync('./docs/layout/floats/index.html', html)
diff --git a/src/modules/grid.js b/src/modules/grid.js
index 94759a399..b54140f15 100644
--- a/src/modules/grid.js
+++ b/src/modules/grid.js
@@ -10,7 +10,7 @@ var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
var head = fs.readFileSync('./src/templates/head.html', 'utf8')
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
-
+var layoutNav = fs.readFileSync('./src/templates/layout-nav.html', 'utf8')
var template = fs.readFileSync('./src/templates/docs/grid/index.html', 'utf8')
var tpl = _.template(template)
@@ -19,7 +19,8 @@ var html = tpl({
siteFooter: siteFooter,
googleAnalytics: googleAnalytics,
head: head,
- siteHeader: siteHeader
+ siteHeader: siteHeader,
+ layoutNav: layoutNav
})
fs.writeFileSync('./docs/layout/grid/index.html', html)
diff --git a/src/modules/heights.js b/src/modules/heights.js
index 604a5e36b..ac37df540 100644
--- a/src/modules/heights.js
+++ b/src/modules/heights.js
@@ -17,7 +17,7 @@ var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
var head = fs.readFileSync('./src/templates/head.html', 'utf8')
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
-
+var layoutNav = fs.readFileSync('./src/templates/layout-nav.html', 'utf8')
var template = fs.readFileSync('./src/templates/docs/heights/index.html', 'utf8')
var tpl = _.template(template)
@@ -31,7 +31,8 @@ var html = tpl({
siteFooter: siteFooter,
googleAnalytics: googleAnalytics,
head: head,
- siteHeader: siteHeader
+ siteHeader: siteHeader,
+ layoutNav: layoutNav
})
fs.writeFileSync('./docs/layout/heights/index.html', html)
diff --git a/src/modules/max-widths.js b/src/modules/max-widths.js
index 42515d380..94ce90880 100644
--- a/src/modules/max-widths.js
+++ b/src/modules/max-widths.js
@@ -17,7 +17,7 @@ var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
var head = fs.readFileSync('./src/templates/head.html', 'utf8')
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
-
+var layoutNav = fs.readFileSync('./src/templates/layout-nav.html', 'utf8')
var template = fs.readFileSync('./src/templates/docs/max-widths/index.html', 'utf8')
var tpl = _.template(template)
@@ -32,7 +32,8 @@ var html = tpl({
siteFooter: siteFooter,
googleAnalytics: googleAnalytics,
head: head,
- siteHeader: siteHeader
+ siteHeader: siteHeader,
+ layoutNav: layoutNav
})
fs.writeFileSync('./docs/layout/max-widths/index.html', html)
diff --git a/src/modules/position.js b/src/modules/position.js
index 1856c1ca1..1b0390e36 100644
--- a/src/modules/position.js
+++ b/src/modules/position.js
@@ -17,7 +17,7 @@ var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
var head = fs.readFileSync('./src/templates/head.html', 'utf8')
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
-
+var layoutNav = fs.readFileSync('./src/templates/layout-nav.html', 'utf8')
var template = fs.readFileSync('./src/templates/docs/position/index.html', 'utf8')
var tpl = _.template(template)
@@ -32,7 +32,8 @@ var html = tpl({
siteFooter: siteFooter,
googleAnalytics: googleAnalytics,
head: head,
- siteHeader: siteHeader
+ siteHeader: siteHeader,
+ layoutNav: layoutNav
})
fs.writeFileSync('./docs/layout/position/index.html', html)
diff --git a/src/modules/spacing.js b/src/modules/spacing.js
index 356bd2d60..414c73409 100644
--- a/src/modules/spacing.js
+++ b/src/modules/spacing.js
@@ -17,7 +17,7 @@ var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
var head = fs.readFileSync('./src/templates/head.html', 'utf8')
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
-
+var layoutNav = fs.readFileSync('./src/templates/layout-nav.html', 'utf8')
var template = fs.readFileSync('./src/templates/docs/spacing/index.html', 'utf8')
var tpl = _.template(template)
@@ -31,7 +31,8 @@ var html = tpl({
siteFooter: siteFooter,
googleAnalytics: googleAnalytics,
head: head,
- siteHeader: siteHeader
+ siteHeader: siteHeader,
+ layoutNav: layoutNav
})
fs.writeFileSync('./docs/layout/spacing/index.html', html)
diff --git a/src/modules/widths.js b/src/modules/widths.js
index 4d8e8b14c..f12c34f3f 100644
--- a/src/modules/widths.js
+++ b/src/modules/widths.js
@@ -19,7 +19,7 @@ var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
var head = fs.readFileSync('./src/templates/head.html', 'utf8')
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
-
+var layoutNav = fs.readFileSync('./src/templates/layout-nav.html', 'utf8')
var template = fs.readFileSync('./src/templates/docs/widths/index.html', 'utf8')
var tpl = _.template(template)
@@ -33,8 +33,8 @@ var html = tpl({
siteFooter: siteFooter,
googleAnalytics: googleAnalytics,
head: head,
- siteHeader: siteHeader
-
+ siteHeader: siteHeader,
+ layoutNav: layoutNav
})
fs.writeFileSync('./docs/layout/widths/index.html', html)
diff --git a/src/templates/docs/box-sizing/index.html b/src/templates/docs/box-sizing/index.html
index ce41c6e9b..66c0d3187 100644
--- a/src/templates/docs/box-sizing/index.html
+++ b/src/templates/docs/box-sizing/index.html
@@ -12,54 +12,7 @@
diff --git a/src/templates/docs/clearfix/index.html b/src/templates/docs/clearfix/index.html
index 7ad3c4c13..099fbece2 100644
--- a/src/templates/docs/clearfix/index.html
+++ b/src/templates/docs/clearfix/index.html
@@ -12,54 +12,7 @@
diff --git a/src/templates/docs/debug-grid/index.html b/src/templates/docs/debug-grid/index.html
index 5bb906933..f0ff94459 100644
--- a/src/templates/docs/debug-grid/index.html
+++ b/src/templates/docs/debug-grid/index.html
@@ -12,54 +12,7 @@
@@ -84,7 +37,7 @@ Debug Grid
Examples
Grid at 8px
-
+
The Grid
& the Graphic Designer
@@ -108,10 +61,10 @@ & the Graphic Design
job at hand.
-
+
Grid at 16px
-
+
Image Title
Image description
diff --git a/src/templates/docs/debug/index.html b/src/templates/docs/debug/index.html
index ca92bfb60..958f399c9 100644
--- a/src/templates/docs/debug/index.html
+++ b/src/templates/docs/debug/index.html
@@ -12,54 +12,7 @@
diff --git a/src/templates/docs/display/index.html b/src/templates/docs/display/index.html
index fa0f50cb4..07f2f394b 100644
--- a/src/templates/docs/display/index.html
+++ b/src/templates/docs/display/index.html
@@ -12,54 +12,7 @@
diff --git a/src/templates/docs/flexbox/index.html b/src/templates/docs/flexbox/index.html
index fe1ca7498..91825b8f2 100644
--- a/src/templates/docs/flexbox/index.html
+++ b/src/templates/docs/flexbox/index.html
@@ -14,45 +14,7 @@
diff --git a/src/templates/docs/floats/index.html b/src/templates/docs/floats/index.html
index 480016ad6..9e959a6d3 100644
--- a/src/templates/docs/floats/index.html
+++ b/src/templates/docs/floats/index.html
@@ -12,54 +12,7 @@
diff --git a/src/templates/docs/grid/index.html b/src/templates/docs/grid/index.html
index a110f3411..bf7e140c7 100644
--- a/src/templates/docs/grid/index.html
+++ b/src/templates/docs/grid/index.html
@@ -12,54 +12,7 @@
diff --git a/src/templates/docs/heights/index.html b/src/templates/docs/heights/index.html
index 661b7df21..bc8e963e4 100644
--- a/src/templates/docs/heights/index.html
+++ b/src/templates/docs/heights/index.html
@@ -12,54 +12,7 @@
diff --git a/src/templates/docs/max-widths/index.html b/src/templates/docs/max-widths/index.html
index 55491ef36..2df834e38 100644
--- a/src/templates/docs/max-widths/index.html
+++ b/src/templates/docs/max-widths/index.html
@@ -12,61 +12,14 @@
Max Widths
The max-widths module contains both a ten-step scale based on powers
- of two as well as the ability to constrain element widths to a maximum of 100%.
+ of two as well as the ability to constrain element widths to a maximum of 100%.
diff --git a/src/templates/docs/position/index.html b/src/templates/docs/position/index.html
index bd370d601..45524813a 100644
--- a/src/templates/docs/position/index.html
+++ b/src/templates/docs/position/index.html
@@ -12,67 +12,16 @@
Position
Html elements are initially set to a position of 'static'. Tachyons provides classes
- for setting position to be relative or absolute.
+ for setting position to be relative or absolute.
-
+
Absolute elements are
absolutely positioned inside of a relative element. You can use absolute
positioning to stretch elements making sure they fill the width and height of a
diff --git a/src/templates/docs/spacing/index.html b/src/templates/docs/spacing/index.html
index 778aff3a8..865d3b309 100644
--- a/src/templates/docs/spacing/index.html
+++ b/src/templates/docs/spacing/index.html
@@ -12,54 +12,7 @@
diff --git a/src/templates/docs/widths/index.html b/src/templates/docs/widths/index.html
index 801fdddea..bd3ba65f5 100644
--- a/src/templates/docs/widths/index.html
+++ b/src/templates/docs/widths/index.html
@@ -12,54 +12,7 @@
diff --git a/src/templates/layout-nav.html b/src/templates/layout-nav.html
new file mode 100644
index 000000000..6911ab19b
--- /dev/null
+++ b/src/templates/layout-nav.html
@@ -0,0 +1,39 @@
+
+ Debugging
+
+
+ Debug Grid
+
+
+ Box sizing
+
+
+ Spacing
+
+
+ Floats
+
+
+ Clearfix
+
+
+ Display
+
+
+ Widths
+
+
+ Basic Grid
+
+
+ Flexbox
+
+
+ Max Widths
+
+
+ Heights
+
+
+ Position
+