15 Responsive and Lightweight Front-End Frameworks Worth Considering

There must be hundreds upon hundreds of responsive web frameworks available. Some, like the popular Bootstrap, Gumby and Foundation frameworks, that offer everything and more for building a front-end system of any type and size. While there are other frameworks, like Skrollr and Cool Kitten, that specialize in one particular function (in this case parallax scrolling). And on top of all that you have a multitude of pre-built UI kits like, Pure, Top Coat and Ink. How can you possibly choose the right one for your project?

Having looked back at our previous web framework posts, one thing that is noticeable in this past year is that developers have clearly switched their focus from adding more and more functionality, to attempting to make their responsive frameworks as lightweight as possible (with just the necessasy components), while at the same time ensuring that they work seemlessly and fast across all devices. No bells and whistles, just a lightweight and solid base for building your responsive site upon.

Makes a lot sense really. This is the era of speed after all.

So, with the words lightweight front-end framework in mind, we have 15 yet even more web frameworks you may consider:

Webplate

Webplate web Lightweight Front-End Framework robust responsive layout engine toolkit css html

The Webplate framework includes everything from a robust responsive layout engine, to global button elements, customizable forms and support for IcoMoon icon fonts. It also comes with jQuery, Modernizr and Typeplate by default.

Webplate →

Fluidity

Fluidity is perhaps the most lightweight fully-responsive CSS framework ever! The HTML is almost 100% responsive straight out of the box, and the 115 bytes CSS file fixes the 'almost' part. Can't get lighter than that.

/* FLUIDITY v0.1.0 @mrmrs - http://mrmrs.cc MIT
*/
/*
 Responsive Utilities

*/
img, canvas, iframe, video, svg { max-width: 100%; }

/* Wrap tables or pre elements in a div with this class */
.overflow-container { overflow-y: scroll; }

Fluidity →

Schema

Schema less responsive frontend UI framework

Built on LESS, Schema is a responsive frontend UI framework that comes with an all-inclusive collection of CSS components (buttons, drop-downs, forms…) to help get you started quickly.

Schema →

Emerald

Emerald pragmatic responsive grid system LESS

Emerald is a pragmatic responsive grid system in LESS. It is block-element based (as opposite to floats) and is written with OOCSS methodology using BEM syntax.

Emerald →

Bijou

Bijou lightweight responsive 10 column grid framework css

Bijou is a lightweight (<2 kb) responsive 10 column grid framework. It comes packaged with buttons, alerts, tables, navbar, and of course the grid.

Bijou →

Base

Base is a semantic lightweight responsive extensible framework

Base is a semantic, lightweight and extensible framework that allows you to create fluid and fixed grids with your own widths, columns, gutters, offsets and padding. It includes button, form and menu components, and also includes a collection of LESS mixins for CSS3 properties, animations, gradients and some utility mixins.

Base →

Siiiimple

Siiiimple frontend framework toolkit css html

Siiiimple is 'a super, super, super, super, simple CSS grid' (12 column) framework. Enough said really.

Siiiimple →

Spark

Spark lightweight framework mobile-first responsive web design

Spark is a lightweight framework based on the mobile-first approach to responsive design. The framework comes pre-built with several color themes that are interchangeable, in both shiny and flat styles. Currently, the base colors are silver (default), blue, green, orange, red, purple, lime and dragonfruit.

Spark →

Flexbox Grid

Flexbox Grid system flex display property

The Flexbox Grid is a system based on the flex display property.

Flexbox Grid →

Typebase

typebase minimal customizable CSS typography boilerplate

typebase.css is a minimal and customizable CSS typography boilerplate. The most important thing that typebase.css gives you is an enforced vertical rythm across most device screens, thus ensuring that the text across columns and long copy doesn't become uneven. Both Less and Sass versions are available.

Typebase →

Kickoff

Kickoff responsive frontend framework toolkit css html

Kickoff →

Hoisin

Sass Hoisin simple responsive front-end mini framework

Built with Sass, Hoisin is a simple responsive front-end mini framework that has been created as an alternative to more complex and bloated front-end frameworks. It purposely does not include any components, instead focussing on giving you an organised base from which you can create your own library.

Hoisin →

Cute Grids

Cute Grids mobile-first 12 column responsive grid system

Cute Grids is a mobile-first, 12 column responsive grid system that was born out of the frustration of today's large overbuilt frameworks that can be overkill for most projects and restrict the creativity of the designer.

Cute Grids →

IceCream

IceCream frontend framework toolkit css html

IceCream →

Ink – A Responsive Email Framework

Ink Responsive Email Framework Zurb

OK, Ink is not a front-end framework, but still worth mentioning. It is a framework from the guys at ZURB that allows you to quickly create responsive HTML emails that work on any device or client.

Ink – A Responsive Email Framework →

Author: (645 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments