What are Frameworks?

22 Best Responsive CSS Frameworks for Web Design

This post aims to present what frameworks are and what they are used for, alongside a selection of the best that can be got for free on the internet. In this way, we want to help web designers and developers who are starting out to discover new resources and possibilities, as well as setting out concepts that can sometimes be too abstract for those who have already travelled far in the world of 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.

In the world of web design, to give a more straightforward definition, a framework is defined as a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of websites, as a basis to start building a site.

Most websites share a very similar (not to say identical) structure. The aim of frameworks is to provide a common structure so that developers don't have to redo it from scratch and can reuse the code provided. In this way, frameworks allow us to cut out much of the work and save a lot of time.

To summarize: there's no need to reinvent the wheel.

The aim of frameworks is to provide a common structure so that developers don't have to redo it from scratch and can reuse the code provided

How many types of framework are there?

There are basically 2 types to differentiate: backend and frontend (this distinction is drawn depending on whether the framework is for the presentation layer or the application/ logical layer.

It's important to understand that frameworks are a conceptual notion: a pre-prepared standard kit from which to work. The concept of a framework can be applied to different processes carried out on the web: the programmer's layer which connects the database to the site content and uses PHP language, and the designer's layer, where that content must be presented in HTML documents with defined CSS style sheets so it can ultimately be viewed in a browser.

They can be backend (a set of files with libraries to access databases, template structures, session management) or frontend. We're going to focus on frontend frameworks.

Front-end Frameworks (or CSS Frameworks)

Frontend frameworks usually consist of a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.)

The usual components are:

  • CSS source code to create a grid: this allows the developer to position the different elements that make up the site design in a simple and versatile fashion.
  • Typography style definitions for HTML elements.
  • Solutions for cases of browser incompatibility so the site displays correctly in all browsers.
  • Creation of standard CSS classes which can be used to style advanced components of the user interface.


About responsive frameworks: Currently the rise of responsive web design techniques, which facilitate the development of websites that can adapt to various resolutions for different mobile and desktop devices, is leading to the emergence of responsive frameworks. That is, they solved the common problem of making a responsive site. These frameworks...to offer a responsive solution from the point of installation.

Selection of frameworks

Within CSS frameworks, we can draw a distinction between two types of framework according to their complexity: simple frameworks and complete frameworks. This distinction is subjective, and doesn't mean one is better than the others but rather that they give different solutions depending on the level of complexity and/ or flexibility required.