Our (archived) open-source code

Responsive images & media

• Grunticon

  A grunt-based tool to make it easy to use SVG graphics with fallbacks for older browsers.

  • Demo
  • Code
  • Article
  • Issues

• Grumpicon

  Grunticon in the browser, for those not comfortable with command line.

  • Project site
  • Code
  • Article
  • Issues

• Picturefill

  A responsive image polyfill for picture, srcset, sizes, and more

  • Project site
  • Code
  • Article
  • Issues

Mobile-first responsive techniques

• Ajax-Include

  Lazy-load portions of HTML to improve perceived performance (works with media queries too).

  • Demo
  • Code
  • Article
  • Issues

• Append-Around

  Responsively move markup in the DOM based on media queries.

  • Demo
  • Code
  • Issues

• loadCSS

  A function for loading CSS asynchronously.

  • Code
  • Issues

• loadJS

  A function for loading JS asynchronously.

  • Code
  • Issues

• Scoped Media Query

  An element query workaround. A Sass mixin for scoping CSS styles to apply only within given selector/media query pairs.

  • Code
  • Article
  • Issues

• Shoestring

  A lightweight, simple DOM utility made to run on a tight budget.

  • Code
  • Issues

Feature tests & polyfills

• A Font Garde

  A variety of test cases and tools for safe font-icon usage.

  • Demo
  • Code
  • Article
  • Issues

• Fixed-fixed

  CSS position:fixed qualifier.

  • Demo
  • Code
  • Article
  • Issues

• Fixed-sticky

  A position:sticky polyfill that works with Fixed-Fixed.

  • Demo
  • Code
  • Issues

• Overthrow

  A tiny, no-frills, framework-independent, targeted overflow: auto polyfill for use in responsive design.

  • Demo
  • Code
  • Issues

• Script Media Query

  An @media (script) polyfill experiment

  • Code
  • Article
  • Issues

• WOFF2 Feature Test

  A simple feature test for the WOFF2 font format.

  • Code
  • Article
  • Issues

Tools & Grunt tasks

• Component

  Just our typical auto-enhance-able UI component skeleton.

  • Code
  • Issues

• Cookie

  Get, set, or forget cookies!

  • Code
  • Issues

• Critical CSS

  A Node/PhantomJS utility for extracting critical CSS from your templates, for optimizing page performance.

  • Code
  • Issues

• Directory-Colorfy

  A Grunticon dependency. Turn a folder of SVGs into a different color, quickly!

  • Code
  • Issues

• Directory Encoder

  A Grunticon dependency. Takes a directory of images, turns it into some CSS.

  • Code
  • Issues

• Grunt Critical CSS

  A grunt task for extracting critical CSS from your templates, for optimizing page performance.

  • Code
  • Issues

• SVG-to-PNG

  A Grunticon dependency. Turn a folder of SVGs into PNGs.

  • Code
  • Issues

• X-ray HTML

  Generate HTML snippets from live code for documentation

  • Demo
  • Code
  • Issues

Lightweight UI widgets

• Auto-Complete

  An auto-complete menu component for form inputs.

  • Demo
  • Code
  • Issues

• Collapsible

  Accessible collapsible content.

  • Demo
  • Code
  • Issues

• Dialog

  A minimal, accessible jQuery dialog that works with Ajax content and has Back button and keyboard support

  • Demo
  • Code
  • Issues

• Heart

  A lightweight “ticker” plugin. Also see Marquee for an absolute fallback approach.

  • Demo
  • Code
  • Issues

• jQuery Mobile Pagination

  jQuery Mobile Pagination for touch, mouse, and keyboard

  • Demo
  • Code
  • Article
  • Issues

• LayerSnap

  Build SVG Animations Declaratively

  • Demo
  • Code
  • Issues

• Menu

  A very small auto-complete component.

  • Demo
  • Code
  • Issues

• Porthole

  Cue up actions when elements are in the viewport

  • Demo
  • Code
  • Issues

• Pym

  A lightweight zoom library

  • Demo
  • Code
  • Issues

• Responsive Carousel

  A jQuery-based script for responsive carousels that work with mouse, touch, and keyboard.

  • Demo
  • Code
  • Issues

• Revolver

  A 360° panoramic photo viewer

  • Demo
  • Code
  • Article
  • Issues

• Slider control

  A pattern to generate an accessible slider control from an input or select element. From our book, DWPE.

  • Demo
  • Code
  • Issues

• Snapper

  A CSS Snap Points Carousel

  • Demo
  • Code
  • Issues

• SocialCount

  Simple barebones project to show share counts from various social networks.

  • Demo
  • Code
  • Article
  • Issues

• Tablesaw

  Tablesaw: group of plugins for responsive tables.

  • Demo
  • Code
  • Issues

• Tau

  Tau is a small and simple 360 gallery library.

  • Demo
  • Code
  • Issues

• Tree control

  An ARIA-accessible tree control. From our book, DWPE.

  • Demo
  • Code
  • Issues

• Visualize

  HTML5 canvas charts driven by HTML table elements

  • Demo
  • Code
  • Article
  • Issues

Accessible form elements

• CheckboxRadio

  A custom and accessible checkbox and radio form control

  • Demo
  • Code
  • Issues

• Custom File Input

  A CSS-friendly File Input

  • Demo
  • Code
  • Issues

• PoliteSpace (input mask)

  Politely add spaces to numeric form values to increase readability (credit card numbers, phone numbers, etc)

  • Demo
  • Code
  • Article
  • Issues

• Select

  Minimally custom-styled select element.

  • Demo
  • Code
  • Issues

Experiments & research

• Device Bugs

  Just a collection of quirks and issues that occur on browser platforms (particularly those unlikely to update)

  • Code
  • Issues

• iFrame Caching

  Some testing around browser caching of iframes.

  • Code
  • Issues

• SouthStreet

  Tools & workflow for delivering rich cross-device web applications

  • Code