1. Blog
  2. Design
  3. Standards
  4. 10 Responsive Frameworks You Need
10 Responsive Frameworks You Need

10 Responsive Frameworks You Need

Bootstrap vs UIKit vs Foundation - We take a look inside all the popular frameworks on the market and find the 10 Responsive Frameworks You Need.

Responsive Frameworks are springing up everywhere lately, but crowding the market occasionally leads to confusion. Whether you call them responsive grid systems or a css responsive layouts - they are a web designer's best friend and we love them as much as anyone. The only issue we have with responsive frameworks is that there are just so many out there and when you're brain shoots to Bootstrap vs UIKit vs Foundation vs every thing else, it can be a tough decision. With that in mind, we'll try to save you some time and give you a few more tools... because these are the only css libraries you need to provide good responsive design to your clients.

What makes a responsive framework?

Frameworks are primarily time-savers and in that respect you need to walk a fine line between compiling code you always use, and also remembering that every project is unique. With that in mind, a "Responsive Framework" is generally defined as a collection of code (mostly CSS) that give's you the basics for building a website. A layout, minimal typography, frames, standard javascripts (jquery for example) are all you really need - and all a good framework is made of. In a macro view, having an assortment of quality frameworks allows a designer to do more high quality projects in a minimum amount of time. This makes having a selection of great frameworks very important (especially to freelancers). Now that we've got the formalities out of the way - lets get to the details... We'll start with our 5 must have's.

The Top Five "Must-Have" Frameworks

Twitter Bootstrap

Twitter Bootstrap
Twitter Bootstrap: http://getbootstrap.com/


Foundation: http://foundation.zurb.com/


UIKit: http://getuikit.com/

Responsive Grid System

Responsive Grid System
Responsive Grid System: http://www.responsivegridsystem.com/


Base Framework
Base: http://matthewhartman.github.io/base/

Brief Explanation

Foundation: From top to bottom, there is simply no framework better. Although this release is fairly recent, I would have said the same about the previous Foundation. The base is solid, functionality is well documented, the theme roller does it's job, email and app foundations are a pleasant surprise, the building block library helps a ton, the scripts are very well done (Orbit Slider, Icon Fonts, etc), and the code is shrinking at an impressive pace. The responsive css layout examples are very helpful too.

Twitter Bootstrap: Bootstrap has grown to become invaluable for web designers. The team has probably made the largest push for the "responsive cause". It's a 12-column responsive grid that makes a great starting point. Twitter Bootstrap should be high on the list of any responsive project and has done wonders for the use of grids in web design.

UIKit: We've got a lot of faith in the YooTheme team and if you're a tinkerer, this CSS library is right up your alley. The core works on a grid, runs w/ LESS or SASS on Gulp, features all the layout basics, and comes with a killer theme customizer for generating your themes. The real kicker with UIKit is how well the advanced javascript functions are integrated. Pick what you need, build your style, compile it from less, and you are ready to roll. On top of that - The documentation is second to none.

Responsive Grid System: If you're a minimalist, RGS uses a solid set of responsive columns and codes very cleanly. Despite the simplicity, the learning curve is actually a bit steeper then you'd guess. Flexible, but not exactly intuitive. On the plus side, the Playground is a really nice addition.

Base: The core is stable and the Gulp inclusion let's you hit the ground running. Once you get familiar the layout is practically bulletproof. The primary downside (for me) would be the documentation and the lack of fancy javascript effects.

If your realize that you're basically trading speed for "ease of use" with any Responsive Framework, the choices really become clearer. If you want to take a little additional time and build something quality, the battle would be UIKit vs Foundation. If you'd like something well documented, the match-up should be Bootstrap vs UIKit. to the If time was a large factor the choice should be Unsemantic vs Bootstrap. Ultimately if you're looking for the best website you can make, Foundation vs UIKit should really be the choice at hand.

5 Other Frameworks Worth Keeping Around

If you need a responsive web developer to assist you in this project, shoot us a message @ https://haeckdesign.com/contact or if you've got any questions, tips, or points - feel free to share.

Related Articles
  • How to use MAMP: Setting up MAMP
    Utilizing a local development environment is crucial for web developers, but it's not well documented. This guide to setting up MAMP will show you how to create your own PHP development server & how to use MAMP efficiently once you're all setup.
    How to use MAMP: Setting up MAMP
  • Optimizing Development Workflows
    Efficient workflows and workflow patterns are key to effective web development. Learn how to streamline your workflow with this web development tutorial.
    Optimizing Development Workflows
  • Social Stamps - Icon Set
    We've created a colorful set of social stamps, themed with a postal style. They're available for free download and a great way to send all your visitors in the right direction.
    Social Stamps - Icon Set
  • The Best Wireframe Tools / Wireframe Apps
    Bridging the gap between your vision and a clients idea usually takes a few tools. Use one of the best wireframe tools on the market and you'll go a long way in bridging that gap.
    The Best Wireframe Tools / Wireframe Apps
  • The Source Code Resources for Web Pros
    We've compiled the source code resources for web development's top web professionals. All house fantastic snippets of various languages that make it easy to view, sort, and download website source code.
    The Source Code Resources for Web Pros
  • What is Schema? - A Schema Microdata Tutorial
    Answering "What is Schema?" for clients can be tricky since it's hidden in code, but that doesn't make it any less important. This Schema Microdata tutorial will answer that question for you and get you started on implementing it on your own website.
    What is Schema? - A Schema Microdata Tutorial
Written By:
Matthew Haeck
Raleigh, NC

Greetings, I'm the lead designer and resident full stack web developer at Haeck Design. A majority of my time is spent creating beautiful logos, websites, print design, & staying up to date on all the tricks of the web development trade.

Haeck Design - Stamp Logo