Programming has always been a tedious task for majority of the folks. Early programming was straight from the head; no frameworks, no IDEs or sometimes no documentation or code repositories nor any online community. The programmer had to directly rely on his logical ability to write codes and test the same. This was a huge limitation to the speed and accuracy of the codes being produced; the only good side is hand-coding in the strictest sense.

Advantage Framework

In the context of web development, framework is a standardized bundle of files and folders of code that are advantageous in many ways.

  • Clean and error-free code
  • Tackles common CSS problems, thus uniformity across various projects.
  • Browser compatibility
  • Standard practices
  • Aids collaboration



HTML & CSS Frameworks worth considering

Primary objective of a good framework is to be at the wheel all the while and not reinvent it. Code reusability and control is the mantra. Frameworks have now come to be full-fledged with standalone features.

LESS Framework

LESS framework requires sound knowledge of CSS and HTML. All layouts are based on a single grid. The Golden Ratio is used to create the many type sizes. The default layout is 992 pixels which is the default setting for browsers in general otherwise they fall into the category of the latest versions.


The most talked about all-capable front-end framework that was a contribution of Twitter but now is independent with strong backing of the free community. It is THE most popular GitHub projects at the moment that utilizes the LESS framework having a 12 column responsive grid

Foundation 5

Capabilities akin to and often compared with Bootstrap, Foundation 5 is touted to be faster; credits to the new Sass processor – Libsass. The medium grid concept lets you code less but is highly responsive. The first released was in the year 2011.


CSS files bundled that enables responsiveness in all devices and screen-sizes. Skeleton is designed for quick development using CSS best practices, well-structured grid for mobile, an organized file structure and super basic UI elements like lightly styled forms, buttons, tabs and the like.


YAML 4 was first released in 2005. Its modular concept is HTML5 and CSS3 ready. YAML provides an exhaustive set of matched building blocks to create complex websites. Grids, navigation, forms, typography module and all provided add-ons work coherently side by side.


The framework consists of grids of varying sizes and is highly responsive in all browsers. For designers Gumby has templates and UI kit. Modernizr is used to appropriate load images and make it responsive at the same time. The shuffle extension is used to enhance responsiveness by shuffling elements with the DOM.


Developed by Tapquo, Tuktuk is divided horizontally into a series of 12 columns, and vertically into rows. 12 columns divide nicely into equal columns of two, three, four, or six columns. Tuktuk utilizes QuoJS, which is a object-oriented and modular JS library specially useful for rapid mobile development.


Labelled as the minimalist CSS grid, as pages can be built with no extra classes in mediaqueries. It is fast because only line of code is less and thereby the file is light, taking very less time to load. Placing the column classes between the major container make it very intuitive.


Gridiculous default is 1200px and based on responsive requirement it can go down to 320px. However you can set as to where you want to begin, it does not have to be always 1200px. You have the ability to space out columns, build nested columns all the while ensuring the images and videos remain fully responsive irrespective of the screen size.

Quantum Framework

The framework is available in 12 and 16 columns with 130+ combinations of container and gutter sizes ranging from 300px and up to 1872px for 1920px and widescreen resolutions. Compatible with the modern browsers. Quantum Framework has fixed width layouts as they allow more control over the line length, flow and placement of the elements on the web page.

Frameworks are like assistants who give your prompts and suggestions. In order to be a effective designer you must learn to do the basic by yourself. With or without frameworks, basics remain the same and needs to be learned.

Need any help in improvising your mobile website? Feel free to get in touch with our experts.

About the Author

Varun Bhagat is a technology geek and works with PixelCrayons as a Sr. Technology Consultant. Varun has written 500+ technology-related blogs and helps our clients to choose the best technology as per their needs.

Leave a Reply

Your email address will not be published. Required fields are marked *