Responsive tables with Tablesaw

stack

Set of jQuery plugins by the clever folks of Filament Group for responsive tables. Comes with a few solutions such as stack (picture above), Toggle (where one can choose which columns to show), and Swipe (where you can scroll horizontally through the columns). Columns can also be sorted. Just set some data-* attributes on your table and it’ll all Just Work™

<table data-mode="stack">

Tablesaw →
Tablesaw Kitchen Sink Demo →

Device-Agnostic

Trent Walton on the term Device-Agnostic:

Like cars designed to perform in extreme heat or on icy roads, websites should be built to face the reality of the web’s inherent variability. In my mind this approach addresses the following from the beginning: Hostile browsers, Tiny screens, Slow connection speeds, and Touch inputs

Long story short, as heard before: we’re undoing the wrong stuff we did the past few years (fixed width designs and the like). RWD and being Device-Agnostic are just Web Design Done Right™

I use the term device-agnostic, now synonymous (to me) with good web design, to distinguish sites that embrace the inherent variability of the web—which, in itself, is nothing new.

Device-Agnostic →

Responsive Deliverables: The Style Guide

style-guide

Jeremy wrote a nice article on Pattern Sharing, sparked by the Code for America Style Guide.

A first look at the style guide might tell you it’s just a pattern primer, yet the menu reveals that the style guide also holds a few templates to use. In order to see the code used for the building blocks you can toggle a switch next to it, as seen before in A List Apart’s Pattern Library.

On a related note Mailchimp’s Pattern Library, Yelp’s Style Guide and SalesForce’s Style Guide (pictured above) are worth mentioning too. Most likely you’ve seen them before.

Code for America Style Guide →
Pattern Sharing →

Be sure to read the original Responsive Deliverables and the 24ways article from 2011 on Front-end Style Guides.

Responsive Deliverables

real_web

During the era of Print Design, companies would approach agencies for a brand identity system. The identity work started with a simple logo and color scheme and then scaled to business cards, product packaging, vehicles and more. The sum of these components made up the physical brand.

Building webpages is not so different.

Be sure to click through to some of the articles by Trent Walton. Good to read his stuff again.

Responsive Deliverables →

Be sure to check out Jeremy Keith’s Pattern Primer (demo, source) if you haven’t seen it already. A Grunt task to generate a Pattern Primer is also available.

Ink: A Responsive Email Framework

ink

Reach out your tentacles to a broad range of people who subscribe to your emails. Our CSS framework helps you craft HTML emails that can be read anywhere on any device. Gone are the days where you had to choose between Outlook and email optimized for smartphones and tablets. Ink’s responsive, 12-column grid blends flexibility and stability so your readers can view your emails perfectly from wherever they may be.

From the creators of ZURB Foundation

Ink: A Responsive Email Framework →