Filament Group's Open Source Code Repositories
April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach.
As enthusiastic supporters of standards, progressive enhancement, and responsive techniques, we frequently release open-source code. We’re thrilled that so many of you find it useful, and are willing to help us make it better — thank you!
But keeping track of bugs and suggestions on this blog is difficult to manage, and frequently leads people to outdated code or examples. So we’ve decided to move all our open source projects to Git to make sharing, bug tracking and updates easier.
This page will serve as a centralized list of all projects, which we’ll keep updated as we develop new widgets and techniques. Look below for links to downloadable code, live demos, and articles explaining our thought process:
Ajax-like file downloads | codePermalink to 'Ajax-like file downloads | code'
A jQuery plugin to facilitate requests from the front end that result in a file — such as .doc or .xls — for download. The plugin does not actually use Ajax, but its syntax follows the conventions of jQuery’s native Ajax functions, making it a natural addition to our jQuery toolset.
Collapsible content widget | codePermalink to 'Collapsible content widget | code'
An accessible collapsible content panel plugin from our book, Designing with Progressive Enhancement.
Custom input (checkbox, radiobutton) | codePermalink to 'Custom input (checkbox, radiobutton) | code'
A jQuery plugin that uses progressive enhancement to transform a standard HTML checkbox or radio button into a visually customizable control, and leverages all of the accessibility features the native input provides (from our book, Designing with Progressive Enhancement).
Custom file input | codePermalink to 'Custom file input | code'
A jQuery plugin that uses progressive enhancement to transform a standard HTML file input into a visually customizable control, and leverages all of the accessibility features the native input provides (from our book, Designing with Progressive Enhancement). Read more…
Date Range Picker | codePermalink to 'Date Range Picker | code'
The jQuery UI date range picker modified to use the jQuery UI CSS framework so that it’s ThemeRoller ready.
Drive-In | codePermalink to 'Drive-In | code'
A plugin and .htaccess file that you can drop onto your web server to sync multiple devices and simplify the QA/testing process.
EnhanceJS | codePermalink to 'EnhanceJS | code'
Equalize heights | codePermalink to 'Equalize heights | code'
A jQuery plugin to “equalize” the heights of boxes within the same container and create a tidy grid.
FlipPics | codePermalink to 'FlipPics | code'
FlipPics is a demo site built as an example for a jQuery Mobile workshop. It is intended for educational / discussion purposes. The 5 folders represent a stepped process of applying progressive enhancement to build the application from basic HTML pages to a richer data-driven experience.
Hide address bar | codePermalink to 'Hide address bar | code'
In many devices, the address bar at the top can be manually hidden, and its absence frees up enough pixel room for a large, impactful heading, a critical piece of navigation, or even just a little more white space to air things out. This approach hides the address bar in a browser-agnostic way, and was used for sites like BostonGlobe.com, and the jQuery Mobile framework. Read the article at 24ways.org
iOS orientation fix | codePermalink to 'iOS orientation fix | code'
A fix for the iOS bug that causes a user-zoomable page to scale beyond the width of the viewport when the device’s orientation changes from portrait to landscape.
jQM Mail | codePermalink to 'jQM Mail | code'
Experimental responsive web app layout using jQuery Mobile controls
jQuery Mobile Pagination | codePermalink to 'jQuery Mobile Pagination | code'
A jQuery Mobile plugin for sequential pagination between pages with support for touch, mouse, and keyboard.
Menu | flat menu | iPod-style | flyout | codePermalink to 'Menu | flat menu | iPod-style | flyout | code'
A jQuery plugin which can be used to enhance a standard unordered list into a simple dropdown menu for a single list of options, a flyout menu for a smaller hierarchical list of options, and two variations on the iPod style, one with a back button and another with a linked breadcrumb to let users easily traverse back up the hierarchy.
Pixel-to-em conversion | codePermalink to 'Pixel-to-em conversion | code'
A jQuery plugin to quickly convert pixel values to ems (and vice versa) to support page scalability throughout a web site or application.
Preload images from CSS | codePermalink to 'Preload images from CSS | code'
A jQuery plugin that automatically preloads all images referenced in CSS files.
Respond | codePermalink to 'Respond | code'
A fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries — in particular, Internet Explorer 8 and under, though it will probably patch support for other non-supporting browsers as well. Read the project documentation on github
Responsive images | codePermalink to 'Responsive images | code'
This approach allows developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions — without requesting both image sizes, and without UA sniffing.
Responsive navigation patterns | codePermalink to 'Responsive navigation patterns | code'
Experimental navigation structure and behavior patterns based on progressive enhancement and responsive web design.
Responsive table patterns | codePermalink to 'Responsive table patterns | code'
An experimental approach to rendering a complex table, using progressive enhancement and responsive design methods, that displays comfortably at a wide range of screen sizes, provides quick access to the data, and preserves the table structure so that data can still be compared across columns.
Slider | codePermalink to 'Slider | code'
A jQuery plugin that uses progressive enhancement to transform a standard HTML input or select element into a slider, and leverages all of the accessibility features the native element provides (from our book, Designing with Progressive Enhancement).
Tabs | codePermalink to 'Tabs | code'
Tree control | codePermalink to 'Tree control | code'
A jQuery tree control plugin that uses progressive enhancement to transform an unordered list (UL) into a dynamic tree control, complete with accessibility features like ARIA attributes, keyboard and mouse behavior, and focus management (from our book, Designing with Progressive Enhancement).
Visualize | codePermalink to 'Visualize | code'