Many lightweight front-end frameworks are available online for free!

Hundreds of open source, free front end frameworks are available for web development, but how many do you know beside the widespread Bootstrap? Here we offer a view to some lightweight frameworks you should consider!

There was a time when web design and web development meant little more than Dreamweaver and html templates to me. Struggling with divs and floats was very common, and so it was finding that after a long night of coffee and hard work the results were simply disappointing. After June 2007, when the first iPhone was released and an army of Android phones followed, things got even worse: on top of having to develop for various display sizes and browsers, now it was also necessary to take into consideration mobile visitors to your site.

That time was long before I learned about the existence of CMS softwares and front-end web development frameworks. As the web has evolved and multiplied exponentially (maybe grown up?) in the last years the use of frameworks and other productivity tools is a must for any professional of the industry.

But, what exactly a framework is?

A front-end web development framework is a pre-packaged, production ready collection of HTML- CSS-JavaScript components that can be used in your designs. There are countless frameworks out there, most of them of great quality, open source and free, but arguably two of the most complete ones, widespread and best documented are Bootstrap and Foundation. These two offer an extended list of features that include all types of UI elements, icons and JavaScript functions, but what if you are looking for something less complex? Or properly said, what if you only want a lightweight CSS framework to achieve a fluid grid layout without all the added extras?

Well, in that case there are also options for you. Several frameworks offer just CSS fluid grids, leaving all other styling considerations to the designer/developer. The advantages that these offer are that they are very light and allow a deeper customization and individualization of the website they're used in.

Here are three of my favorite ones for your consideration:


Beauty in simplicity. Toast's code is as clean as possible.

On Toast's website can be read: "The main intention of Toast is to provide a barebones framework from which to build prototype layouts for websites. For best results, take Toast and adjust it for your needs."

And indeed this featherweight (2.48KB) framework is fantastic for rapid prototyping and to be used as foundation for your custom build. Does not include any additional styling, so you can (have to!) customize UI elements to your own taste.


Fluid grid implementation using Kube.

Kube offers more than just than just grid layouts, but it can be used exclusively with that purpose by including only the 9KB .CSS file. It also offers a "Developer" version that includes LESS dynamic stylesheet language and gives more fine tuning options.

The visual appearance of this framework is professional grade and even including the JS files it remains nimble and minimalistic.


Inuit is highly customizable and yet featherweight.

Perhaps Inuit isn't very noob friendly, as a matter of fact it lists as one of its requirements/assumptions that "You are comfortable with concepts like OO, abstraction, DRYness, the single responsibility principle and other OOCSS schools of thought"

But fear not, "...other OOCSS schools of thought..." aren't as complex as they sound and if you take the time to learn or already know SASS will have in return a highly configurable and very light front-end framework.

The playground is open.

It is always good to know your options. The frameworks described above might not be your first call for your usual projects, but they might become handy for rapid prototyping or for small side projects. Take some time to experiment with them and keep in mind that sometimes it's better to create you own styling instead of overriding those created by someone else.

As said before, every day more good quality frameworks are released, so please share with us which one do you use and tell us why do you like it!


Article originally posted on September 17, 2013