Filament Group’s Open Source Code Repositories

Posted by Maggie on 01/18/2012

Topics:

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

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 demo | code

An accessible collapsible content panel plugin from our book, Designing with Progressive Enhancement. Read more...

Custom input (checkbox, radiobutton) demo | 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 demo | 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 demo | code

The jQuery UI date range picker modified to use the jQuery UI CSS framework so that it's ThemeRoller ready. Read more...

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

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. Read more...

Equalize heights demo | code

A jQuery plugin to "equalize" the heights of boxes within the same container and create a tidy grid. Read more...

FlipPics demo | 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 demo | 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 demo | 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. Read more...

jQM Mail demo | code

Experimental responsive web app layout using jQuery Mobile controls

jQuery Mobile Pagination demo | code

A jQuery Mobile plugin for sequential pagination between pages with support for touch, mouse, and keyboard. Read more...

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. Read more...

Pixel-to-em conversion demo | code

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 demo | code

A jQuery plugin that automatically preloads all images referenced in CSS files. Read more...

Respond demo | 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 demo | 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. Read more...

Responsive navigation patterns demo | code

Experimental navigation structure and behavior patterns based on progressive enhancement and responsive web design.

Responsive table patterns demo | 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. Read more...

Slider demo | 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 demo | code

An accessible jQuery tabs plugin from our book, Designing with Progressive Enhancement. Read the project documentation on github

Tree control demo | 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). Read more...

Visualize demo | 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). Read more...

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site

Comments

great stuff, and i am also using some of them on my client projects

Comment by Yoosuf on 01/28  at  11:54 PM

Commenting is closed for this post.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site