diff --git a/LICENSE.txt b/LICENSE.txt
new file mode 100755
index 0000000..c8ec226
--- /dev/null
+++ b/LICENSE.txt
@@ -0,0 +1,14 @@
+ISC License (ISC)
+Copyright (c) 2017, Andrew Nater
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
diff --git a/build.js b/build.js
new file mode 100755
index 0000000..cdf0500
--- /dev/null
+++ b/build.js
@@ -0,0 +1,32 @@
+// dependencies
+
+var fs = require("fs");
+var autoprefixer = require("autoprefixer");
+var postcss = require("postcss");
+var atImport = require("postcss-import");
+var cssvariables = require("postcss-css-variables");
+var compressor = require("node-minify");
+var conditionals = require("postcss-conditionals");
+var customMedia = require("postcss-custom-media");
+
+// css to be processed
+var css = fs.readFileSync("src/tachyons-animate.css", "utf8");
+
+// process css
+var output = postcss([autoprefixer]).use(atImport()).use(cssvariables()).use(conditionals()).use(customMedia()).process(css, {
+	from: "src/tachyons-animate.css",
+	to: "tachyons-animate.css"
+}).css;
+
+fs.writeFile("tachyons-animate.css", output, "utf-8");
+
+// Using YUI Compressor for CSS
+new compressor.minify({
+	type: "sqwish",
+	fileIn: "tachyons-animate.css",
+	fileOut: "tachyons-animate.min.css",
+	callback: function(err, min) {
+		console.log("Sqwish");
+		console.log(err);
+	}
+});
diff --git a/css/tachyons-animate.css b/css/tachyons-animate.css
new file mode 100755
index 0000000..5d83de0
--- /dev/null
+++ b/css/tachyons-animate.css
@@ -0,0 +1,134 @@
+/*
+
+   WIDTHS
+   Docs: http://tachyons.io/docs/layout/widths/
+
+   Base:
+     w = width
+
+   Modifiers
+     1 = 1st step in width scale
+     2 = 2nd step in width scale
+     3 = 3rd step in width scale
+     4 = 4th step in width scale
+     5 = 5th step in width scale
+
+     -10  = literal value 10%
+     -20  = literal value 20%
+     -25  = literal value 25%
+     -33  = literal value 33%
+     -34  = literal value 34%
+     -40  = literal value 40%
+     -50  = literal value 50%
+     -60  = literal value 60%
+     -75  = literal value 75%
+     -80  = literal value 80%
+     -100 = literal value 100%
+
+     -third = 100% / 3 (Not supported in opera mini or IE8)
+     -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
+     -auto  = string value auto
+
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+/* Width Scale */
+.w1 { width: 1rem; }
+.w2 { width: 2rem; }
+.w3 { width: 4rem; }
+.w4 { width: 8rem; }
+.w5 { width: 16rem; }
+.w-10 { width: 10%; }
+.w-20 { width: 20%; }
+.w-25 { width: 25%; }
+.w-30 { width: 30%; }
+.w-33 { width: 33%; }
+.w-34 { width: 34%; }
+.w-40 { width: 40%; }
+.w-50 { width: 50%; }
+.w-60 { width: 60%; }
+.w-70 { width: 70%; }
+.w-75 { width: 75%; }
+.w-80 { width: 80%; }
+.w-90 { width: 90%; }
+.w-100 { width: 100%; }
+.w-third { width: calc( 100% / 3 ); }
+.w-two-thirds { width: calc( 100% / 1.5 ); }
+.w-auto { width: auto; }
+@media screen and (min-width: 30em) {
+ .w1-ns { width: 1rem; }
+ .w2-ns { width: 2rem; }
+ .w3-ns { width: 4rem; }
+ .w4-ns { width: 8rem; }
+ .w5-ns { width: 16rem; }
+ .w-10-ns { width: 10%; }
+ .w-20-ns { width: 20%; }
+ .w-25-ns { width: 25%; }
+ .w-30-ns { width: 30%; }
+ .w-33-ns { width: 33%; }
+ .w-34-ns { width: 34%; }
+ .w-40-ns { width: 40%; }
+ .w-50-ns { width: 50%; }
+ .w-60-ns { width: 60%; }
+ .w-70-ns { width: 70%; }
+ .w-75-ns { width: 75%; }
+ .w-80-ns { width: 80%; }
+ .w-90-ns { width: 90%; }
+ .w-100-ns { width: 100%; }
+ .w-third-ns { width: calc( 100% / 3 ); }
+ .w-two-thirds-ns { width: calc( 100% / 1.5 ); }
+ .w-auto-ns { width: auto; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .w1-m { width: 1rem; }
+ .w2-m { width: 2rem; }
+ .w3-m { width: 4rem; }
+ .w4-m { width: 8rem; }
+ .w5-m { width: 16rem; }
+ .w-10-m { width: 10%; }
+ .w-20-m { width: 20%; }
+ .w-25-m { width: 25%; }
+ .w-30-m { width: 30%; }
+ .w-33-m { width: 33%; }
+ .w-34-m { width: 34%; }
+ .w-40-m { width: 40%; }
+ .w-50-m { width: 50%; }
+ .w-60-m { width: 60%; }
+ .w-70-m { width: 70%; }
+ .w-75-m { width: 75%; }
+ .w-80-m { width: 80%; }
+ .w-90-m { width: 90%; }
+ .w-100-m { width: 100%; }
+ .w-third-m { width: calc( 100% / 3 ); }
+ .w-two-thirds-m { width: calc( 100% / 1.5 ); }
+ .w-auto-m { width: auto; }
+}
+@media screen and (min-width: 60em) {
+ .w1-l { width: 1rem; }
+ .w2-l { width: 2rem; }
+ .w3-l { width: 4rem; }
+ .w4-l { width: 8rem; }
+ .w5-l { width: 16rem; }
+ .w-10-l { width: 10%; }
+ .w-20-l { width: 20%; }
+ .w-25-l { width: 25%; }
+ .w-30-l { width: 30%; }
+ .w-33-l { width: 33%; }
+ .w-34-l { width: 34%; }
+ .w-40-l { width: 40%; }
+ .w-50-l { width: 50%; }
+ .w-60-l { width: 60%; }
+ .w-70-l { width: 70%; }
+ .w-75-l { width: 75%; }
+ .w-80-l { width: 80%; }
+ .w-90-l { width: 90%; }
+ .w-100-l { width: 100%; }
+ .w-third-l { width: calc( 100% / 3 ); }
+ .w-two-thirds-l { width: calc( 100% / 1.5 ); }
+ .w-auto-l { width: auto; }
+}
+
diff --git a/css/tachyons-animate.min.css b/css/tachyons-animate.min.css
new file mode 100644
index 0000000..191e377
--- /dev/null
+++ b/css/tachyons-animate.min.css
@@ -0,0 +1,2 @@
+.w1{width:1rem}.w2{width:2rem}.w3{width:4rem}.w4{width:8rem}.w5{width:16rem}.w-10{width:10%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}.w-33{width:33%}.w-34{width:34%}.w-40{width:40%}.w-50{width:50%}.w-60{width:60%}.w-70{width:70%}.w-75{width:75%}.w-80{width:80%}.w-90{width:90%}.w-100{width:100%}.w-third{width:33.33333%}.w-two-thirds{width:66.66667%}.w-auto{width:auto}@media screen and (min-width:30em){.w1-ns{width:1rem}.w2-ns{width:2rem}.w3-ns{width:4rem}.w4-ns{width:8rem}.w5-ns{width:16rem}.w-10-ns{width:10%}.w-20-ns{width:20%}.w-25-ns{width:25%}.w-30-ns{width:30%}.w-33-ns{width:33%}.w-34-ns{width:34%}.w-40-ns{width:40%}.w-50-ns{width:50%}.w-60-ns{width:60%}.w-70-ns{width:70%}.w-75-ns{width:75%}.w-80-ns{width:80%}.w-90-ns{width:90%}.w-100-ns{width:100%}.w-third-ns{width:33.33333%}.w-two-thirds-ns{width:66.66667%}.w-auto-ns{width:auto}}@media screen and (min-width:30em) and (max-width:60em){.w1-m{width:1rem}.w2-m{width:2rem}.w3-m{width:4rem}.w4-m{width:8rem}.w5-m{width:16rem}.w-10-m{width:10%}.w-20-m{width:20%}.w-25-m{width:25%}.w-30-m{width:30%}.w-33-m{width:33%}.w-34-m{width:34%}.w-40-m{width:40%}.w-50-m{width:50%}.w-60-m{width:60%}.w-70-m{width:70%}.w-75-m{width:75%}.w-80-m{width:80%}.w-90-m{width:90%}.w-100-m{width:100%}.w-third-m{width:33.33333%}.w-two-thirds-m{width:66.66667%}.w-auto-m{width:auto}}@media screen and (min-width:60em){.w1-l{width:1rem}.w2-l{width:2rem}.w3-l{width:4rem}.w4-l{width:8rem}.w5-l{width:16rem}.w-10-l{width:10%}.w-20-l{width:20%}.w-25-l{width:25%}.w-30-l{width:30%}.w-33-l{width:33%}.w-34-l{width:34%}.w-40-l{width:40%}.w-50-l{width:50%}.w-60-l{width:60%}.w-70-l{width:70%}.w-75-l{width:75%}.w-80-l{width:80%}.w-90-l{width:90%}.w-100-l{width:100%}.w-third-l{width:33.33333%}.w-two-thirds-l{width:66.66667%}.w-auto-l{width:auto}}
+
diff --git a/package.json b/package.json
new file mode 100755
index 0000000..6da4831
--- /dev/null
+++ b/package.json
@@ -0,0 +1,32 @@
+{
+	"name": "tachyons-animate",
+	"version": "1.0.0",
+	"style": "src/tachyons-animate.css",
+	"main": "src/tachyons-animate.css",
+	"description": "Performance based css module.",
+	"keywords": ["tachyons", "tachyons-css", "css-animations"],
+	"files": ["src", "css"],
+	"repository": "anater/tachyons-animate",
+	"author": {
+		"name": "anater",
+		"email": "a.a.nater@gmail.com",
+		"url": "http://andrewnater.com"
+	},
+	"license": "ISC",
+	"devDependencies": {
+		"tachyons-cli": "^1.0.11",
+		"watch": "^1.0.1"
+	},
+	"scripts": {
+		"start": "npm run build:watch",
+		"build:css": "tachyons src/tachyons-animate.css > css/tachyons-animate.css",
+		"build:minify": "tachyons src/tachyons-animate.css --minify > css/tachyons-animate.min.css",
+		"build:docs": "tachyons src/tachyons-animate.css --generate-docs --package=../../package.json > readme.md",
+		"build": "npm run build:css && npm run build:minify",
+		"build:watch": "watch 'npm run build' ./src"
+	},
+	"metadata": {
+		"category": "layout",
+		"isCore": true
+	}
+}
diff --git a/src/tachyons-animate.css b/src/tachyons-animate.css
new file mode 100755
index 0000000..c5c59b6
--- /dev/null
+++ b/src/tachyons-animate.css
@@ -0,0 +1,145 @@
+@custom-media --breakpoint-not-small screen and (min-width: 30em);
+@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);
+@custom-media --breakpoint-large screen and (min-width: 60em);
+
+/*
+
+   WIDTHS
+   Docs: http://tachyons.io/docs/layout/widths/
+
+   Base:
+     w = width
+
+   Modifiers
+     1 = 1st step in width scale
+     2 = 2nd step in width scale
+     3 = 3rd step in width scale
+     4 = 4th step in width scale
+     5 = 5th step in width scale
+
+     -10  = literal value 10%
+     -20  = literal value 20%
+     -25  = literal value 25%
+     -33  = literal value 33%
+     -34  = literal value 34%
+     -40  = literal value 40%
+     -50  = literal value 50%
+     -60  = literal value 60%
+     -75  = literal value 75%
+     -80  = literal value 80%
+     -100 = literal value 100%
+
+     -third = 100% / 3 (Not supported in opera mini or IE8)
+     -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
+     -auto  = string value auto
+
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+
+/* Width Scale */
+
+.w1 {    width: 1rem; }
+.w2 {    width: 2rem; }
+.w3 {    width: 4rem; }
+.w4 {    width: 8rem; }
+.w5 {    width: 16rem; }
+
+.w-10 {  width:  10%; }
+.w-20 {  width:  20%; }
+.w-25 {  width:  25%; }
+.w-30 {  width:  30%; }
+.w-33 {  width:  33%; }
+.w-34 {  width:  34%; }
+.w-40 {  width:  40%; }
+.w-50 {  width:  50%; }
+.w-60 {  width:  60%; }
+.w-70 {  width:  70%; }
+.w-75 {  width:  75%; }
+.w-80 {  width:  80%; }
+.w-90 {  width:  90%; }
+.w-100 { width: 100%; }
+
+.w-third { width: calc(100% / 3); }
+.w-two-thirds { width: calc(100% / 1.5); }
+.w-auto { width: auto; }
+
+@media (--breakpoint-not-small) {
+  .w1-ns {  width: 1rem; }
+  .w2-ns {  width: 2rem; }
+  .w3-ns {  width: 4rem; }
+  .w4-ns {  width: 8rem; }
+  .w5-ns {  width: 16rem; }
+  .w-10-ns { width:  10%; }
+  .w-20-ns { width:  20%; }
+  .w-25-ns { width:  25%; }
+  .w-30-ns { width:  30%; }
+  .w-33-ns { width:  33%; }
+  .w-34-ns { width:  34%; }
+  .w-40-ns { width:  40%; }
+  .w-50-ns { width:  50%; }
+  .w-60-ns { width:  60%; }
+  .w-70-ns { width:  70%; }
+  .w-75-ns { width:  75%; }
+  .w-80-ns { width:  80%; }
+  .w-90-ns { width:  90%; }
+  .w-100-ns { width: 100%; }
+  .w-third-ns { width: calc(100% / 3); }
+  .w-two-thirds-ns { width: calc(100% / 1.5); }
+  .w-auto-ns { width: auto; }
+}
+
+@media (--breakpoint-medium) {
+  .w1-m {      width: 1rem; }
+  .w2-m {      width: 2rem; }
+  .w3-m {      width: 4rem; }
+  .w4-m {      width: 8rem; }
+  .w5-m {      width: 16rem; }
+  .w-10-m { width:  10%; }
+  .w-20-m { width:  20%; }
+  .w-25-m { width:  25%; }
+  .w-30-m { width:  30%; }
+  .w-33-m { width:  33%; }
+  .w-34-m { width:  34%; }
+  .w-40-m { width:  40%; }
+  .w-50-m { width:  50%; }
+  .w-60-m { width:  60%; }
+  .w-70-m { width:  70%; }
+  .w-75-m { width:  75%; }
+  .w-80-m { width:  80%; }
+  .w-90-m { width:  90%; }
+  .w-100-m { width: 100%; }
+  .w-third-m { width: calc(100% / 3); }
+  .w-two-thirds-m { width: calc(100% / 1.5); }
+  .w-auto-m {    width: auto; }
+}
+
+@media (--breakpoint-large) {
+  .w1-l {      width: 1rem; }
+  .w2-l {      width: 2rem; }
+  .w3-l {      width: 4rem; }
+  .w4-l {      width: 8rem; }
+  .w5-l {      width: 16rem; }
+  .w-10-l {    width:  10%; }
+  .w-20-l {    width:  20%; }
+  .w-25-l {    width:  25%; }
+  .w-30-l {    width:  30%; }
+  .w-33-l {    width:  33%; }
+  .w-34-l {    width:  34%; }
+  .w-40-l {    width:  40%; }
+  .w-50-l {    width:  50%; }
+  .w-60-l {    width:  60%; }
+  .w-70-l {    width:  70%; }
+  .w-75-l {    width:  75%; }
+  .w-80-l {    width:  80%; }
+  .w-90-l {    width:  90%; }
+  .w-100-l {   width: 100%; }
+  .w-third-l { width: calc(100% / 3); }
+  .w-two-thirds-l { width: calc(100% / 1.5); }
+  .w-auto-l {    width: auto; }
+}