Gridtab is a lightweight jquery plugin to create grid based responsive tabs, with separate settings for any responsive breakpoint. It’s always a hard task finding the right plugin to solve a common UI design pattern – Grid based responsive tabs. There are only a very few plugins out there, that are either buggy, rely heavily on DOM manipulation or hardly customisable. GridTab works on CSS flexbox layout and hence it’s lightweight.

Muuri creates responsive, sortable, filterable and draggable grid layouts. They manage to pack a lot of features into a small package. Muuri is basically Packery + Masonry + Isotope and jQuery UI sortable.

Muuri’s layout system allows positioning the grid items within the container in pretty much any way imaginable. The default “First Fit” bin packing layout algorithm generates similar layouts as Packery and Masonry. The implementation is heavily based on the “maxrects” approach as described by Jukka Jylänki in his research A Thousand Ways to Pack the Bin. However, you can also provide your own layout algorithm to position the items in any way you want.

Muuri uses Velocity for animating the grid items (positioining/showing/hiding) and Hammer.js for handling the dragging. Hammer.js is an optional dependency that is only required if dragging is enabled, but Velocity is a hard dependency.

And if you’re wondering about the name of the library “muuri” is Finnish meaning a wall.

A word of warning. Muuri is currently under active development and might be still a bit rough on the edges so production use is not recommended just yet. But when did that ever stop you ;)

Looking for a quick way to make that Youtube video responsive? Reframe.js is your answer.

Brought to you by the engineering team at Dollar Shave Club, Reframe.js removes a specified element’s height & width attributes & then wraps that element in responsive div that is an intrinsic ratio of the original element. This plugin is meant for embedded content like iframes or videos.

Reframe.js is inspired by FitVids & does what FitVids does but without the need for jQuery. This makes the plugin highly valuable when including it in a module that has to be very small & with minimal dependencies.

This plugin is small – ~1.3kb unminified & is meant to do 1 thing – wrap elements that aren’t responsive & make them responsive. ?

Minigrid is a minimal (2kb), zero dependency cascading grid layout plugin. Its responsive and even has the ability to add animations. It’s a great option if your cards are all going to be the same width. If your cards have different width sizes or you need more control I’d recommend Isotope

iframe videos can be a pain for responsive pages. MediaWrapper is a plugin for wrapping iframes and embedded videos to behave more like images.

Illustration by akselkreis

Ever worry that your text is not optimized for readability? Then Readable is the plugin for you. It conveniently marks the 45th and 75th characters of every paragraph tag when turned on so your line breaks fall somewhere in between those two numbers, the standard for optimum readability.

The magic character count range of 45 to 75 refers to the number of characters occupying one line of text within a paragraph, before a line break and text wrap. If that number is too low or too high, the paragraph becomes much less readable.

Here’s how it works:

The content of each paragraph tag is converted into a text string right after we duplicate it as a data attribute. The text string is then counted using the .substring() function to find the 45 to 75 characters. We then pop in a span tag with a “readable” class, which is what we need to create the styles. Once the toggle is switched off, we reinsert the original HTML content back into the paragraph using the preserved HTML from the data attribute.

Sound complicated? It’s actually very simple. Just download the three files, add them to the proper location in your code and you are ready to go! (The documentation explains it all quite easily.)

Block Scroll is a jQuery plugin that breaks pages into chunks for better presentation. The plugin turns a set of elements into a blocks and displays them one screen at a time to improve user-flow and make your page work in a responsive way.

The plugin comes with a robust set of features including up and down movements using the keyboard, scroll, buttons or mouse wheel; responsive design that automatically adjusts to any reasonable resolution; sticky pages that adjust to the screen; customizable look and feel using CSS; up and down buttons that are automatically wired; and ability to change the location of the active block using Javascript after it’s initialized.

In a nutshell, Block Scroll can be used to create a trendy-style single-page website with that multiple-page look. Create each block in a different color or with changing backgrounds for the most impact.

Block Scroll allows you to customize almost very aspect of the plugin, including block design, scroll duration and animation or fading between blocks.

Download and install using the js file, set your customization preferences and you are ready to go with the Block Scroll plugin.

Paper Collapse is a simple CSS3 paper cards accordion, inspired by Google Material Design.

The simple animation features a trendy design that is fashionable in itself for combining a in-the-moment aesthetic or material design and a card-style interface with animation.

The plugin is pretty simple to use. Just include the CSS in your header tag and then a little more code wherever you want Paper Collapse to appear. (It is important to note that this plugin is opt-in, so you have to initialize it yourself before it is live on your website.)

Paper Collapse comes with multiple options such as animation duration, speed of the animation in the progression and a variety of specific function triggers.

The plugin comes with Font Awesome icons for the card design, but you can modify the elements with your own icons for an even more custom look and feel.

Use Paper Collapse with an Android style interface or anywhere you want to experiment with material design concepts.

Brick Work is a responsive jQuery plugin that can be used to create dynamic layouts. The goal of the tool is to create the best and most customizable layout options available and is designed to be easy for developers to use.

The plugin works with most all modern browsers including Chrome, Opera, Safari, IE 8+ and Firefox. The code is fairly lightweight at only 15kb.

The flexible grid options are robust and provide plenty of tools for creating a variety of layout styles. The plugin includes the following options and more:

• Animation
• Append
• Centering
• Direction
• Draggable
• Filter
• Fit Height
• Fit Zone
• Fit Position
• Fix Size
• Flex Grid
• Grid Layout
• Gutter Auto
• Hide Block
• Image Layout
• Multiple Instances
• Nested Grid
• Pinterest
• Prepand
• Render

Mix and match the tools to create a site that is truly yours and can be customized in more ways that you can imagine with just one little tool. All you have to do to use Brick Work is download the JavaScript file, source and go.

If you need a perfectly straight row and are horrible at building tables, try rowGrid. And it’s even better than a table-style concept because pieces can sit without columns for perfectly randomized row formats. (Great if you are trying for that masonry look.)

The aesthetic of rowGrid is similar to that of a Google image search. It is fully responsive, built with infinite scroll and is supported by all major browsers, including Internet Explorer 8.

Here’s how it works: All items must have the same height but the width can be variable. RowGrid.js justifies the items in straight rows so that the width of the rows equals the width of the container/parent element. At first rowGrid.js adjusts the margin between the items. If this is not enough rowGrid.js scales down items.

When it comes to how this tool works, you have a few options. You have to set which items work with rowGrid, determine minimum and maximum margins, set resizing parameters and set classes for the first item and last row items. You also get to choose if items continue to auto-load or if there is a set number of images that will be shown in the grid.

A more robust equal heights plugin

Create a 3D tilted scroll effect

Create cards that tip on hover like Google Tips.

Converts an array of objects into a dashboard.