Peter Anglea

Menu

Zero to Mobile in Three Weeks Flat

The following is a smattering of resources to accompany my presentation “Zero to Mobile in Three Weeks Flat” from HighEdWeb 2012 in Milwaukee, WI.

Download slides: Zero to Mobile [PDF]

10 Really Outstanding and Useful CSS Grid Systems” – This article has a great, concise definition of what a CSS grid is and what its most compelling features are. Caution: most of the grids mentioned here aren’t responsive.

Basic responsive CSS grids

  • Less Framework – A very basic, no-thrills-no-spills CSS grid. The sites gives very helpful illustrations showing you exactly how the content adapts to different device widths. Includes options for desktop, tablet, wide mobile, and mobile.
  • Columnal – This grid starts at 1140px wide instead of the traditional 960-ish. Supports nested columns (not unique to this grid even though it says it is). Visit the demo page for an extensive demonstration of the column options at work.
  • 320 and Up – A departure from the normal CSS grid development approach as this one is built from mobile up, not desktop down. A well-intentioned “mobile first” approach, yet impractical for older browsers (IE8 and below); since they don’t support media queries, they always get a stripped-down mobile layout even at desktop widths.

Responsive CSS Frameworks

  • Twitter Bootstrap – Lots of UI components, navigational helps, and form elements come bundled with this framework. Allows for either fixed or responsive grids/layouts. Has a handy Javascript API if you’re a nuts-and-bolts programmer.
  • Foundation by ZURB – My favorite responsive CSS framework out there. I used some of the concepts embodied in this framework to create my own grid. In addition to multiple UI elements and javascript helpers, it has several features which are (to my knowledge) unique to this framework: off-canvas layout templates, icon fonts, SVG social icons, responsive tables, and a responsive image slider.

Miscellaneous RWD Tools