jsless pattern library

<div class="jsless-dropdown">
  <input role="presentation" type="checkbox" class="jsless-dropdown-trigger">
  <label class="jsless-dropdown-title">
    Basic Dropdown<span class="jsless-dropdown-icon"></span>
  </label>
  <div class="jsless-dropdown-content">
    <p>Basic lorem ipsum dolor sit amet stuff.</p>
  </div>
</div>

<div class="jsless-modal">
  <div class="jsless-modal-overlay" id="modal">
    <div class="jsless-modal-content">
      <div class="jsless-modal-header">
        <a role="button" aria-label="close" href="#" class="jsless-modal-close"></a>
      </div>
      <div class="jsless-modal-body">
        <p>This is a modal. Woo.</p>
        <a role="button" href="#" class="jsless-modal-trigger jsless-button">Close</a>
      </div>
    </div>
  </div>
</div>
<a role="dialog" aria-describedby="modal" href="#modal" class="jsless-modal-trigger jsless-button">Activate Modal</a>

Hover over the question mark <sup class="jsless-tooltip" data-text="This is the tooltip text">?</sup>

<ul class="jsless-accordion">
  <li class="jsless-accordion-item">
    <input role="presentation" type="checkbox" class="jsless-accordion-trigger">
    <label role="button" class="jsless-accordion-title">
      <span class="jsless-accordion-icon"></span>
      Accordion title
    </label>
    <div class="jsless-accordion-content">
      <p>Some lorem ipsum dolor sit amet here.</p>
    </div>
  </li>
  <li class="jsless-accordion-item">
    <input role="presentation" type="checkbox" class="jsless-accordion-trigger">
    <label role="button" class="jsless-accordion-title">
      <span class="jsless-accordion-icon"></span>
      Accordion title
    </label>
    <div class="jsless-accordion-content">
      <p>Some lorem ipsum dolor sit amet here.</p>
    </div>
  </li>
</ul>

<nav role="navigation" class="jsless-nav">
  <ul>
    <li class="active"><a href="#">Home</a></li>
    <li class="has-dropdown">
      <a href="#">
        Menu 1 <span class="jsless-dropdown-icon"></span>
      </a>
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
        <li class="has-dropdown">
          <a href="#">
            Sub Menu 4 <span class="jsless-dropdown-icon"></span>
          </a>
          <ul>
            <li class="has-dropdown">
              <a href="#">
                Deep Menu 1 <span class="jsless-dropdown-icon"></span>
              </a>
              <ul>
                <li><a href="#">Sub Deep 1</a></li>
                <li><a href="#">Sub Deep 2</a></li>
                <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
              </ul>
            </li>
            <li><a href="#">Deep Menu 2</a></li>
          </ul>
        </li>
        <li><a href="#">Sub Menu 5</a></li>
      </ul>
    </li>
    <li class="has-dropdown">
      <a href="#">
        Menu 2 <span class="jsless-dropdown-icon"></span>
      </a>
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</nav>

<table class="jsless-table jsless-responsive-table">
  <thead>
    <tr>
      <th>Item 1</th>
      <th>Item 2</th>
      <th>Item 3</th>
      <th>Item 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-title="Item 1">Foo</td>
      <td data-title="Item 2">Bar</td>
      <td data-title="Item 3">Zazs</td>
      <td data-title="Item 4">Buzz</td>
    </tr>
  </tbody>
</table>

<div class="jsless-carousel">
  <label role="button" aria-label="prev" for="slide-1" class="jsless-carousel-button">
    <span class="jsless-icon-arrow-left"></span>
  </label>
  <div class="jsless-carousel-inner">
    <div class="jsless-carousel-item">
      <input role="presentation" type="radio" id="slide-1" class="jsless-carousel-trigger" name="slide" hidden checked>
      <div class="jsless-carousel-content">
        <p>Some slide 1 lorem ipsum</p>
      </div>
    </div>

    <div class="jsless-carousel-item">
      <input role="presentation" type="radio" id="slide-2" class="jsless-carousel-trigger" name="slide" hidden>
      <div class="jsless-carousel-content">
        <p>The slide 2 lorem ipsum</p>
      </div>
    </div>
  </div>
  <label role="button" aria-label="next" for="slide-2" class="jsless-carousel-button">
    <span class="jsless-icon-arrow-right"></span>
  </label>
</div>

<div role="tablist" class="jsless-tabs jsless-tabs-four">
  <div role="tab" aria-controls="tab1" class="jsless-tabs-item">
    <input role="presentation" type="radio" id="tab1" name="tab" class="jsless-tabs-trigger" checked>
    <label role="button"  for="tab1" class="jsless-tabs-label">Tab 1</label>
    <div role="tabpanel" class="jsless-tabs-content">
      Lorem ipsum dolor sit amet stuff for tab 1 goes around here.
    </div>
  </div>

  <div role="tab" aria-controls="tab2" class="jsless-tabs-item">
      <input role="presentation" type="radio" id="tab2" name="tab" class="jsless-tabs-trigger">
      <label role="button"  for="tab2" class="jsless-tabs-label">Tab 2</label>
      <div role="tabpanel" class="jsless-tabs-content">
        Another lorem ipsum dolor sit amet stuff over here for tab 2.
      </div>
  </div>

  <div role="tab" aria-controls="tab3" class="jsless-tabs-item">
      <input role="presentation" type="radio" id="tab3" name="tab" class="jsless-tabs-trigger">
      <label role="button" for="tab3" class="jsless-tabs-label">Tab 3</label>
      <div role="tabpanel" class="jsless-tabs-content">
        For the third tab, we'll do another lorem ipsum dolor sit amet.
      </div>
  </div>

  <div role="tab" aria-controls="tab4" class="jsless-tabs-item">
      <input role="presentation" type="radio" id="tab4" name="tab" class="jsless-tabs-trigger">
      <label role="button" for="tab4" class="jsless-tabs-label">Tab 4</label>
      <div role="tabpanel" class="jsless-tabs-content">
        And the last tab here will have more lorem ipsum dolor sit amet.
      </div>
  </div>
</div>