Centurion is a CSS framework, built using SASS and CSS3 media queries, for creating (mostly prototype) layouts that behave good on all devices.
It includes a 960px grid (that scales down to 320px), can handle image scaling and has a navigation with desktop and mobile versions.
There are also styles for CSS-only buttons and tables. The framework is easy to learn and customizable (thanks to SASS).
Viewport resizers are so handy when it comes to testing responsive layouts with no pain.
ish is an open source and simple app which is built with HTML-JS (although the source comes with a PHP file, check this to make it PHP-free).
It loads any given URL inside an iframe where the iframe can be resized with the help of predefined or custom widths so that it becomes possible to see how the layout reacts.
There is also a fun “Disco” mode that auto-changes the width regularly and we only need to watch to see if any issues exist with the layout.
It was always the desktop where e-mails were viewed but this has changed a lot and e-mails are now reached from multiple devices.
Just like web pages, e-mails can be responsive too, so that they will be displayed as expected on tablets and mobile devices as well.
ZURB is sharing a free set of responsive e-mail templates what can be used as a base for any newsletter.
Currently, there are 5 templates with single or 2-column layouts in different variations.
These templates have separate HTML-CSS files and they are built with “newsletter delivery services (like Campaign Monitor or Mailchimp)” in mind which will format the e-mail and auto-convert the styles to inline.
There are many ways to serve each web element in responsive layouts.
For HTML tables, FooTable (a jQuery plugin) comes with a great approach without breaking the functionality and design.
The plugin auto-hides the selected columns on each breakpoint defined and users won’t need to scroll horizontally.
What makes it better is that “the hidden columns can be viewed by simply clicking each row” so that it is still possible to navigate through the complete data.
It is applied very easily with the help of data-attributes and the plugin leaves an open gate for future enhancements as there is a plugin framework within.
We need different sizes of an image for responsive layouts so that they fit perfectly and so that visitors won’t need to download the full size when they are viewing from smaller screens.
However, it can be pretty time-consuming to create images with different sizes and “what is we need different sizes in the future”?
Responsive Img is a solution to all which combines a jQuery plugin with a PHP image pre-processor.
The plugin enables the page to change the src attributes of the images in parallel to the container width and the PHP file auto-creates the new/resized images.
Images are only created when requested for the first time and this process won’t be repeated for future requests to perform better.
It is possible to define the breakpoints and image dimensions for each breakpoint
Content sliders are one of the most used elements of today’s web design. They help us a lot when we have limited space but more things to display.
jQuery Slider Shock is a very impressive (probably the most-customizable and feature-rich) jQuery slider plugin (with WordPress support) that comes with both free and paid versions.
The plugin is capable of presenting both images and videos that are hosted locally or from external sources like RSS, YouTube, Hulu, Vimeo, Flickr, Twitter and Instagram.
It has 30+ transition effects which include very original, creative ones and they can be customized as well (like the number of slices, delay or speed).
Items featured can be browsed with thumbnails that can be placed on any side of the slider, prev-next buttons (multiple designs exist) or keyboard.
Captions can be added to each slide and HTML can be used in them. Also, captions can be improved with background images as well.
Like mentioned, the plugin has WordPress support. Actually, it integrates with WordPress deeply.
It can use WordPress posts, custom post types and taxonomies as the source for the slider or captions can include author and date info.
And, there are ~40 ready-to-use skins for changing the layout instantly.
jQuery Slider Shock is very well-documented (both the jQuery and WordPress versions).
In order to get a chance to win one of the 10 Combo WP+jQuery licenses being given away, you can do one or both of the stuff mentioned below:
That’s all.
The winners will be selected randomly on 15 Nov 2012 (1 week later) randomly and good luck to all.
Here they are:
Congratulations to everyone and thanks to everyone for joining.
Newspaper-like layouts based on random-width/height grids had always existed but Pinterest definitely made them popular so much.
Grid-A-Licious is a jQuery plugin that enables us to easily create Pinterest-like floating-grid layouts.
There are other resources to create such an output but Grid-A-Licious differs itself by offering a completely responsive solution.
Regardless of the screen size or device, the grid fits perfectly as it is floating (no absolute positioning is used) and fluid.
The plugin has options to customize the width, gutter and animation (speed, duration, effect, etc.).
And, it supports appending/prepending new items to the grid which is useful for dynamic layouts.
34Grid is a grid system for responsive layouts which is based on "equally distributed columns" for each row.
There is no built-in CSS reset (so that you can use your own) and there are rules for handling images + video.
Also, there is a "how-to" in the resource's website for handling social widgets which can be very handy.
34Grid is completely customizable. We can define the number of max columns, margin between them, margin between rows and transitions between columns.
Once the custom options are selected, a unique build is created instantly and ready to use.
While working on responsive websites, we quickly want to see how the layout reacts to different screen sizes.
Viewport Resizer is a very useful bookmarklet for responsive-layout-testing with few clicks.
Once clicked, it shows a list of popular screen sizes and we can see the websites in those sizes by simply pressing them.
Its page allows us to create a customized bookmarklet that includes the sizes we want.
The orientations of various sizes are already set but there is also an option to manually change the orientation.
There is support for media queries and it is touch-friendly.
Responsivator is a free to use web app (it is also open source) for quickly viewing websites with different screen sizes.
Once a URL is entered, it is loaded inside iframes with popular screen sizes (desktop, tablet, phone) in different orientations.
It is possible to customize the screen sizes and add/remove any new ones.
Also, each website tested gets its own URL to share it with others (an option exists for hiding the header of the app while sharing).
Responsivator can easily become a part of the "testing stack" of any designer/developer working on responsive layouts.
