The Simple Responsive Framework

Every website I build is responsive.  When a client approaches me and asks for a ‘responsive’ website what they are asking for is a website that will work for as many of their users as possible.

There are many responsive css frameworks in the market now.   Twitter’s very popular BootStrap, Bourbon Framework maintained by the lovely nerds over at ThoughtBot Inc and Zurb’s Foundation for sites are among the most popular.

My personal favorite is Foundation for Sites 6.

Zurb has a knack for making an incredibly performant and widely supported framework.  In the close to 4 years I’ve been using their design patterns to build responsive websites I have never had a compatibility problem with any of the major browsers.  The updates they release to the platform always coincide with features that will be supported by the most browsers.

The Best Parts

  • Easy to understand column and row syntax.
  • Every component is modular and highly customizable.
  • Which allows for the framework to have the smallest asset load footprint of any framework.
  • The documentation over at https://foundation.zurb.com/sites/docs/ are incredibly thorough.
  • There is an entire catalogue of growing design patterns users have added to this https://foundation.zurb.com/building-blocks/ . that newer web developers and

Parts That Need Polish

  • The CLI tool could use some built in re-routing of output.  I use gulp-rename and a custom build folder to encapsulate the foundation build tools when I’m doing theming products for platforms like WordPress or Shopify
  • Newer techniques could use more real world examples.  Their support for CSS XY Grid is fantastic however there are a lot of head scratchers when trying to use those design patterns outside the box.

 

My own portfolio was built with a stripped down and customized version of Foundation for sites.  I would love to hear your thoughts on responsive frameworks and see the problems you’ve solved using solutions like these.  hit me up on twitter or email.