JSFiddle

  • Vertically Centered Bootstrap Grid

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="row v-centered">
    
        <div class="col-sm-4">
            <img class="img-responsive" src="http://placehold.it/400x300" alt="">
        </div>
        
        <div class="col-sm-8">
            
                <h2>
                    Centered content
                </h2>
                <p>
                    Some body copy and whatnot
                </p>
            
        </div>
    
    </div>
  • My Media Object

    No-Library (pure JS), HTML, SCSS, JavaScript

    <div class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img src="http://placehold.it/180" class="media-object" alt="Sample Image">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">.media-heading</h4>
            <p>I found that the suposedly full version of Bootstrap 3 I added to a project was missing any media ...</p></div></div>
  • Nav-select

    css-only navigation element that displays as select box for small screens and inline links for larger ones.

    <div class="nav-select">
        <svg class="icon--arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 18">
            <polygon class="shape" points="0 0 36 0 18 18 " />
        </svg>
    
        <nav>
            <a href="#opt1">Option1</a>
            <a href="#opt2">Option2</a>
            <a href="#opt3">Option3</a>
            <a href="#opt4">Option4</a>
        </nav>
    
        <select>
            <option value="opt1">Option1</option>
            <option value="opt2">Option2</option>
            <option value="opt3">Option3</option>
            <option value="opt4">Option4</option>
        </select>
    
    </div>
    
  • simple up and down svg arrows

    No-Library (pure JS), HTML, CSS, JavaScript

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 18">
      <polygon class="shape" points="36 18 0 18 18 0 " />
    </svg>
    
    <br>
    <br>
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 18">
      <polygon class="shape" points="0 0 36 0 18 18 " />
    </svg>
    
    
  • 2-colum sidebar with Bootstrap grid

    Requirements: Bootstrap 3, sidebar responsive with max-width of 320px

    <div class="container">
        <p>
        A .container div wraps everything to limit page width.
        </p>
        <div class="content">
          <h1>
          Page Content
          </h1>
          <p>
          This should take up 75% of the page to ...</p></div></div>
  • Bootstrap with Metro-style tiles

    Client needed a responsive, metro-like tile interface but with bootstrap grid. They also wanted vertical centering on some of the tiles. And support down to IE9 to boot.

    <p>A recent project requirement was to use Bootstrap 3 with some Metro UI style tiles. This is hard because it ...</p>
  • Signal rings

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="signal"><span></span></div>
  • confirmDelete.js

    No-Library (pure JS), HTML, CSS, JavaScript

    var confirmableActions = document.querySelectorAll('[data-confirm]');
    
    for (i = 0; i < confirmableActions.length; ++i) {
      confirmableActions[i].addEventListener('click', function(event) {
        event.preventDefault ...
  • Custom radio button controls

    Mootools 1.3.1 (compat), HTML, CSS, JavaScript

    <div>
       <label class="control control--radio">
           <input type="radio" name="radio" />
           <span>Radio number one</span>
        </label>
    </div>
    <div>
       <label class="control control--radio">
           <input type="radio" name="radio" checked="checked" />
           <span>Radio number two</span>
        </label>
    </div>
  • Tiny Notification module

    No-Library (pure JS), HTML, CSS, JavaScript

    
    function Notification(msg) {
    	var el = document.createElement('div');
      el.setAttribute('class', 'alert');
    
    	var closeIcon = document.createElement('div');
      closeIcon.setAttribute('class ...