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 | code
Permalink 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 | code
Permalink to 'Collapsible content widget | code'An accessible collapsible content panel plugin from our book, Designing with Progressive Enhancement.
Custom input (checkbox, radiobutton) | code
Permalink 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 | code
Permalink 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 | code
Permalink 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 | code
Permalink 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 | code
Permalink to 'EnhanceJS | code'A JavaScript framework designed specifically to deliver a usable experience to the widest possible audience, by testing the browser to determine whether it is capable of correctly supporting a range of essential CSS and JavaScript properties, and delivering features only to those that pass the test.
Equalize heights | code
Permalink to 'Equalize heights | code'A jQuery plugin to “equalize” the heights of boxes within the same container and create a tidy grid.
FlipPics | code
Permalink 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 | code
Permalink 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 | code
Permalink 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 | code
Permalink to 'jQM Mail | code'Experimental responsive web app layout using jQuery Mobile controls
jQuery Mobile Pagination | code
Permalink 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 | code
Permalink 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 | code
Permalink 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 | code
Permalink to 'Preload images from CSS | code'A jQuery plugin that automatically preloads all images referenced in CSS files.
Respond | code
Permalink 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 | code
Permalink 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 | code
Permalink to 'Responsive navigation patterns | code'Experimental navigation structure and behavior patterns based on progressive enhancement and responsive web design.
Responsive table patterns | code
Permalink 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 | code
Permalink 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 | code
Permalink to 'Tabs | code'An accessible jQuery tabs plugin from our book, Designing with Progressive Enhancement. Read the project documentation on github
Tree control | code
Permalink 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 | code
Permalink to 'Visualize | code'A jQuery plugin for creating accessible charts and graphs that uses JavaScript to scrape data from an HTML table and generate bar, line, area, and pie chart visualizations using the HTML5 canvas element (from our book, Designing with Progressive Enhancement).