Introducing Ply: An HTML5, CSS3, Responsive Framework

a laptop, tablet and smartphone displaying the various modes of Ply

Ply is a bare bones responsive framework for building the most common types of websites.

Download Ply v. 1.1 (ZIP, 28kb)

I developed ply for my own needs, namely to have a basis to work from when creating new client sites since I committed to making all new client sites responsive. It is a simple framework for creating sites that use the header / content with sidebar / footer layout which is just about every webpage in existence these days.

Ply Features

  1. Basic HTML5 Markup via the index.php, including all of the most common elements I run across in my projects, and all of the basic elements and classes used by the default buttons in the WordPress editor.
  2. Simpler CSS3 by including the Prefix Free javascript, using CSS3 is greatly simplified (ie, no need to use -webkit-vendor -moz-extensions. There’s also a fabulously simple reset so you can start your work fresh.
  3. PHP & Javascript used sparingly. There are two included Javascript files, As mentioned above, there is one Javascript file which greatly simplifies writing CSS3. You can easily remove it and implement vendor prefixes if you’d like. There’s also a call to the HTML5 Shiv Javascript which tunes up Internet Explorer 8 and below to work with new HTML5 elements. Finally, I use a small piece of PHP to determine whether a device is an iPhone or not, and apply a viewport meta tag if it is.
  4. Responsive Breakpoints Unlike many responsive design techniques, we’re not looking to accommodate every single resolution type. For most clients, or really anyone using WordPress to blog and do things rapidly without worrying about layout across a million resolutions, it makes more sense to only have a few breakpoints. To that affect, I’ve got four primary targets for resolution changes: Large (1200px+), Average (800px – 1199px), Mobile Landscape (401px – 800px), and Mobile Portrait (400px or less). For both Mobile varieties the screen will expand and adjust to suit the size of the device. For the other two sizes the site is setup to display at optimal sizes, which are easily changed in the CSS.
  5. Lightweight. There are a ton of responsive design frameworks out there. I dislike all of those which I’ve run across because they’re pretty much all bloated. Support for things like <h6>Nested <small> tags inside of Heading 6s?</h6> Really? With Ply you get just the basics.

Download Ply (ZIP, 29kb)

Up Next: There is No Fold (and other reasons you are wrong about everything)