When designing a web page, there are many things that we end up repeating several times, such as creating menus, buttons, sliders , forms and other elements. They are small things that occupy an important time in any project, because although they are common and practically compulsory, they are expensive things to do from scratch.

That is why there are so-called frameworks of CSS. These frameworks are composed of CSS files (and some of the most complete frameworks , JavaScript files) and provide us with a series of predefined rules and styles to avoid having to redefine all those common elements in most web pages today.

These frameworks & nbsp; are really useful when designing a page where we do not need a specific design, but they can turn into a real nightmare if what you are looking for is a unique design. These frameworks , being simple CSS files and JavaScript are completely editable and customizable, but doing so can bring many problems, and the design is not as solid as it would be if we used it unmodified.


It is for them that we can differentiate these frameworks & nbsp; in three major categories:

  1. Lightweight: are usually composed of very few files, and many of them do not include JavaScript. This is because they are intended to occupy as little as possible, but to provide enough for a page to have a decent design without having to change much. Within this category we can find two subcategories:
    1. Restarters or normalizers: are those that are used to remove all the rules that browsers apply by default or to apply some rules so that they overwrite the that apply, so that they look the same in all browsers (Normalize.css or CSS Reset).
    2. Stylists: apply styles in small measure to the most common elements (buttons , forms, tables, menus ...)
  2. Medium: these frameworks apply a wider variety of styles, and it is more common to integrate JavaScript to give functionalities to things like buttons or drop-down menus (Bulma.io, Semantic UI)
  3. Complete: these frameworks They are known for providing a wide variety of tools and very common functionalities in a really simple way. Some of them like sliders, manners (popups), scrollspy & nbsp; and tips when you hover over a sentence, word or container. These frameworks are very large, and therefore they weigh a lot and can slow down a lot when loading a web page. The most famous of these is Bootstrap, which has recently been updated to version 4.


Apart from these three major categories, we can distinguish two more:

  1. Icons: & nbsp; provide a large variety of icons that we can use to make the page more understandable and usable (FontAwesome).
  2. Animations: provide many very common and useful animations, to make our page more striking but with animations that have been created with great care in order to be smooth and non-intrusive.


In short, the frameworks of CSS can be very useful, but you have to be very careful, especially with our design not it looks the same as many others, since it does not slow down excessively our website.