Need help with Keyframes?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mitchas
173 Stars 6 Forks MIT License 93 Commits 14 Opened issues

Description

A simple CSS toolbox

Services available

!
?

Need anything else?

Contributors list

# 364,844
HTML
Vue.js
Less
Shell
89 commits

Keyframes

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
and
.env.production
. The base URL should be the bare URL it'll be hosted at (ie https://example.com - no trailing slash) and the base path should be the path at the URL (ie /app if it'll be at example.com/app). For the root, leave it at /.

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.