├── .gitignore ├── LICENSE.txt ├── css └── css-animation-delay.css ├── package.json ├── README.md └── npm-debug.log /.gitignore: -------------------------------------------------------------------------------- 1 | # List of files for git to ignore 2 | 3 | .DS_Store 4 | .AppleDouble 5 | .LSOverride 6 | 7 | # Icon must end with two \r 8 | Icon 9 | 10 | 11 | # Thumbnails 12 | ._* 13 | 14 | # Files that might appear on external disk 15 | .Spotlight-V100 16 | .Trashes 17 | 18 | # Directories potentially created on remote AFP share 19 | .AppleDB 20 | .AppleDesktop 21 | Network Trash Folder 22 | Temporary Items 23 | .apdisk 24 | 25 | # Vim 26 | Session.vim 27 | 28 | # Node 29 | node_modules/* 30 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | ISC License (ISC) 2 | Copyright (c) 2018, Adam Morse 3 | 4 | Permission to use, copy, modify, and/or distribute this software for any 5 | purpose with or without fee is hereby granted, provided that the above 6 | copyright notice and this permission notice appear in all copies. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND 10 | FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 14 | PERFORMANCE OF THIS SOFTWARE. 15 | -------------------------------------------------------------------------------- /css/css-animation-delay.css: -------------------------------------------------------------------------------- 1 | 2 | Postprocess tachyons stylesheets 3 | 4 | Usage 5 | $ tachyons 6 | 7 | Options 8 | -m, --minify Minify the output stylesheet 9 | -r, --repeat Repeat class names to increase specificity 10 | -a, --authors Dynamically add authors based on package.json 11 | -n, --new Generate a new Tachyons project 12 | --generate-docs Generate documentation for a given module 13 | --package The path to the module package to be documented 14 | 15 | Example 16 | $ tachyons src/tachyons.css > dist/c.css 17 | $ tachyons src/tachyons.css > dist/c.css --minify 18 | $ tachyons src/tachyons.css > dist/c.repeated.css --repeat 19 | $ tachyons src/tachyons-type-scale.css --generate-docs --package=./package.json > readme.md 20 | $ tachyons --new=my-new-project 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-animation-delay", 3 | "style": "animation-delay.css", 4 | "version": "1.0.11", 5 | "homepage": "http://github.com/mrmrs/css-animation-delay", 6 | "description": "Css module of single purpose classes for animation delay", 7 | "keywords": [ 8 | "css", 9 | "oocss", 10 | "performance", 11 | "animations" 12 | ], 13 | "css-animation-delay": { 14 | "type": "git", 15 | "url": "http://github.com/mrmrs/css-animation-delay.git" 16 | }, 17 | "bugs": { 18 | "url": "https://github.com/mrmrs/css-animation-delay/issues", 19 | "email": "hi@mrmrs.cc" 20 | }, 21 | "author": { 22 | "name": "Adam Morse", 23 | "email": "hi@mrmrs.cc", 24 | "url": "http://mrmrs.cc" 25 | }, 26 | "contributors": [ 27 | { 28 | "name": "Adam Morse", 29 | "email": "hi@mrmrs.cc" 30 | } 31 | ], 32 | "license": "MIT", 33 | "devDependencies": { 34 | "tachyons-cli": "^1.3.0" 35 | }, 36 | "scripts": { 37 | "start": "tachyons src/css-animation-delay.css > css/css-animation-delay.css && tachyons src/css-animation-delay.css --minify > css/css-animation-delay.min.css && tachyons src/css-animation-delay.css --generate-docs --package=../../package.json > readme.md" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS ANIMATION DELAY 2 | 3 | Mobile-first classes for an animation-delay scale. 4 | Set the desired animation-delay on any element for any breakpoint. 5 | Base class names are namespaced across three breakpoints: 6 | 7 | * -ns = not-small (covers everything larger than mobile) 8 | * -m = medium 9 | * -l = large 10 | 11 | ## Install 12 | Grab the css partial from github and include it in your project or alternatively 13 | you can install it via npm: 14 | ``` 15 | npm install --save-dev css-animation-delay 16 | ``` 17 | View on [npm](https://www.npmjs.org/package/css-animation-delay) 18 | 19 | 20 | 21 | ## File Size 22 | 23 | 1.2K animation-delay.css 24 | 904B animation-delay.min.css 25 | 200B minified and gzipped 26 | 27 | 28 | ## The Code 29 | ``` 30 | .a-delay-1 { animation-delay: .5s; } 31 | .a-delay-2 { animation-delay: 1s; } 32 | .a-delay-3 { animation-delay: 2s; } 33 | .a-delay-4 { animation-delay: 4s; } 34 | .a-delay-5 { animation-delay: 8s; } 35 | .a-delay-6 { animation-delay: 16s; } 36 | 37 | 38 | /* First breakpoint and larger */ 39 | @media screen and (min-width: 48em) { 40 | .a-delay-1-ns { animation-delay: .5s; } 41 | .a-delay-2-ns { animation-delay: 1s; } 42 | .a-delay-3-ns { animation-delay: 2s; } 43 | .a-delay-4-ns { animation-delay: 4s; } 44 | .a-delay-5-ns { animation-delay: 8s; } 45 | .a-delay-6-ns { animation-delay: 16s; } 46 | } 47 | 48 | /* Second breakpoint */ 49 | @media screen and (min-width: 48em) and (max-width: 64em) { 50 | .a-delay-1-m { animation-delay: .5s; } 51 | .a-delay-2-m { animation-delay: 1s; } 52 | .a-delay-3-m { animation-delay: 2s; } 53 | .a-delay-4-m { animation-delay: 4s; } 54 | .a-delay-5-m { animation-delay: 8s; } 55 | .a-delay-6-m { animation-delay: 16s; } 56 | } 57 | 58 | /* Third breakpoint */ 59 | @media screen and (min-width: 64em) { 60 | .a-delay-1-l { animation-delay: .5s; } 61 | .a-delay-2-l { animation-delay: 1s; } 62 | .a-delay-3-l { animation-delay: 2s; } 63 | .a-delay-4-l { animation-delay: 4s; } 64 | .a-delay-5-l { animation-delay: 8s; } 65 | .a-delay-6-l { animation-delay: 16s; } 66 | } 67 | 68 | ``` 69 | 70 | ## Author 71 | 72 | [http://mrmrs.cc - Entire internet gateway to all things mrmrs](http://mrmrs.cc) 73 | [http://mrmrs.io - Open source projects](http://mrmrs.io) 74 | 75 | ## License 76 | 77 | ISC 78 | -------------------------------------------------------------------------------- /npm-debug.log: -------------------------------------------------------------------------------- 1 | 0 info it worked if it ends with ok 2 | 1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ] 3 | 2 info using npm@3.10.3 4 | 3 info using node@v6.7.0 5 | 4 verbose run-script [ 'prestart', 'start', 'poststart' ] 6 | 5 info lifecycle css-animation-delay@1.0.9~prestart: css-animation-delay@1.0.9 7 | 6 silly lifecycle css-animation-delay@1.0.9~prestart: no script for prestart, continuing 8 | 7 info lifecycle css-animation-delay@1.0.9~start: css-animation-delay@1.0.9 9 | 8 verbose lifecycle css-animation-delay@1.0.9~start: unsafe-perm in lifecycle true 10 | 9 verbose lifecycle css-animation-delay@1.0.9~start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/mrmrs/c/css-animation-delay/node_modules/.bin:/usr/local/bin:/Users/mrmrs/.yarn/bin:/usr/local/bin:/usr/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin 11 | 10 verbose lifecycle css-animation-delay@1.0.9~start: CWD: /Users/mrmrs/c/css-animation-delay 12 | 11 silly lifecycle css-animation-delay@1.0.9~start: Args: [ '-c', 13 | 11 silly lifecycle 'tachyons src/css-animation-delay.css > css/css-animation-delay.css && tachyons src/css-animation-delay.css --minify > css/css-animation-delay.min.css && tachyons src/css-animation-delay.css --generate-docs --package=../../package.json > readme.md' ] 14 | 12 silly lifecycle css-animation-delay@1.0.9~start: Returned: code: 1 signal: null 15 | 13 info lifecycle css-animation-delay@1.0.9~start: Failed to exec start script 16 | 14 verbose stack Error: css-animation-delay@1.0.9 start: `tachyons src/css-animation-delay.css > css/css-animation-delay.css && tachyons src/css-animation-delay.css --minify > css/css-animation-delay.min.css && tachyons src/css-animation-delay.css --generate-docs --package=../../package.json > readme.md` 17 | 14 verbose stack Exit status 1 18 | 14 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:242:16) 19 | 14 verbose stack at emitTwo (events.js:106:13) 20 | 14 verbose stack at EventEmitter.emit (events.js:191:7) 21 | 14 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14) 22 | 14 verbose stack at emitTwo (events.js:106:13) 23 | 14 verbose stack at ChildProcess.emit (events.js:191:7) 24 | 14 verbose stack at maybeClose (internal/child_process.js:877:16) 25 | 14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5) 26 | 15 verbose pkgid css-animation-delay@1.0.9 27 | 16 verbose cwd /Users/mrmrs/c/css-animation-delay 28 | 17 error Darwin 16.1.0 29 | 18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start" 30 | 19 error node v6.7.0 31 | 20 error npm v3.10.3 32 | 21 error code ELIFECYCLE 33 | 22 error css-animation-delay@1.0.9 start: `tachyons src/css-animation-delay.css > css/css-animation-delay.css && tachyons src/css-animation-delay.css --minify > css/css-animation-delay.min.css && tachyons src/css-animation-delay.css --generate-docs --package=../../package.json > readme.md` 34 | 22 error Exit status 1 35 | 23 error Failed at the css-animation-delay@1.0.9 start script 'tachyons src/css-animation-delay.css > css/css-animation-delay.css && tachyons src/css-animation-delay.css --minify > css/css-animation-delay.min.css && tachyons src/css-animation-delay.css --generate-docs --package=../../package.json > readme.md'. 36 | 23 error Make sure you have the latest version of node.js and npm installed. 37 | 23 error If you do, this is most likely a problem with the css-animation-delay package, 38 | 23 error not with npm itself. 39 | 23 error Tell the author that this fails on your system: 40 | 23 error tachyons src/css-animation-delay.css > css/css-animation-delay.css && tachyons src/css-animation-delay.css --minify > css/css-animation-delay.min.css && tachyons src/css-animation-delay.css --generate-docs --package=../../package.json > readme.md 41 | 23 error You can get information on how to open an issue for this project with: 42 | 23 error npm bugs css-animation-delay 43 | 23 error Or if that isn't available, you can get their info via: 44 | 23 error npm owner ls css-animation-delay 45 | 23 error There is likely additional logging output above. 46 | 24 verbose exit [ 1, true ] 47 | --------------------------------------------------------------------------------