CodeDocs

  • Example 1:

  • Code:

    <p>
    <a class="vtra vgrow vh" href="#">grow</a>
    </p>
    <p>
    <a class="vtra vgrowRotate vh" href="#">growRotate</a>
    </p>
    <p>
    <a class="vtra vrotate vh" href="#">rotate</a>
    </p>
    <p>
    <a class="vtra vshrink vh" href="#">shrink</a>
    </p>
    <p>
    <a class="vtra vbounceUt vh" href="#">bounceUp</a>
    </p>
    <p>
    <a class="vtra vbounceDt vh" href="#">bounceDown</a>
    </p>
    <p>
    <a class="vtra vmoveUt vh" href="#">moveUp</a>
    </p>
    <p>
    <a class="vtra vmoveDt vh" href="#">moveDown</a>
    </p>
    <p>
    <a class="vtra vmoveRt vh" href="#">moveRight</a>
    </p>
    <p>
    <a class="vtra vmoveLt vh" href="#">moveLeft</a>
    </p>
  • Example 2:

  • Code:

    <p class="vh-run">
    <a class="vtra vflipItXt vtra-d3 vtra-d1- vrun" href="#">Flip In X</a>
    </p>
    <p class="vh-run">
    <a class="vtra vflipItYt vtra-d3 vrun" href="#">Flip In Y</a>
    </p>
    <p class="vh-run">
    <a class="vtra vflipOtXt vtra-d3 vtra-d1- vrun" href="#">Flip Out X</a>
    </p>
    <p class="vh-run">
    <a class="vtra vflipOtYt vtra-d3 vrun" href="#">Flip Out Y</a>
    </p>

  • Example 1:

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

  • Code:

    <p class="f0">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="f1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="f2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="f3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  • Example 2:

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

  • Code:

    <p class="f1-">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="f2-">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="f3-">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  • Example 3 (Responsive Font Size):

    Lorem Ipsum

    Lorem Ipsum

    Lorem Ipsum

    Lorem Ipsum

    Lorem Ipsum

    Lorem Ipsum

  • Code:

    <p class="v1">Lorem Ipsum</p>
    <p class="v2">Lorem Ipsum</p>
    <p class="v3">Lorem Ipsum</p>
    <p class="v4">Lorem Ipsum</p>
    <p class="v5">Lorem Ipsum</p>
    <p class="v6">Lorem Ipsum</p>

  • Example 1:

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum is simply dummy text of the printing and typesetting ind.

  • Code:

    <p>Lorem Ipsum is simply
    <mark>dummy text</mark> of the printing and typesetting industry.
    </p>
    <p>Lorem Ipsum is simply
    <del>dummy text</del> of the printing and typesetting industry.
    </p>
    <p>Lorem Ipsum is simply
    <u>dummy text</u> of the printing and typesetting industry.
    </p>
    <p>Lorem Ipsum is simply
    <ins>dummy text</ins> of the printing and typesetting industry.
    </p>
    <p>Lorem Ipsum is simply
    <strong>dummy text</strong> of the printing and typesetting industry.
    </p>
    <p>Lorem Ipsum is simply
    <small>dummy text</small> of the printing and typesetting industry.
    </p>
    <p>Lorem Ipsum is simply
    <em>dummy text</em> of the printing and typesetting industry.
    </p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting
    <abbr title="Industry">ind.</abbr>
    </p>
  • Example 2:

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum
  • Code:

    <blockquote>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <footer>
    <cite title="Lorem Ipsum">Lorem Ipsum</cite>
    </footer>
    </blockquote>

  • Example 1:

    • First Box

    • Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  • Code:

    <ul class="vl-flex vm-flex">
    <li class="vcol vl-7 vflex vfle-dc vjus-cc">
    <p>First Box</p>
    </li>
    <li class="vcol">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </li>
    </ul>

  • Example 1:

  • Code:

    <p>
    <a class="vani vbounce vh" href="#">Hover In</a>
    </p>
    <p>
    <a class="vani vbounce vh-" href="#">Hover Out</a>
    </p>
    <p>
    <a class="vani vbounce vani-ici vh-stop" href="#">Hover Stop</a>
    </p>
    <p class="vh-run">
    <a class="vani vbounce vrun" href="#">Hover Run</a>
    </p>
    <p class="vh-run">
    <a class="vani vbounce vani-ici vrun" href="#">Hover Infinite</a>
    </p>
  • Example 2:

  • Code:

    <div class="vh-run-li vpad-50">
    <p>
    <a class="vani vbounce vrun vani-ici" href="#">Hover Run List Infinite</a>
    </p>
    <p>
    <a class="vani vbounce vrun" href="#">Hover Run List</a>
    </p>
    </div>
  • Example 3 (Duration):

    Trigger Animation

    toggleAnimation

  • Code:

    <p id="triggerA1" class="active swatch3-bg vopa-0 vani vfadeIa vani-d2">Trigger Animation</p>
    <a class="button swatch2-dark-bg swatch5-color" href="#" data-vfn="e:click,f:toggleAnimation,a:vfadeIa,s:#triggerA1">toggleAnimation</a>
  • Example 4 (Delay):

    Trigger Animation

    toggleClass

  • Code:

    <p id="triggerB1" class="active swatch3-bg vani vbounceOaDa vani-d3-">Trigger Animation</p>
    <a class="button swatch2-dark-bg swatch5-color" href="#" data-vfn="e:click,f:toggleClass,a:vbounceOaDa,s:#triggerB1">toggleClass</a>
©
    • Los Angeles

    • CA

    • United States

  • Website

  • Facebook

  • A wordpress framework used to structure simple Javascript and CSS prototypes. Hive is lite, only includes necessities and encourages custom styling.