Skip to content

Commit

Permalink
Initialize project from tachyons-widths module
Browse files Browse the repository at this point in the history
  • Loading branch information
@anater
anater committed Jul 31, 2017
0 parents commit 14d7e0c
Show file tree
Hide file tree
Showing 6 changed files with 359 additions and 0 deletions.
14 changes: 14 additions & 0 deletions 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.
32 changes: 32 additions & 0 deletions 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);
}
});
134 changes: 134 additions & 0 deletions 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; }
}

2 changes: 2 additions & 0 deletions css/tachyons-animate.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

32 changes: 32 additions & 0 deletions 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
}
}
145 changes: 145 additions & 0 deletions 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; }
}

0 comments on commit 14d7e0c

Please sign in to comment.