Responsive Design, The Easy Way.


Choose Bootstrap, Foundation, Skeleton or another grid system?

Responsive Frameworks Make Frontend Development Easier

There is some debate on why a frontend designer would use a responsive framework instead of just using custom CSS. As you may know, the term "Responsive web design", was originally defined by Ethan Marcotte on A List Apart. A responsive layout adapts and changes based on the size and capabilities of the device (desktop, tablet, smartphone, etc...) that a Website is being viewed on. Having a responsive Website is now an essential as it directly impacts search engine placement (SEO), and the majority of Websites are now being viewed on mobile devices. Having a responsive Website also makes sense because it eliminates the need for a separate mobile Website.

There are many things that need to be considered when creating a responsive Website. Responsive design is not just about page structure and fluid grids. Elements like images and text must also be made flexible to adapt as needed to "fit" the screen the site is being viewed on. Responsive frameworks such as Bootstrap, Foundation and Skeleton can be specifically used to implement responsive "mobile-first" design.

The fact is, responsive frameworks help to get client projects up and running quickly, consistently and responsively. It's fairly easy to overcome that cookie-cutter look, and often it's not the framework causing what's really causing the Website bloat.

There are many advantages to utilizing a responsive framework, and investing time in a homegrown grid solution doesn't really make sense. There is little sense in reinventing the wheel without a compelling reason to do so. Frameworks provide a repeatable base from which you can build Websites faster.

Responsive Frameworks Help...

  • Speed up the mock-up process
  • Reuse of common patterns
  • Code consistentency
  • Browser compatibility
  • Establish good practices
  • Team development environments

With the great selection of available RWD frameworks, it won't be hard to find a framework that works for you. Even if you're not a fan of the super popular Bootstrap framework, there are several other viable alternatives

Codeply makes it easy to compare, explore and prototype using any of these responsive frameworks. It's currently integrated with Bootstrap, Zurb Foundation, Yahoo's PureCSS, Skeleton, Materialize, Semantic UI and UIkit. The editor interface contains all of the framework CSS classes, and code snippets which can simply be selected and dropped in as markup. This means you'll spend less time trawling through the docs to determine the appropriate markup to use. There are also hundreds of reusable code examples that you can search and fork.

Compare Responsive Frameworks

In conclusion, Front end frameworks are created to make life easy. There's no harm in using them if you understand the core concept of a CSS / JS framework. Codeply is a tool you can use to leverage these frameworks. We're also compiling a list of responsive snippets which might be helpful for your projects.