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: Xavi Paredes

Accede a nuestra sección de proyectos a medidaDiseño y Desarrollo Web Único >

Comparte este artículo en tus redes sociales

Otros Artículos en Diseño y Desarrollo Web Único

WooCommerce vs PrestaShop vs Magento vs Shopify - ¿Cuál es mejor para una tienda online?

WooCommerce vs PrestaShop vs Magento vs Shopify - ¿Cuál es mejor para una tienda online?

Iniciar una tienda de comercio electrónico requiere mucho trabajo y dedicación. Elegir el nombre de una tienda y decidir qué productos vender es solo una fracción del desafío. Muchos propietarios de tiendas online se sorprenden de cuánto tiempo y esfuerzo implica el marketing. Con esto en mente, debe asegurarse de elegir la plataforma adecuada para que su tienda tenga el mejor comienzo posible. Estas son las cuatro opciones más populares.

13-03-2018

Como configurar un WordPress desde Cero

Como configurar un WordPress desde Cero

Como instalar y configurar una página web en WordPress desde cero. Requisitos previos y consejos para su correcto funcionamiento. Introducción a uno de los CMS más populares, potentes y gratuitos que podemos encontrar.

13-03-2018

Preferencias del diseño web

Preferencias del diseño web

Entrado ya en el 2018, os explicamos algunas de las tendencia que se van a llevar para este año. A veces, nos dan ideas y no sabemos que escoger entre los diseños, las imágenes y las tipografías. Os damos algunas ideas que podéis tener en cuenta.

12-03-2018

Redirecciones de .htaccess

Redirecciones de .htaccess

En ocasiones necesitamos que ciertas URLs de nuestra web o un sitio web entero sea redirigido a otro dominio. Con el .htaccess de nuestra web lo podemos hacer fácilmente.

07-03-2018

Usabilidad

Usabilidad

Seguro que alguna vez os ha pasado que entráis en un sitio web y no veis donde están los enlaces para navegar por el sitio o no entendéis como esta estructurada la web. Estos son típicos problemas que se pueden encontrar en sitios donde no se ha tenido en cuenta la usabilidad. Te explicamos porque es importante y unos consejos a tener en cuenta.

05-03-2018

¿Por qué Optimizar imágenes en una web?

¿Por qué Optimizar imágenes en una web?

Artículo dedicado a las recomendaciones que hay que seguir a la hora de subir imágenes en una web y su correcta optimización. Así como las diferentes herramientas que disponemos para realizar dicha función.

05-03-2018

Cuéntanos, ¿qué necesitas?

Nuevo mensaje