20+ Most Excellent CSS Frameworks for Responsive Design
What are the 20+ Popular CSS Frameworks for 2015? The list below gives an extensive look of the greatest frameworks that are used for building responsive websites.
For most designers and developers there are two frameworks – Bootstrap and Foundation – which is not a bad thing. Actually, the frameworks might be three as Material Design is really huge right now. So if you are wondering how to start coding a responsive website, probably you will choose one from the three mentioned. This again is not a bad thing.
Most of the time I also work with Bootstrap and Foundation. But I was wondering why I am using only them. The reason is probably that I know them by heart and I am really quick. I did a little research about how many responsive frameworks are available currently and this list is really long. I can tell you that there are more than 50 RWD frameworks available.
So I have decided to compile a list of the most excellent ones that are worth trying and using as they have some additional features or add-ons making them a bit different from the others and very useful. Most of them are built on the same principles so no matter if you are a beginner or an advanced coder, you should not have any problems getting the knack of any of them.
I just suggest that designers and developers (including myself) should be open-minded; try and use new stuff that is created by fellow colleagues. Have a look at the list and you might find a real gem to start your next web project with.
Base is a simple, mobile-first responsive framework which is built for all devices; large desktops, small desktops, notebooks, tablets and mobiles. Base includes only the core essentials so not every website looks the same and designers can focus more on creating their unique theme. It works perfectly on all browsers; old or modern. The grid is built with 12 columns for all devices. The syntax is simple and flexible. There are also a handful of useful animations for fading in content.Get Base
Together with Foundation, Bootstrap is one of the most popular frameworks. Loved by millions, it is used by designers and developers for websites and mobile apps all around the world. Includes all the needed components and JS plugins so more advanced websites are possible to be build. Suitable for both beginners and advanced users, Bootstrap is a great choice for creating online presence.Get Bootstrap
Material UI is based on Google’s Material Design and provides a set of React Components. There are more than 15 components that will be extremely useful if you are building an app based on material design. The authors recommend to get started with the React Library before diving into the Material UI. The authors also explain how to install and start using it. Sample projects are included for better understanding of the framework.Get Material UI
SpaceBase is a modern SASS-based responsive framework. The creators of spaceBase believe that their framework should be used as a boilerplate layer that can be built upon and tailored to for your needs. It combines the best practices from the responsive web with the core components needed for every web project. The key features – it is fluid and mobile-first, sass-based, optimized for light speed. There are common UI components included such as buttons, lists, media objects etc.. and cross-browser form controls.Get Spacebase
HTML5 Boilerplate is by no means the most responsive front-end framework. It is a great solution if you need a framework to help you built fast, robust and adaptable apps and websites. It includes Normalize.css to help you created better websites with some base styles, helpers, media queries and print styles. The HTML template is mobile-friendly and optimized for Google Analytics snippet. It is built for excellent performance and speed.Get HTML Boilerplate
Skeleton is one of the first responsive frameworks and it is my favourite. I loved using it in the rise of the responsive design. The greatest thing about Skeleton is that it provides the core (the bones) for building a website. There are no gimmicks included which makes it a great solution for starting designers or for ones that need to create a website or app with their preferred components. Recently, Skeleton got a makeover and it was adjusted to look modern and trendy but still keeping the simplicity of a basic responsive framework.Get Skeleton
Bourbon Neat is a lightweight semantic grid framework for SASS and Bourbon. It is very simple to use and you can create online projects very quickly but is very powerful in sense of creating flexible responsive layouts. Neat is created to promote clean and semantic markup. It relies on SASS mixins and allows you to have a clean HTML structure with no extra divs and classes.Get Bourbon
Modest Grid is an easy to customize grid framework which provides designers and developers a solution for fast development of responsive websites. Modest Grid is flexible as you can set yourself the number of columns you need. The reason for that is to keep the CSS styles file down to a minimum. Setting a custom gutter width is also possible. Browser breakpoints can be also set to fit designer’s needs.Get Modest Grid
UI kit is a lightweight and module-based front-end framework that is created for developing fast, beautiful and powerful web interfaces. It consists of a comprehensive collection of HTML, CSS, and JS components that dead simple to use, customize and completely extendable. It is developed in LESS with mobile-first approach providing consistent experience for every mobile or desktop device.Get UI Kit
Outline is a simple CSS starter responsive boilerplate that can be used for any web project. It is designed to give a solid foundation for web projects allowing designers to unleash their creativity and work with a great starting point. Best practices and mobile-first approach make outline a great choice for web designers which like creating web project with simple CSS and core components.Get Outline
Wee is a blueprint for modern web project and as most frameworks it is lightweight and provides a solution for building complex responsive apps or websites. Wee is also organized in a scalable hierarchy with consistent structure for both style and scripts. Wee also handles IE8 with no issues and does not compromise modern browser features.Get Wee
Centurion framework is built with the latest CSS3 and HTML5 semantics. It is created to provide web professionals with solution for quick prototyping as it is scalable and easy syntax to get web prototypes fast. It is completely responsive and works even on IE7 with the help of some code magic. Centurion is a unique framework because it is designed to work with different Sass libraries, not only with one as most responsive frameworks.Get Centurion
Gantry is a theme framework. It gives a base for developing CMS themes quickly and efficiently with a lot of flexibility. Gantry was created by the development team behind the RocketTheme. The team wanted to create an extensive set of Joomla and WordPress template functionality into a simple and easy to use framework. Gantry also has a powerful Layout Managed so it is possible to create themes with no experience. It is versatile solution that can empower designers and developers to build great websites.Get Gantry
Responsive Grid System
Responsive Grid System is a solution; it is not a boilerplate or a framework. It is quick, easy and flexible. You can create any number of columns and it scales to any width because of the percentage based columns and gutters. The content is important in RGS as you can make the layout and grid to suit your content. There is a grid calculator to help you figure out what kind of responsive layout you would like to use. The sample layouts provided can give designers some great grid ideas.Get RGS
Helix 3 is a totally user-friendly, modern and highly customizable solution for building Joomla 3+ websites based on your creative idea. It provides a started template for developing websites. Helix has predefined features and options that can be used for faster template development. There is a Drag & Drop Layout Builder, Megamenu Builder, six built-in post formats, unlimited colours and 600+ Google fonts. Bootstrap 3 is used as a base and it is retina ready. For all of the features check out Helix 3 website.Get Helix
Foundation is as famous as Bootstrap. It is a great framework that is constantly developed and improved. Foundation is a wonderful solution for building beautiful websites that look great in all browsers and on every device. It has flexibility which makes it perfect for building apps and websites. Zurb Foundation recently developed a framework specifically for web apps which looks extremely good. The demo pages will provide you with a great start for any online project.Get Foundation
Ink is another great framework from Zurb. This time it is for building responsive HTML emails which look absolutely great on any device or client. Even Outlook (you may know how painful it can be…). Ink is responsive, 12-column grid solution that makes reading email a pleasure, not a painful experience.Get Ink
The author of Ivory describes it as simple, flexible and powerful responsive front-end framework that makes web development faster and easy. It has flexible layout which adapts to any screen size and offers 4 different width layouts; 1200px, 1140px, 1024px & 960px. Defining your own width is possible as well. Ivory has a fluid grid based on 12 columns. The grid is dividable by 2, 3, 4, 6 and 12 equal parts but it also can be divided by 5 and 8 equal parts. It works great on all latest versions of modern browsers and it’s lightweight.Get Ivory
HTML Kickstart is a lean HTML5, CSS, & JS Building blocks for great and fast website creation. It is fully responsive, designer friendly, open source and it includes 479 icons. It includes all the needed components that are required for any new website; including gallery, slideshow, tables, tabs, buttons etc..Get Kickstart
Materialize CSS is the first framework that is based on Google’s material design guidelines. Created by four bright students from Carnegie Mellon University, Materialize is now a very popular amongst designers and developers. It follows all the tiny details suggested by Google and working with it is very easy. You can read more about Materialize in an article I published earlier this year.Get Materialize
Pure is a tiny little framework which includes a set of small, responsive CSS modules that can be used in every project. There are 6 different layouts provided and they can be used as a starting point. There are also menus, tables, buttons, and forms. As most frameworks, Pure also uses Normalize.css as an alternative to CSS resets. Pure is a great framework which is based on simplicity and style.Get Pure
This framework is built specifically for developers. It is powerful, accessible and developer-friendly. Accessibility is the main concern for the creator of Responsive who wanted each and every plugin and component to be carefully crafted to be completely accessible for every reader. It is built with Sass and jQuery so it can be fully flexible and cover every need of the modern website. Responsive also can be extended, modified and adjusted to developer’s need.Get Responsive
Schema UI is yet another light and responsive framework. But as the name suggests it is a modular, front end solution that can give you a jumpstart in building complex interfaces out of the box. Schema UI is a suitable framework for both quick prototyping and production-ready application. It has the foundation and components to help designers and developers start with. Fully responsive, built with Less it gives flexibility for any web project.Get Schema UI