Structure

    • 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:

      • One
      • Two
      • Three
    • Code:

      <ul class="vcel" style="--columns:12">
      <li style="--col:2;--col-end:13">One</li>
      <li style="--col:1;--col-end:7;--row:2">Two</li>
      <li style="--col:6;--col-end:13;--row:3">Three</li>
      </ul>

    • Example:

    • Code:

      <form>
      <ul class="vrow">
      <li class="vl-12 vcol">
      <p>
      <input id="inputA" type="text" class="vbor-b vfield" placeholder="What's your input?" />
      <label for="inputA" data-vlabel="Input Label"></label>
      </p>
      </li>
      </ul>
      <ul class="vrow">
      <li class="vl-4 vcol">
      <p>
      <input id="inputB" type="text" class="vbor-b vfield vani" placeholder="What's your input?" />
      <label for="inputB" data-vlabel="Input Label"></label>
      </p>
      </li>
      <li class="vl-4 vcol">
      <p>
      <input id="inputC" type="text" class="vbor-b vfield vani" placeholder="What's your input?" />
      <label for="inputC" data-vlabel="Input Label"></label>
      </p>
      </li>
      <li class="vl-4 vcol">
      <ul class="vrow vcol-0">
      <li class="vl-9 vm-9 vs-9 vcol">
      <p>
      <input id="inputD" type="text" class="vbor-b vfield vani" placeholder="What's your input?" />
      <label for="inputD" data-vlabel="Input Label"></label>
      </p>
      </li>
      <li class="vl-3 vm-3 vs-3 vcol">
      <p>
      <label for="website" class="vsuf">.com</label>
      </p>
      </li>
      </ul>
      </li>
      </ul>
      <div class="vrow">
      <div class="vl-12 vcol">
      <p>
      <select id="selectA" class="vbor-b vfield">
      <option value=""></option>
      <option value="value1">One</option>
      <option value="value2">Two</option>
      <option value="value3">Three</option>
      <option value="value4">Four</option>
      </select>
      <label for="selectA" data-vlabel="Select"></label>
      </p>
      </div>
      </div>
      <div class="vrow">
      <div class="vl-6 vcol">
      <label>Label</label>
      <ul class="vin-blocks">
      <li>
      <input type="radio" id="inputRed" name="inputKey">
      <label for="inputRed">Red</label>
      </li>
      <li>
      <input type="radio" id="inputBlue" name="inputKey">
      <label for="inputBlue">Blue</label>
      </li>
      </ul>
      </div>
      <div class="vl-6 vcol">
      <label>Label</label>
      <ul class="vin-blocks">
      <li>
      <input id="checkbox1" type="checkbox" name="inputKey">
      <label for="checkbox1">Checkbox 1</label>
      </li>
      <li>
      <input id="checkbox2" type="checkbox" name="inputKey">
      <label for="checkbox2">Checkbox 2</label>
      </li>
      </ul>
      </div>
      </div>
      <div class="vrow">
      <div class="vl-12 vcol">
      <p>
      <textarea id="textareaA" class="vbor-b vfield" placeholder="What's your input?"></textarea>
      <label for="inputA" data-vlabel="Textarea"></label>
      </p>
      </div>
      </div>
      </form>

    • Example 1:

      Button

      Button Medium

      Button Large

      Button Border

      Button Border Medium

      Button Border Large

    • Code:

      <p>
      <a class="button" href="#">Button</a>
      </p>
      <p>
      <a class="button vm" href="#">Button Medium</a>
      </p>
      <p>
      <a class="button vl" href="#">Button Large</a>
      </p>
      <p>
      <a class="button vbor" href="#">Button Border</a>
      </p>
      <p>
      <a class="button vbor vm" href="#">Button Border Medium</a>
      </p>
      <p>
      <a class="button vbor vl" href="#">Button Border Large</a>
      </p>

    • Example 1:

      Table Header Table Header Table Header Table Header
      Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
      Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
      Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
    • Code:

      <table>
      <thead>
      <tr>
      <th>Table Header</th>
      <th>Table Header</th>
      <th>Table Header</th>
      <th>Table Header</th>
      </tr>
      </thead>
      <tbody>
      <tr>
      <td data-th="Header">Content Goes Here</td>
      <td data-th="Header">Donec id elit non mi porta gravida at eget metus.</td>
      <td data-th="Header">Content Goes Here</td>
      <td data-th="Header">Content Goes Here</td>
      </tr>
      <tr>
      <td data-th="Header">Content Goes Here</td>
      <td data-th="Header">Donec id elit non mi porta gravida at eget metus.</td>
      <td data-th="Header">Content Goes Here</td>
      <td data-th="Header">Content Goes Here</td>
      </tr>
      <tr>
      <td data-th="Header">Content Goes Here</td>
      <td data-th="Header">Donec id elit non mi porta gravida at eget metus.</td>
      <td data-th="Header">Content Goes Here</td>
      <td data-th="Header">Content Goes Here</td>
      </tr>
      </tbody>
      </table>

    Subcategories

©
    • Los Angeles

    • CA

    • United States

  • Website

  • Facebook

  • Structure | 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.