Keyframes

This is a collection of web apps to live preview and generate various CSS styles. It originally started as a tool just for creating CSS animations (hence the name Keyframes), but now has additional tools.

Tools:

• Animations: A video-editor like timeline to create CSS @Keyframe animations.
• Colors: Full screen RGB color picker. Convert between HEX/RGB. Save palettes to local storge.
• Shadows: A visual CSS box-shadow generator. Single or multi-layer shadows.
• Character Codes: Search for special characters and get their HTML or CSS codes.

Project Installation & Development

Packages

npm install

NPM Commands

Serve on localhost:8080

npm run serve

Build for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Other things to set up

App version updates

The current version number of the app is used in a few different places - on the about modal, on the changelog, and also to determine if an update has been pushed, in order to force the cache/PWA to reload.

Before deploying, change the current version number in two places - * store.js * service-worker.js

Environment Variables

Fill in your VUEAPPBASEURL and VUEAPPBASEPATH in

.env

.env.production

Production Public Path

If the app is going to be deployed in a sub directory (ie website.com/app/), edit the path in vue.config.js.

Everything else you should know

Third-party libraries

I tried to use as few as possible. Apart from Vue and everything required by it, this project includes: * VueMoment (MomentJS) for time formatting * FontAwesome (Pro) for icons. You'll have to switch out icons if you don't have pro. * Vue Lodash For working with the data. * Color Convert for working with color values.

Other Features

• Fully responsive/PWA support
• Soft keyboard detection to hide elements on mobile for more space when keyboard is visible.
• Lock scrolling when modal is visible
• LESS Styles with global light/dark themes
• Preferences stored in local storage.