gumbyframeworkgumbyframework
10

ResponsiveImages

screenshot of ResponsiveImages

A Gumby UI module helping to preload and insert images based on media queries and/or feature detection

Github

Overview

Gumby Responsive Images is an innovative module designed to enhance your web projects by preloading and inserting images based on media queries and feature detection. This powerful tool allows developers to optimize image delivery, ensuring that the right images are served to users based on their device capabilities. By integrating this module into your project, you can improve loading times and potentially enhance user experience with visually appealing content.

The setup process is straightforward, allowing you to implement this module either by using a bower package or by manually including files within your project. With a combination of ease of use and efficient feature handling, Gumby Responsive Images is a smart choice for any developer looking to create responsive and visually dynamic websites.

Features

  • Simple Usage: Add gumby-media attributes to elements for easy media query/image path pairing, streamlining the process of managing responsive images.

  • Fallback Support: In case of unsupported features or media queries, it automatically falls back to a default image supplied with the gumby-default attribute.

  • Customizable Media Queries: Utilize the shorthand characters < and > to easily define max-width and min-width parameters, making your code less verbose and more readable.

  • Modernizr Compatibility: Integrates with Modernizr for feature detection, enabling the use of various features while ensuring adequate fallback mechanisms in certain browsers.

  • Flexible Installation: Available as a bower package which allows for convenient integration with existing projects, or you can manually include individual files for custom setups.

  • Optimized Production: Encourages minifying JavaScript files for production, consolidating scripts into a single optimized file while maintaining the order for effective execution.

  • Open Source License: Distributed under the MIT Open Source License, allowing you to use, modify, and distribute the software freely while ensuring acknowledgment of the original authors.