Posts Tagged ‘Responsive’

Intention.js, created by Dow Jones, is a jQuery plugin for easily developing responsive layouts.

The plugin reduces the need for CSS media queries and provides a highly-flexible solution for restructuring HTML.

It has 3 basic manipulations, attribution, class and placement, where they can all be set with HTML attributes.


There are ready-to-use settings for width thresholds, touch devices, highres displays and a fallback which can be totally customized.

Intension.js is well-documented and supported with lot of examples.

For a good looking typography, the number of characters in a line is pretty important. And, this is difficult to automate only with CSS media-queries.

FlowType.JS is a jQuery plugin which can auto-resize the font-size and line-height (according to the width of the element wrapping it) so that our content is displayed just as we prefer.


The plugin has options for setting the min/max font-sizes and min/max widths where the resizing will be triggered.

It also works fine with webfonts and a nice demo shows how it works (just resize the browser for the demo page).

  • Tags:
  • Filed under: CC License, Design, Font
  • The most popular front-end framework, Bootstrap, now has a new version with lots of exciting changes and features.

    First of all, it has a flat design (on all the elements and components) which is the trend now.

    It follows the mobile-first approach and always responsive (a how-to exists to disable the responsiveness).


    JavaScript plugins are re-written to prevent any conflicts, new components are added and some of them are removed.

    There are small changes in the naming of classes but they are easy-to-adapt.

    A new customizer exists which is capable of saving the changes to an anonymous Gist for easy reuse, sharing, and modifications.

    Also, there is no more support for IE7 and Firefox 3.6.

    Pinterest-like responsive grid layouts became one of the standard ways to present “lots of content” in an organized way.

    For anyone willing to use such layouts on any web project, Grid Layout Shock is one of the easiest yet feature-rich solutions out there. And, they are giving away 5 Developers licenses to WRD readers (details at the bottom).


    It is available in 2 versions:

    • WordPress plugin
    • jQuery plugin

    which makes the usage for almost any type of website so quick and painless.

    They are both responsive, have multiple styles and can be customized in means of look/feel.

    The WordPress plugin integrates with the site completely as it can pull the content from posts, custom post types, taxonomies, galleries and portfolios (both versions can get the data from RSS).

    GridLayoutShock Sample

    Using the shortcode generated in the plugin’s settings page, it can be added anywhere inside pages, posts and widgets. Or, the whole site can be displayed with a responsive grid template.

    Also, the number of the posts, their order or dimensions can all be set.

    Grid Layout Shock has both free (with limited features) and paid versions. Make sure you check them all.

    How to join the giveaway?

    5 Developer licenses ($99/each) are being given away. In order to join you can choose one or both of the actions to increase the chances:

    The winners will be selected randomly and announced a week later (26 August 2013).

    Good luck to all.

    The winners

    Here they are:

    • pete (comment #1271135)
    • Farhan (comment #1271164)
    • @AhmetCAKIR
    • Ashmita Dobariya (comment #1271411)
    • Paula (comment #1271493)

    Congratulations and thanks very much everyone for joining.

    If you are already using a CSS or front-end framework, creating responsive layouts shouldn’t be hard.

    However, if you are new to such layouts, Responsive Web CSS can help you get started quickly.

    It is a web-based tool that enables anyone to create a responsive layout skeleton with drag ‘n’ drops.

    Responsive Web CSS

    You can simply add any number of pages, divs and define the widths in percentages.

    There is support for nested grids and it is possible to select the targeted devices. After all, the HTML-CSS is created automatically and will be ready-for-download.