Frameworks de CSS

Frameworks de CSS

A la hora de diseñar una página web, hay muchas cosas que acabamos repitiendo varias veces, como crear menús, botones, sliders, formularios y otros elementos. Son pequeñas cosas que ocupan un tiempo importante en cualquier proyecto, ya que aunque sean comunes y prácticamente obligadas, son cosas costosas de hacer desde cero.

Es por ello que existen los llamados frameworks de CSS. Estos frameworks están compuestos por archivos CSS (y algunos de los frameworks más completos, archivos JavaScript) y nos aportan una serie de reglas y estilos predefinidos para evitar tener que redefinir todos esos elementos comunes en la mayoría de páginas web de hoy en día.

Estos frameworks son realmente útiles a la hora de diseñar una página en la que no necesitemos un diseño específico, pero se pueden convertir en una auténtica pesadilla si lo que se busca es un diseño único. Estos frameworks, al ser simples archivos CSS y JavaScript son completamente editables y personalizables, pero hacerlo puede traer muchos problemas, y que el diseño no sea tan sólido como lo sería si lo utilizáramos sin modificar.


Es por ellos que podemos diferenciar estos frameworks en tres grandes categorías:

  1. Ligeros: suelen estar compuestos por muy pocos archivos, y muchos de ellos no incluyen JavaScript. Esto se debe a que se busca que ocupen lo menos posible, pero que aporten lo suficiente para que una página tenga un diseño decente sin tener que modificar mucho. Dentro de esta categoría podemos encontrar dos subcategorías:
    1. Reiniciadores o normalizadores: son aquellos que se utilizan para eliminar todas las reglas que los navegadores aplican por defecto o a aplicar unas reglas para que sobrescribir las que aplican, para que así se vean iguales en todos los navegadores (Normalize.css o Reset CSS).
    2. Estilizadores: aplican estilos en pequeña medida a los elementos más comunes (botones, formularios, tablas, menús…)
  2. Medianos: estos frameworks aplican una cantidad más amplia de estilos, y es más común que integren JavaScript para dar funcionalidades a cosas como los botones o menús desplegables (Bulma.io, Semantic UI)
  3. Completos: estos frameworks son conocidos por aportar una gran variedad de herramientas y funcionalidades muy comunes de forma realmente sencilla. Algunas de ellas como sliders, modales (popups), scrollspy y consejos al pasar el ratón sobre una frase, palabra o contenedor. Estos frameworks son muy grandes, y por lo tanto pesan mucho y pueden ralentizar mucho al carga de una página web. El más famoso de ellos, es Bootstrap, que recientemente ha sido actualizado a su versión 4.


Aparte de estas tres grandes categorías, podemos distinguir dos más:

  1. Iconos: aportan una gran variedad de iconos que podemos utilizar para que la página sea mucho más entendible y usable (FontAwesome).
  2. Animaciones: aportan muchas animaciones muy comunes y útiles, para hacer nuestra página más llamativa pero con animaciones que han sido creadas teniendo mucho cuidado para así ser suaves y no intrusivas.


En definitiva, los frameworks de CSS pueden llegar a ser muy útiles, pero hay que tener mucho cuidado, sobre todo con que nuestro diseño no parezca igual a muchos otros, y a que no ralentice en exceso nuestra página web.

Autor:

Accede a nuestra sección de proyectos a medida en Diseño Web

Comparte este artículo en tus redes sociales