35 Best Responsive Framework for Web Design

There are two types of frameworks front-end and backend. Frontend frameworks usually use for web design and layouts consist of a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which are using to developed front-end design.

Responsive frameworks have been around for last couple of years now and Responsive web design continues to become more widely practiced. Lots of talented designers and developers have jumped to the next generation of Responsive frameworks and boilerplates.

Today’s I selected 35 best Responsive Frameworks for web design that will help you to make responsive design simple and easier.

You may also like:

• 15 Fresh jQuery Plugins For Designers & Developers
• Free PSD Mini Icons (25 Sets)
• 50 HTML5 Web Design Examples For Inspiration
• 25 High-Quality Free Fonts

Responsive Framework For Web Design

Check out the list of 35 responsive frameworks for web design.

What is a framework?

A framework is a standardized set of concepts, practices and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature.

Useful Resources Of Responsive Web Design

• Responsive Web Design or Web App
• Responsive Web Design Solutions and Enhance Web Presence
• Responsive Web Designs are Better Than Ordinary Web Layouts

1. The 1140 CSS Grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense. Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.

Demo Download

2. Mueller Grid System

MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media–queries.

Demo Download

3. Titan (A CSS framework for responsive web designs)

A CSS framework for responsive web designs. Titan Framework comes in two versions, with 12 and 16 columns.

Demo Download

4. Less Framework 4 (CSS Grid System)

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Demo Download

5. Gridiculous

Gridiculous was created after I tried out a bunch of different responsive grids and realized that none of them offered all of the features I required.

Demo Download

6. cgSceneGraph: Powerful Animation Framework With HTML5 Canvas

The cgSceneGraph is a powerful, cross-platform and very easy-to-use animation framework written in JavaScript for the <canvas> tag in HTML5. It’s full object oriented to ease the development of your applications and games.

Demo Download

7. Groundwork: Responsive Framework For Front-End Design

Groundwork has been built from the ground up with the incredibly powerful CSS preprocessor, Sass. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Groundwork offers the most advanced responsive layout techniques in the world. Featuring an incredibly flexible, nestable, fluid grid system: the Groundwork grid system supports any columns in any fractional amount from halves to twelths.

Demo Download

8. Start Building Responsive Layouts By Responsive Boilerplate

