Skip to content

Latest commit

 

History

History
56 lines (41 loc) · 1.91 KB

07-custom-builds.md

File metadata and controls

56 lines (41 loc) · 1.91 KB
Raw

Custom Builds

Custom builds are not possible from a node_modules folder as we don't ship the building tools in the npm module.

Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS with proper fallbacks.

First of all, you’ll need Node and all other dependencies:

$ git clone https://github.com/animate-css/animate.css.git
$ cd animate.css
$ npm install

Next, run npm start to compile your custom build. Three files will be generated:

  • animate.css: raw build, easy to read and without any optimization
  • animate.min.css: minified build ready for production
  • animate.compat.css: minified build ready for production without class prefix. This should only be used as an easy path for migrations.

For example, if you'll only use some of the “attention seekers” animations, simply edit the ./source/animate.css file, delete every @import, and add the ones you want to use.

@import 'attention_seekers/bounce.css';
@import 'attention_seekers/flash.css';
@import 'attention_seekers/pulse.css';
@import 'attention_seekers/rubberBand.css';
@import 'attention_seekers/shake.css';
@import 'attention_seekers/headShake.css';
@import 'attention_seekers/swing.css';
@import 'attention_seekers/tada.css';
@import 'attention_seekers/wobble.css';
@import 'attention_seekers/jello.css';
@import 'attention_seekers/heartBeat.css';

Now, just run npm start and your highly optimized build will be generated at the root of the project.

Changing the default prefix

It's pretty straight forward to change animate's prefix on your custom build. Change the animateConfig's prefix property in the package.json file and rebuild the library with npm start:

/* on Animate.css package.json */
"animateConfig": {
  "prefix": "myCustomPrefix__"
},

then:

$ npm start

Easy peasy!