enquire.js is a lightweight, pure javascript library for programmatically responding to media queries.
pushme.js is small but useful jQuery Plugin makes possible to push elements into specific containers depended on certain media queries.
A full width tab component with some example media queries for adjusting the icons of the tabs and the content layout.
The main idea is to show only icons for the mobile view and allow the text to appear when there’s enough space. The content columns and the containing media boxes have three different layouts.
Respify is a simple responsive images library, which parses a image from a set of child span nodes with data-media and data-src attributes. It uses media queries to select images.
Responsive lazy loader allows you lo load the most appropriate image renditions according to the current breakpoint and to the current display into the CSS grid-system.
picturefill is a responsive images approach that you can use today that mimics the proposed picture element using spans, for safety sake. Picturefill works best in browsers that support CSS3 media queries
RIMG is a responsive image solution for browsers that support mediaqueries. It supports responsive websites to provide a way to optimize images in a simple and performant way. Pure javascript and no server-side code.
An on scroll effect template that animates the sides of sections once they are in the viewport. It works with adding a class for animating the two sides of a section.
There is an example effect defined and also some media queries for dealing with smaller screens.
A simple view mode switch that has two example layouts, a grid and a list. The layout is defined by a view class that gets applied to the main wrapper. Some example media queries show how to make things responsive.
A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.
An animated header that will change its size on scroll. Once a certain amount of the page gets scrolled, the header will decrease its size and the inner elements will adjust their font-size/line height. There are example media queries for dealing with different screen sizes.
This is a simple tooltip menu that will show a tooltip submenu when hovering over an item. The submenu will either appear above or below the main menu, depending on where more space is available.
Using Modernizr’s touch detection, the menu will either react on hover or on click. Example media queries show how to adjust the style for smaller screens.
Responsive product grid layout that comes with some UI details for inspiration. The product will rotate showing the backside of the item when the rotate button is clicked. Some examples of how tooltips can appear on hover or click are also included.
Media queries can be used to resize the items in the grid or change the number of items in a row. Flexbox is used when supported.
A simple, horizontal slide out menu with a grid-like thumbnail layout for the submenu. The menu slides out from the top when a main menu item is clicked and the sub-items fade in. When clicking on another item, the height of the submenu will adjust and the content will fade in and out while switching.
Some media query examples show how to make the menu responsive and change the view to a touch-friendly vertically stacked navigation.