A lightweight (2kb) micro-framework, elegant & minimalistic CSS3 grid system, made with only one container and 12 columns. It`s very easy to use and understand, pre-packed with some extra css helpers for mobile devices.

Demo Download

9. Opentip: Javascript Tooltip Framework

opentip is a javascript tooltip framework yes – it’s free, open source and comes with different styles. It creates the tooltips with HTML5 canvas so that any creative designs are possible and they are rendered almost equally in all browsers.

Demo Download

10. xyCSS: Lightwidht CSS Template For Responsive Design

xy.css is a lightweight CSS template for building responsive liquid-grid designs. xy.css neutralizes rogue browser styles and brings horizontal and vertical rhythm via synergized grid system for both typography and structure. xy.css helps you create clean, device-neutral designs without cluttering markup with non-semantic class attributes. Designed for HTML5, xy.css brings together the best CSS techniques from around the Web and integrates them into a single, powerful stylesheet template.

Demo Download

11. Workless: HTML5-CSS3 Framework

Workless started out as a mashup of all the great things I liked about Twitter Bootstrap and HTML5Boilerplate. The more I worked with with it, the more I added in order to make life easier when working on any project.

It’s now pretty much turned into a framework in it’s own right, with all the stuff you need and none of the stuff you don’t. It’s about saving time and keeping your projects DRY.

Demo Download

12. Junior: HTML5 front-End Framework

Junior is a free HTML5 front-end framework for creating mobile apps. It uses CSS3 Transitions optimized for mobile performance. Swipable carousels using flickable.js. Integration with backbone.js views and routers. And supports swipable carousels and includes various UI components (from Ratchet).

Demo Download

13. Reuze: A Tiny Front-End Framework With HTML5 Structures

Reuze is a teeny-tiny front end framework that makes generating structure for blogs and article-heavy sites a breeze. It plays nice with other frameworks such as Foundation and Bootstrap but also works equally well on it’s own.

Demo Download

14. Centurion: Responsive Web Framework For Rapid Prototyping

Built using SASS and CSS3 media queries, Centurion is a responsive web framework that scales with your device. No longer do you need to worry about the screen size of an iPhone or an Android tablet since Centurion does the work for you.

Want to test Centurion out simply fork or download the repository on Github to get started and see the power a responsive framework can have on your next web project.

Demo Download

15. Awesome Dashboard Design framework : Dashing

Dashing is a flexible framework, built with Ruby (Sinatra-based) and Coffeescript, for creating attractive dashboards. The dashboard is formed of widgets which can pull data from any source. The widgets interface is powered by Gridster and they can be re-positioned with drag and drops.

Demo Download

16. Pods: Flexible Framework for WordPress

Pods is a framework for WordPress that allows you to create, extend, manage, and deploy customized content types and fields.

Demo Download

17. Nimbus: A Framework For iOS Designers

Nimbus is a toolkit for experienced iOS software designers. It provides well-documented, modular components that solve a number of common iOS software requirements. This includes: a rich text label with hyperlinks; a web view controller; a simple approach to table models, radio groups, and table actions; standardized interapp communication, and powerful debugging tools, amongst many other features.

Demo Download

18. Simple Grid: CSS Grid System To Build Responsive Layouts

Simple Grid was created for developers who need a barebones grid. Simple Grid works well with 1140px layouts but easily adapts to any size of layout. With fluid columns, Simple Grid is responsive down to mobile.

Demo Download

19. CSSHorus: CSS Framework For Quickly Creating Responsive & Mobile Websites

CSSHorus is a CSS framework for easy and fast development of responsive and mobile websites. It contains 16 grid columns and basic style formats (Resets, Basics, Typography, Lists, Links, Table, Form, Button) for your web project, also with RTL and LESS CSS.

Demo Download

20. BootMetro: Simple Framework For Metro Style Websites

Simple and flexible HTML, CSS, and Javascript for web apps that wants to use the “Windows 8 App Store” style, without the need to run on Windows 8.

Demo Download

21. Kube Framework: Minimal Responsive CSS Framework

Kube Framework is a minimal responsive CSS framework for professional developers. Kube includes styles for forms, grids, buttons, tables, typography and few other stuff like links or images.

Demo Download

22. BASE: Super Simple Responsive Framework

Super Simple Responsive Framework built to work on mobile devices, tablets, netbooks and desktop computers. It comes with custom styles for headings, tables, blockquotes forms, lists and more.

Demo Download

23. Metri UI CSS: Create Windows 8 Style Interface

Metro UI CSS allows to create a Web site in the style of Windows 8 quickly and without distractions on routine tasks.

Demo Download

24. Wirefy: Responsive Wireframes

Wirefy is a style agnostic wireframe tool built on the principles of content first. It allows you to create functional responsive wireframes using standard elements. Many frameworks focus on quick layouts and base styles. This allows you to focus on the content rather than the subjective design decisions.

Demo Download

25. ENYO: Javascript Framework To Develop Desktop and Mobile Apps

Enyo, the JavaScript framework to develop apps for the web and for all major platforms, desktop and mobile.

Demo Download

26. ResponsiveAeon: Elegant CSS3 Grid System Framework

ResponsiveAeon is a HTML5-CSS3 powered framework for creating responsive layouts very quickly. Now with a responsive grid all based in percentage with mediaqueries, html5 starting point and javascript.

Demo Download

27. Sidetap: Lightweight Framework For Mobile Web Apps

Sidetap is a lightweight framework for mobile web apps. The framework actually focuses on providing a flexible side-navigation similar to the one we know from Facebook’s mobile app, and, once the navigation part is solved, it is pretty easy to build a simple mobile web app.
Lightweight Sidetap only weighs 2k when minifyied and gzipped!

Demo Download

28. jqmPhp: HTML Generator for jQuery Mobile Framework

jqmPhp is an open source HTML code generator for jQuery mobile framework, the project that aims to simplify using jQuery Mobile with PHP.

jqmPhp is a package of PHP classes that facilitates the creation HTML files for use with jQuery Mobile Framework. All classes in the jqmPhp package can be converted to string and printed with an echo function.

Demo Download

29. Responsive Grid System: For Easy Responsive Design

Responsive Grid System, Spectacularly Easy Responsive Design, The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.

Demo Download

30. Gumby: Responsive 960px-Grid CSS Framework

Gumby is a responsive and 960px-grid CSS grid framework that can be customized to work in every resolution with almost no effort.

Demo Download

31. 960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Demo Download

32. Susy (Responsive Grid)

The web is a responsive place, from your lithe & lively development process to your end-user’s super-tablet-multi-magic-lap-phone. You need grids that are powerful yet custom, reliable yet responsive.

Demo Download

33. Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development. Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.

Demo Download

34. Foundation (Advanced responsive front-end framework)

An advanced responsive front-end framework. Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself — and gives you new tools to quickly customize and build on top of Foundation.

Demo Download

35. YAML – CSS Framework

A modular CSS framework for truly flexible, accessible and responsive websites. YAML is tested and supported in major modern browsers like Chrome, Firefox, Opera, Safari and Internet Explorer.

Demo Download