joe-watkins

<!-- standard -->
<svg class="search-icon">
   <use xlink:href="#icon-search-glass"></use>
   <image class="search-icon" src="images/svg/search-glass.png">
</svg>

<!-- Assistive Technology ingore -->
<svg class="search-icon" aria-hidden="true">
   <use xlink:href="#icon-search-glass"></use>
   <image class="search-icon" src="images/svg/search-glass.png">

joe-watkins

// Add percentage of white to a color
@function tint($color, $percent){
  @return mix(white, $color, $percent);
}

// Add percentage of black to a color
@function shade($color, $percent){
  @return mix(black, $color, $percent);
}

joe-watkins

/*!
* toggleAria.js
* Author: Joe Watkins
* usage:

  HTML
  <button aria-pressed="false">Show Content</button>

  $("button").on("click", function(){
    $(this).toggleAria({aria: "pressed"});

joe-watkins

/*!
* svgFallbacks.js
* Author: Joe Watkins - joe-watkins.io
* Requires - Modernizr for inlinesvg test
* Usage:
*   1. add a class to <img> eg.
*      <img class="svg" src="path/file.svg">
*
*   2. add png fallback for older browsers via data attribute
*      <img class="svg" src="path/image.svg" data-svg-fallback="/path/image.png" alt="cool icon">

joe-watkins

/*!
* tableToD3Chart();
* Author: Joe Watkins - [email protected]
*
* Scrape the dom for data and create C3/D3 based charts
*
* Defaults:
*   chartTitleWrapper = the element wrapping text for chart label
*   chartType = line, pie, donut, bar, spline, scatter etc. - see C3 docs
*   useDom = true/false - if you don't want to scrape dom and want to define data use false

joe-watkins

<h1>Thank you!</h1>
<p>You just did awesome! Now share it with your friends :)</p>

<div class="easy-share"
   data-title="This is the title"
   data-url="http://codepen.com"
   data-tweet="The tweet goes here"
   data-hash-tags="taghere,another,tag">
</div>

joe-watkins

<h1>jojoTabs.js<span>Easy Responsive &amp; Accessible Tabs</h1>

<ul role="tablist">
  <li id="tab_1" aria-controls="panel_1" aria-selected="true" role="tab">Tab 1</li>
  <li id="tab_2" aria-controls="panel_2" role="tab">Tab 2</li>
  <li id="tab_3" aria-controls="panel_3" role="tab">Tab 3</li>
  <li id="tab_4" aria-controls="panel_4" role="tab">Tab 4</li>
</ul>

<div id="panel_1" aria-labelledby="tab_1" aria-hidden="false" role="tabpanel">

joe-watkins

Calc() Gutter Test

Using calc() to define column widths along with a gutter which is defined by margin vs padding.

A Pen by Joe Watkins on CodePen.

License.

joe-watkins

Responsive Slider

Demo of a really slick responsive slider.

A Pen by Joe Watkins on CodePen.

License.

joe-watkins

A Pen by Joe Watkins

A Pen by Joe Watkins on CodePen.

License.