Copy
All things responsive, all of the time. (View in browser.)
Responding to the challenges of modern web design
Hello and welcome to this Framework centric edition of responsive design weekly.

Before we get started, this week our feature image doubles as one of my favourite events from last year — Respond. This year it's a single day one track conference looking at responding to the challenges of modern day web design.

I also wanted to say a thank you to everyone that replied, tweeted and linked back to last last weeks edition on performance. I was delighted to see that performance was something either at the forefront of your mind, or you were in the middle of making performance improvements to your responsive websites.

With performance in mind I want to make a point before we continue on with our review of responsive frameworks.  Frameworks are GREAT, but they should also be taken with grain of salt. In todays newsletter we'll take a look at a wide variety of different types of frameworks. Some of them are focussed upon delivering a full solution to all of your problems, these are frameworks like Foundation, Bootstrap or Material.  Other frameworks are there to provide a complete solution for just the grid system that you will be using, whereas other frameworks are there to provide a ruleset that you can follow to create your very own framework.... these ones try not to be prescriptive for what you must use, but instead provide you the math to develop your own.

Arguably some of these "Frameworks" could just be considered Grid Systems instead but hey — I'm curating this so I'm going to let that one slide ;)

Each type of Framework has its very own pros and cons, and every time you come to use one of them you should be asking yourself "Is this the right tool for the job, or is there something that could do this a little bit better".

Tools like Bootstrap and Foundation are powering quite a few sites these days, and some of those sites look and perform really well. In fact Foundation is the only thing that Zurb use when they build websites for their own clients (that's right, they don't just work on Foundation).  

Unfortunately the majority of the sites are including all of the frameworks features but only using a very small portion of them causing website bloat and slower load times. With this in mind remember that most of the frameworks will offer a custom download and allow you to cherry pick just the features you need to deliver your project.

It is also worth pointing out that these frameworks don't have to go through into production. I use foundation on a weekly basis to quickly mockup layout ideas so that I show co-workers, clients and even family and friends exactly what I'm thinking... and how that works (or doesn't) across multiple viewports.  Then, after everyone is on the same page and agreed, I can either continue to build upon the "in browser" wireframe/mockup or start building up a specific framework just for that site.

If you are using a framework I encourage you to dig into the CSS or SCSS and find out how it's all put together. Most of us learned our trade building websites by using ViewSource or viewing the web developer tools and yet with the arrival of Frameworks and other tools that make our lives easier we sometimes neglect to get to the bottom of why things react the way they do. This knowledge will then allow you to rely less upon someone else framework and allow you to develop one that works for you.

So then, armed with that knowledge lets take a look at a few of the available responsive frameworks.
Pinegrow RWD Editor

Build Responsive Websites Faster with Pinegrow Web Editor


Pinegrow is a desktop app for Mac, Win & Linux that lets you quickly build responsive websites using visual HTML editing, powerful CSS styling tools and smart components for Bootstrap and Foundation. Pinegrow works with regular HTML files so you can use it alongside your favourite code editor.

Special offer for RWD readers: get 20% off! 
 

Frameworks

Pattern Lab

Strictly not a framework but instead a tool that will allow you to develop your own framework built upon the atomic design approach developed by Brad Frost. Once you have finished a project with pattern lab you will have your very own site framework to continue to build new sections and features on your site. If you like the idea you should also pre-order Brad's book all about Atomic Design.
 

Zurb Foundation

My personal favourite of the full featured frameworks, Foundation is now up to version 5. It has had a few forks in the road along the way too, notably Foundation for Apps(http://foundation.zurb.com/apps/) (built entirely upon Flexbox and awesomeness) and Ink — a responsive email template(http://zurb.com/ink/) (that even works in Outlook). Foundation can be customised and works on Sass to allow you to change anything that comes out of the box.
 

Twitter Bootstrap

Bootstrap was found to be the [most popular framework on the web](http://reports.quickleft.com/css) holding almost an 80% share when it comes to detectable frameworks (check the article for clarification on the numbers). Initially developed using only less it now supports Sass as well.
 

Materialize CSS

A responsive framework based upon the newly released Google Material Design principals.
 

960.gs / Unsemantic

During a recent review 960.gs ranked as one of the more popular frameworks, however it has since been surpassed by Unsemantic which is effectively the responsive version of 960.
 

Amazium

This framework only came out of the woodwork after doing a lot of searching on the web.  It is not as popular as other frameworks like Foundation or Bootstrap, but is a neat little lightweight solution.
 

Gumby

Gumby Framework is a flexible, responsive CSS Framework, Powered by SASS. Create rapid and logical page layout and app prototypes with a flexible and responsive grid system and UI kit.
 

Inuit

Harry Roberts (CSS Wizardry) is responsible for this neat little framework. It was created to allow serious developers to use it as more of a set of guidelines that you could plug in your requirements and it would provide the results you needed to develop your design. This does not provide tables, layouts or anything for you.... that's a bootstrap kind of thing. Since I previously covered Inuit it has moved to a new home on GitHub and Harry is preparing some pretty awesome things for it.
 

Susy

Susy is built by Eric Suzanne and is one of my favourite non-framework frameworks. Essentially it's a calculator for the design that you want to build.  As it states — "Your markup, your design, your opinions | our math."
 

Suzi

It's okay, you're not seeing double.  Suzi (with a z and an i) is a mature, feature-rich, responsive Sass and Grunt UI framework built and managed by Matt Stow.
 

Golden Grid System

Developed by Joni Korpi and provides 4 keys requirements for your grid. Folding columns, elastic gutters, baseline grid and a lovely overlay to preview your grid. The owner demands that you don't take this as it is, you must pull it apart and take what you need and make them fit how you work. Spread is another tool based upon Golden Grid System that has been implemented using Compass and SASS.
 

Centurion

Centurion is a HTML5 / CSS 3 based framework for rapid prototyping. It comes out of the box, or the Git with pre-built features that help you build sites faster for Desktop and Mobile.
 

Skeleton

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles — responsive grid down to mobile, fast to start, style agnostic.


Sponsor RWD Weekly and reach more than 28,884 responsive champions


That's all for this week, but before I go I wanted to let you know that after the success of our Cotton Bureau shirt we'll be adding the collection of goodies that you can get with some snazzy notebooks that will come in packs of three. More about that next week!

Until then!

C
heers,
Justin
 
Copyright © 2015 Simple Things, All rights reserved.


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp