Filament Group’s Open Source Code Repositories
Posted by Maggie on 01/18/2012
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
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. Read more...
Collapsible content widget
Custom input (checkbox, radiobutton)
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
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
The jQuery UI date range picker modified to use the jQuery UI CSS framework so that it's ThemeRoller ready. Read more...
A plugin and .htaccess file that you can drop onto your web server to sync multiple devices and simplify the QA/testing process.
A jQuery plugin to "equalize" the heights of boxes within the same container and create a tidy grid. Read more...
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
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
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. Read more...
Experimental responsive web app layout using jQuery Mobile controls
jQuery Mobile Pagination
A jQuery Mobile plugin for sequential pagination between pages with support for touch, mouse, and keyboard. Read more...
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. Read more...
A jQuery plugin to quickly convert pixel values to ems (and vice versa) to support page scalability throughout a web site or application. Read more...
Preload images from CSS
A jQuery plugin that automatically preloads all images referenced in CSS files. Read more...
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
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. Read more...
Responsive navigation patterns
Experimental navigation structure and behavior patterns based on progressive enhancement and responsive web design.
Responsive table patterns
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. Read more...
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).
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). Read more...