Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <article class="text-center">
  <nav class="bg-green-global" id="navbar">
    <header class="pad-all-sm">Animadio Doc</header>
    <ul>
      <li>
        <a class="nav-link" href="#Variables" accesskey="v" title="Access to Variables Part !">Variables</a>
      </li>
      <li>
        <a class="nav-link" href="#Keyframes" accesskey="k" title="Access to Keyframes Part !">Keyframes</a>
      </li>
      <li>
        <a class="nav-link" href="#Init" accesskey="i" title="Access to Init Part !">Init</a>
      </li>
      <li>
        <a class="nav-link" href="#Box" accesskey="b" title="Access to Box Part !">Box</a>
      </li>
      <li>
        <a class="nav-link" href="#Helpers" accesskey="h" title="Access to Helpers Part !">Helpers</a>
      </li>
    </ul>
  </nav>
  
  <h1>Animadio Technical Documentation Page</h1>

  <header class="card">
    <figure>
      <img src="https://animadio.org/img/logo.png" alt="Animadio Logo">
    </figure>
    <h2>Global Usage</h2>
    <p>The main feature of Animadio is the CSS variables usage, you can customize each variable directly from the CSS file !</p>
    <a class="btn" href="https://cdn.jsdelivr.net/npm/animadio@1.1.3/dist/animadio.css" title="Access to Animadio CDN" rel="noreferrer noopener" target="_blank">Animadio CDN</a>
  </header>

  <main id="main-doc" class="container-70sm">
    <section id="Variables" class="main-section">

      <header class="card-purple">
        <a class="btn-purple" href="https://github.com/animadio/animadio/blob/master/src/global/variables.css" title="View CSS Source @GitHub" rel="noreferrer noopener" target="_blank">
          <i class="fab fa-css3 fa-lg" aria-hidden="true"></i>
          Variables
        </a>
      </header>
      
      <h3>Variables</h3>

      <section>
        <h4>Why CSS variables ?</h4>
        <p>The only reason Animadio is <strong>fully written in CSS</strong> is the presence of custom properties & CSS variables.</p>
        <p><strong>Custom properties</strong> have the particularity of being overloaded directly from the custom stylesheet file...</p>
        <p>It is therefore possible to completely customize any element of the framework thanks to the <strong>CSS variables</strong>, in order to adapt it to each use case !</p>
      </section>

      <section>
        <h4>How to use CSS variables ?</h4>
        <p>Just choose <strong>the required variable</strong> with its selector in the following file :</p>
        <a class="btn-green" href="https://github.com/animadio/animadio/blob/master/src/global/variables.css" title="View all Variables" rel="noreferrer noopener" target="_blank">
          <i class="fab fa-github-alt fa-3x" aria-hidden="true"></i>
          Variables
        </a>
        <p>Then in your custom stylesheet file, write a CSS declaration with the necessary selector, the custom property to modify & <strong>the value you want</strong> !</p>
        <code>element { --variable-name: value; }</code>
        <p>You can find more informations about custom properties (CSS variables) usage here :</p>
        <a class="btn-blue" href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*" title="--*" rel="noreferrer noopener" target="_blank">Custom Properties</a>
        <a class="btn-blue" href="https://developer.mozilla.org/en-US/docs/Web/CSS/var" title="var()" rel="noreferrer noopener" target="_blank">Var Function</a>
        <a class="btn-blue" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" title="Custom Properties Usage" rel="noreferrer noopener" target="_blank">Variable Usage</a>
      </section>
    </section>

    <section id="Keyframes" class="main-section">

      <header class="card-purple">
        <a class="btn-purple" href="https://github.com/animadio/animadio/blob/master/src/global/keyframes.css" title="View CSS Source @GitHub" rel="noreferrer noopener" target="_blank">
          <i class="fab fa-css3 fa-lg" aria-hidden="true"></i>
          Keyframes
        </a>
      </header>
      
      <h3>Keyframes</h3>

      <section>
        <h4>Where Keyframes would be used ?</h4>
        <p>Keyframes could be used by 3 ways :</p>
        <ol>
          <li>in some Elements classes</li>
          <li>in the Anima classes</li>
          <li>in your own stylesheet file</li>
        </ol>
      </section>

      <section>
        <h4>How to use Keyframes ?</h4>
        <p>Just choose <strong>the required keyframes</strong> with its name in the following file :</p>
        <a class="btn-green" href="https://github.com/animadio/animadio/blob/master/src/global/keyframes.css" title="View all Keyframes" rel="noreferrer noopener" target="_blank">
          <i class="fab fa-github-alt fa-3x" aria-hidden="true"></i>
          Keyframes
        </a>
        <p>Then in your custom stylesheet file, write a CSS declaration with the necessary selector, the animation property, <strong>the keyframes name to use</strong> & the animation options you want !</p>
        <code>element { animation: keyframes-name duration options; }</code>
        <p>You can find more informations about keyframes usage here :</p>
        <a class="btn-blue" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes" title="@keyframes" rel="noreferrer noopener" target="_blank">Keyframes</a>
        <a class="btn-blue" href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation" title="Animation Property" rel="noreferrer noopener" target="_blank">Animation</a>
        <a class="btn-blue" href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name" title="Animation Name Property" rel="noreferrer noopener" target="_blank">Animation Name</a>
        <a class="btn-blue" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS Animation Usage" rel="noreferrer noopener" target="_blank">Keyframes Usage</a>
      </section>
    </section>
      
    <section id="Init" class="main-section">

      <header class="card-purple">
        <a class="btn-purple" href="https://github.com/animadio/animadio/blob/master/src/global/init.css" title="View CSS Source @GitHub" rel="noreferrer noopener" target="_blank">
          <i class="fab fa-css3 fa-lg" aria-hidden="true"></i>
          Init
        </a>
      </header>
      
      <h3>Init</h3>

      <section>
        <h4>What Init does ?</h4>
        <p>Init is here to manage 3 kind of things :</p>
        <ol>
          <li>hide the 2 main classes : check & radio</li>
          <li>define on main tags important properties with certain values without the possibility to change them</li>
          <li>set custom properties to all necessary tags</li>
        </ol>
      </section>

      <section>
        <h4>How to change there values ?</h4>
        <p>Just choose <strong>the required variable</strong> with its selector in the following file :</p>
        <a class="btn-green" href="https://github.com/animadio/animadio/blob/master/src/global/init.css" title="View all Init Tags" rel="noreferrer noopener" target="_blank">
          <i class="fab fa-github-alt fa-3x" aria-hidden="true"></i>
          Init
        </a>
        <p>Then in your custom stylesheet file, write a CSS declaration with the necessary tag, the custom property to modify & <strong>the value you want</strong> !</p>
        <code>tag { --variable-name: value; }</code>
        <p>You can find more informations about the definitions of HTML tags here :</p>
        <a class="btn-blue" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" title="HTML Tags" rel="noreferrer noopener" target="_blank">HTML Elements</a>
      </section>
    </section>
    
    <section id="Box" class="main-section">
      
      <header class="card-purple">
        <a class="btn-purple" href="https://github.com/animadio/animadio/blob/master/src/global/box.css" title="View CSS Source @GitHub" rel="noreferrer noopener" target="_blank">
          <i class="fab fa-css3 fa-lg" aria-hidden="true"></i>
          Box
        </a>
      </header>
      
      <h3>Box</h3>

      <section>
        <h4>What's inside the Box ?</h4>
        <p>Box file contains 5 types of helper classes handling the Box Model :</p>
        <ol>
          <li>the Container classes</li>
          <li>the Margin classes</li>
          <li>the Padding classes</li>
          <li>the Height classes</li>
          <li>the Width classes</li>
        </ol>
      </section>

      <section>
        <h4>Usage of the Box Classes</h4>
        <p>For the Container classes, you need to concat the class name "container-" with the size you want : between 70, 80 & 90, in a specific media : from xs to xl.</p>
        <code>class="container-90sm-80md-70lg"</code>
        <p>For the other box classes, you need to use the full class name like "mar-all-none", or "pad-top-md", or "height-sm", "max-w-lg" or to concat with the keyword "global" : the first to get the effect on the element, the second to get the effect on the direct children.</p>
        <code>class="mar-all-none-global"</code>
      </section>
    </section>
    
    <section id="Helpers" class="main-section">
      
      <header class="card-purple">
        <a class="btn-purple" href="https://github.com/animadio/animadio/blob/master/src/global/helpers.css" title="View CSS Source @GitHub" rel="noreferrer noopener" target="_blank">
          <i class="fab fa-css3 fa-lg" aria-hidden="true"></i>
          Helpers
        </a>
      </header>
      
      <h3>Helpers</h3>

      <section>
        <h4>What kind of helpers ?</h4>
        <p>The 3 types of helper classes available in addition are :</p>
        <ol>
          <li>the Font classes</li>
          <li>the Text classes</li>
          <li>the Cursor classes</li>
        </ol>
      </section>
      
    </section>
  </main>
  
  <footer class="foot">
    <ul>
      <li>
        <h3>Project</h3>
        <ul>
          <li>
            <a href="https://github.com/animadio/animadio" rel="noreferrer noopener" target="_blank">GitHub</a>
          </li>
          <li>
            <a href="https://github.com/animadio/animadio/releases" rel="noreferrer noopener" target="_blank">Release</a>
          </li>
          <li>
            <a href="https://github.com/animadio/animadio/wiki" rel="noreferrer noopener" target="_blank">About</a>
          </li>
          <li>
            <a href="https://github.com/animadio/animadio/blob/master/LICENSE" rel="noreferrer noopener" target="_blank">License</a>
          </li>
          <li>
            <a href="https://github.com/animadio/animadio/issues" rel="noreferrer noopener" target="_blank">Issues</a>
          </li>
          <li>
            <a href="https://github.com/animadio/animadio/pulls" rel="noreferrer noopener" target="_blank">Requests</a>
          </li>
        </ul>
      </li>
      <li>
        <h3>Community</h3>
        <ul>
          <li>
            <a href="https://join.slack.com/t/animadio/shared_invite/enQtNjAxMjg0OTUyODM5LWE5ZjNhNWYxMzVjZTdlMjhkNDhiNDVlYmQ1NjY3NTVhZGFmNDg2ODVhMmYyYmQwMDBkYmYyY2Q0NGQ5OGY3NWY" rel="noreferrer noopener" target="_blank">Slack</a>
          </li>
          <li>
            <a href="https://twitter.com/animadio" rel="noreferrer noopener" target="_blank">Twitter</a>
          </li>
          <li>
            <a href="https://codepen.io/animadio" rel="noreferrer noopener" target="_blank">CodePen</a>
          </li>
          <li>
            <a href="https://github.com/animadio/animadio#contributing" rel="noreferrer noopener" target="_blank">Contribute</a>
          </li>
          <li>
            <a href="https://github.com/orgs/animadio/people" rel="noreferrer noopener" target="_blank">Team</a>
          </li>
        </ul>
      </li>
      <li>
        <h3>Examples</h3>
        <ul>
          <li>
            <a href="https://codepen.io/animadio/pen/LamGvj" rel="noreferrer noopener" target="_blank">Btn</a>
          </li>
          <li>
            <a href="https://codepen.io/animadio/pen/KKPmGvE" rel="noreferrer noopener" target="_blank">Card</a>
          </li>
          <li>
            <a href="https://codepen.io/animadio/pen/YgLwbe" rel="noreferrer noopener" target="_blank">Foot</a>
          </li>
          <li>
            <a href="https://codepen.io/animadio/pen/EMLPzN" rel="noreferrer noopener" target="_blank">Form</a>
          </li>
          <li>
            <a href="https://codepen.io/animadio/pen/NJMxmm" rel="noreferrer noopener" target="_blank">Gallery</a>
          </li>
          <li>
            <a href="https://codepen.io/animadio/pen/rRvxbe" rel="noreferrer noopener" target="_blank">Menu</a>
          </li>
          <li>
            <a href="https://codepen.io/animadio/pen/rRvxRe" rel="noreferrer noopener" target="_blank">Navbar</a>
          </li>
          <li>
            <a href="https://codepen.io/animadio/pen/QoryoX" rel="noreferrer noopener" target="_blank">Slider</a>
          </li>
          <li>
            <a href="https://codepen.io/animadio/pen/ZPoQNb" rel="noreferrer noopener" target="_blank">Table</a>
          </li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>
        <a class="color-npm" href="https://www.npmjs.com/package/animadio" rel="noreferrer noopener" target="_blank" title="View Animadio @NPM">
          <i class="fab fa-npm fa-3x" aria-hidden="true"></i>
        </a>
      </li>
      <li>
        <a class="color-github" href="https://github.com/animadio/animadio" rel="noreferrer noopener" target="_blank" title="View Animadio @GitHub">
          <i class="fab fa-github fa-3x" aria-hidden="true"></i>
        </a>
      </li>
      <li>
        <a class="color-jsd" href="https://www.jsdelivr.com/package/npm/animadio" rel="noreferrer noopener" target="_blank" title="View Animadio @JSDelivr">
          <i class="fab fa-js-square fa-3x" aria-hidden="true"></i>
        </a>
      </li>
    </ul>
  </footer>
</article>
            
          
!
            
              @media (min-width: 992px) {
  nav {
    position: fixed;
    top: 20%;
    left: 0;
    bottom: 0;
  }
}
            
          
!
            
              // No JavaScript at all !
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console