Utility JS

    • Example 1:

      Alert!

    • <a class="button swatch3-bg valert" href="#" data-vsettings="confirm:Confirm to continue function event.">Alert!</a>

    • Example 1:

      ${v.m}-${v.d}-${v.y}

    • Code:

      <p class="vtime" data-vsettings="time:12/8/2023">${v.m}-${v.d}-${v.y}</p>
    • Example 2:

      ${v.m}-${v.d}-${v.y} ${v.g}:${v.i} ${v.A}

    • Code:

      <p class="vtime" data-vsettings="time:12/8/2017">${v.m}-${v.d}-${v.y} ${v.g}:${v.i} ${v.A}</p>
    • Example 3:

      ${v.m}-${v.d}-${v.y} ${v.g}:${v.i}:${v.s} ${v.A}

    • Code:

      <p class="vtime" data-vsettings="timing:1">${v.m}-${v.d}-${v.y} ${v.g}:${v.i}:${v.s} ${v.A}</p>
    • Example 4:

      Countdown ${v.m}-${v.d}-${v.y} ${v.G}:${v.i}:${v.s}

    • Code:

      <p class="vtime" data-vsettings="time:12/31/2022 2:54 am,timing:-1">Countdown ${v.m}-${v.d}-${v.y} ${v.G}:${v.i}:${v.s}</p>
    • Example 5:

      ${v.y} Years / ${v.m} Months / ${v.d} Days / ${v.G} Hours / ${v.i} Minutes / ${v.s} Seconds To Ago

    • Code:

      <p class="vtime" data-vsettings="time:8/05/2023 7:37 am,timing:-1">${v.y} Years / ${v.m} Months / ${v.d} Days / ${v.G} Hours / ${v.i} Minutes / ${v.s} Seconds To Ago</p>
    • Example 6:

      ${v.y} Years / ${v.m} Months / ${v.d} Days / ${v.G} Hours / ${v.i} Minutes / ${v.s} Seconds Ago

    • Code:

      <p class="vtime" data-vsettings="time:8/05/2022 7:37 am,timing:1">${v.y} Years / ${v.m} Months / ${v.d} Days / ${v.G} Hours / ${v.i} Minutes / ${v.s} Seconds Ago</p>

    • Example 1:

      Fixed to parent area reaches window ceiling.
    • Code:

      <div id="affix-parent" style="height:600px;margin-bottom:300px">
      <div class="swatch3-bg vpad-10" data-vaffix="affix-parent">Fixed to parent area reaches window ceiling.</div>
      </div>
    • Example 2:

      Fixed until it reaches original position.
    • Code:

      <div id="affix-until">
      <div class="swatch3-bg vpad-10" style="bottom: 50px" data-vaffix="affix-until" data-vsettings="before:1,hide:.vhide-affix">Fixed until it reaches original position.</div>
      </div>

    • Image Example:

    • Code:

      <figure class="vtex-ac vmedia" data-vmedia="/wp-content/uploads/2017/08/gallery_04.png"></figure>
    • Video Example :

    • Code:

      <figure id="ex1" class="vin-frame vas-wid vmedia" data-vmedia="/wp-content/uploads/2017/10/static1_1.webm" data-vsettings="attr:controls=1&loop=0&preload=none&poster=/wp-content/uploads/2017/08/gallery_04.png"></figure>
    • Youtube Example:

    • Code:

      <figure id="ex2" class="vin-frame vmedia" data-vmedia="https://www.youtube.com/watch?v=f6mJ7e5YmnE" data-vsettings="attr:autoplay=0&controls=0&loop=0&color=red&rel=0&showinfo=0&start=10"></figure>
    • Vimeo Example:

    • Code:

      <figure id="ex3" class="vin-frame vas-wid vmedia" data-vmedia="https://vimeo.com/206624011" data-vsettings="attr:autoplay=0&controls=0&loop=0&color=ffce00&title=0&portrait=0&byline=0"></figure>
    • Google Maps Example:

    • Code:

      <figure id="ex3" class="vin-frame vas-wid vmedia" data-vmedia="https://www.google.com/maps/embed/v1/place?key=AIzaSyBM-6MyS_i_ZIiC5Qvuh9E-4pZIzPTFr8k&q=555+N+Street,+West+Covina,+CA+91792&zoom=14"></figure>

    • Example 1:

      address(at)email(dot)com

    • Code:

      <p>
      <a class="vsafe-email" href="mailto:address(at)email(dot)com">address(at)email(dot)com</a>
      </p>
©
    • Los Angeles

    • CA

    • United States

  • Website

  • Facebook

  • Utility JS | Frontend UI Toolkit + Wordpress Framework

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