JSFiddle

  • embossed lettering

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

    <h1>
    HERE
    </h1>
    
    <p>
    The font color is transparent, allowing the background color/gradient mix to show through using background-clip: text. The text-shadow ...</p>
  • Box Rows

    Using aspect ratio to create perfect squares, while also allowing height to increase when necessary. This is a test on the way to creating a more robust .tile SCSS module.

    <div class="box-row">
      <a class="box-row-item" href="#" title="">
        <div class="box-row-item-content">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" style="display: block;max-width: 100%;">
            <style type="text/css">
              .st0 {
                fill: none;
                stroke: #000000;
                stroke-width: 1.039;
                stroke-miterlimit: 10;
              }
            </style>
            <circle class="st0" cx="81.8" cy="75" r="65"></circle>
            <circle class="st0" cx="116.7" cy="75" r="65"></circle>
            <rect x="82.7" y="58.5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 82.0754 -48.1475)" class="st0" width="33" height="33"></rect>
          </svg>
    
          <h3 class="box-row-item-title">Feature 1</h3>
          <p>This feature will surprise and delight you!</p>
        </div>
      </a>
      <a class="box-row-item" href="#" title="">
        <div class="box-row-item-content">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150">
            <style type="text/css">
              .st0 ...</style></svg></div></a></div>
  • Accessible Slider Module

    Based on the W3C/WAI recommendations here: https://www.w3.org/WAI/tutorials/carousels/

      /* focusin/out event polyfill (firefox) */
    !function(){
      var w = window,
      d = w.document;
    
      if( w.onfocusin === undefined ){
        d.addEventListener('focus' ,addPolyfill ...
  • Animated Hamburger Menu

    jQuery (edge), HTML, SCSS, JavaScript

    jQuery(document).ready(function($) {
    
    	var header = $('#page-header');
      var hamburger_icon = $('#hamburger-icon');
      var main_menu = document.getElementById('main-menu');
      main_menu.style.maxHeight = (window.innerHeight ...
  • hCalendar Microformat Calendar Dates

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

    <h1>
    hCalendar Microformat Calendar Dates
    </h1>
    <p>
    Reference: <a href="http://microformats.org/wiki/html5">http://microformats.org/wiki/html5</a>
    </p>
    
    <a class="vevent vevent-card" href="#">
    	<span class="summary visuallyhidden">Splatoon Battle!</span>
    	<time class="dtstart" datetime="2018-05-01">
    		<span class="month">May</span> 
    		<span class="day">1</span>
    		<span class="year">2018</span>
    	</time>
    </a>
    
    <a class="vevent vevent-card" href="#">
    	<span class="summary visuallyhidden">Splatoon Battle!</span>
    	<time class="dtstart" datetime="2021-11-25">
    		<span class="month">November</span> 
    		<span class="day">25</span>
    		<span class="year">2021</span>
    	</time>
    </a>
    
  • Animated feedback comments

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

    var bubbles = document.querySelectorAll('.bubble');
    
    var btn = document.querySelector('button');
    var i = 0;
    
    btn.addEventListener('click', function() {
      bubbles[i].classList ...
  • Accessible Tab Widget

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

    $(function () {
    	var tabs = $("#tabs");
    
    	// For each individual tab DIV, set class and aria-hidden attribute, and hide it
    	$(tabs).find("> div ...
  • 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>