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.
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:
- Fit Height
- Fit Zone
- Fit Position
- Fix Size
- Flex Grid
- Grid Layout
- Gutter Auto
- Hide Block
- Image Layout
- Multiple Instances
- Nested Grid
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.
Evenly distributes photos across rows or columns, making the most of the space provided.