Add custom build warning (#1451)

animate.css

@@ -5,7 +5,7 @@
  * Version - 4.1.1
  * Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
  *
- * Copyright (c) 2021 Animate.css
+ * Copyright (c) 2022 Animate.css
  */
 :root {
   --animate-duration: 1s;

docs/index.html

@@ -1208,9 +1208,11 @@ animateCSS('.my-element', 'bounce').then((message) => {
 
       <section class="docSection-custom-builds" id="custom-builds">
         <h2>Custom Builds</h2>
-<p>Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS today.</p>
+<p class="warning">Custom builds are not possible from a node_modules folder as we don't ship the building tools in the npm module.</p>
+<p>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.</p>
 <p>First of all, you’ll need Node and all other dependencies:</p>
-<pre><code class="language-shell">$ cd path/to/animate.css/
+<pre><code class="language-shell">$ git clone https://github.com/animate-css/animate.css.git
+$ cd animate.css
 $ npm install
 </code></pre>
 <p>Next, run <code>npm start</code> to compile your custom build. Three files will be generated:</p>

docs/style.css

@@ -148,6 +148,16 @@ h5 {
   text-decoration: none;
 }
 
+.warning {
+  padding: 1rem;
+
+  color: #000;
+  background: var(--c-background-dark);
+  border-radius: 0.25em;
+
+  font-style: italic;
+}
+
 blockquote {
   border-left: 6px solid var(--c-secondary);
   padding-left: 1rem;
@@ -283,7 +293,7 @@ blockquote {
   justify-content: space-between;
 }
 
-.animation-item--title{
+.animation-item--title {
   width: 100%;
 }
 
@@ -320,23 +330,23 @@ blockquote {
 .copy-icon {
   position: relative;
   height: 10px;
-  border: 1px solid rgba(0, 0, 0, .3);
+  border: 1px solid rgba(0, 0, 0, 0.3);
   align-self: center;
   outline: none;
   cursor: pointer;
   background: none;
-  background: #F7D7B5;
+  background: #f7d7b5;
   visibility: hidden;
 }
 
-.copy-icon::before{
+.copy-icon::before {
   content: '';
   position: absolute;
   right: -4px;
   top: -4px;
   width: 120%;
   height: 120%;
-  border: 1px solid rgba(0, 0, 0, .3);
+  border: 1px solid rgba(0, 0, 0, 0.3);
   z-index: -1;
 }
 
@@ -345,7 +355,7 @@ blockquote {
 }
 
 .animation-item .copy-icon:hover,
-.animation-item .copy-icon:hover::before{
+.animation-item .copy-icon:hover::before {
   border-color: black;
 }
 
@@ -686,19 +696,19 @@ blockquote {
 
 .dark .animation-list,
 .dark .sidebar {
-  background: #15151D;
+  background: #15151d;
 }
 
 .dark .button.button-animations,
 .dark .callout-hideList.button {
   color: #e0e0e0;
-  border-color: rgba(255, 255, 255, .7);
+  border-color: rgba(255, 255, 255, 0.7);
   outline: none;
 }
 
 .dark .copy-icon,
 .dark .copy-icon:hover {
-  background: #15151D;
+  background: #15151d;
   border-color: #e0e0e0;
 }
 
@@ -714,13 +724,13 @@ blockquote {
 .dark h2,
 .dark h3,
 .dark h4,
-.dark a[title="Documentation"],
+.dark a[title='Documentation'],
 .dark pre * {
   color: #e0e0e0;
 }
 
 .dark section {
-  border-color: rgba(255, 255, 255, .2);
+  border-color: rgba(255, 255, 255, 0.2);
 }
 
 .dark h1,

docsSource/sections/07-custom-builds.md

@@ -1,11 +1,14 @@
 ## Custom Builds
 
-Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS today.
+<p class="warning">Custom builds are not possible from a node_modules folder as we don't ship the building tools in the npm module.</p>
+
+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:
 
 ```shell
-$ cd path/to/animate.css/
+$ git clone https://github.com/animate-css/animate.css.git
+$ cd animate.css
 $ npm install
 ```