Aunque la mayor parte de los sitios web corren bajo un gestor de contenidos, hay mucho que decir en favor de la creación de un portal desde cero. Y, de todas formas,también los gestores de contenidos necesitan que alguien se ocupe de su aspecto visual. En este post vamos a repasar algunas de las mejores herramientas para la creación de hojas de estilo CSS.

Comencemos por el principio. ¿Qué es CSS?

¿Cómo sería la casa de tus sueños? ¿Tendría uno o dos pisos? ¿Te gustarían las habitaciones abajo y la cocina arriba? ¿Por qué no poner la bañera en el dormitorio?.

Y una vez resuelto eso,  ¿De que color pintarías las habitaciones? ¿El frente lo harías de piedra?

Podemos hacer una analogía entre un sitio web y una casa. Por un lado tenemos la estructura del sitio y por otro el aspecto visual.  En el caso la estructura se determina con un plano y el aspecto visual viendo muestras de decoración.

CSS es la sigla en inglés de  Hojas de Estilo en Cascada. Mientras que el HTML se utiliza para estructurar un documento web (definiendo cosas como páginas, encabezados e indicando cuando incrustar imágenes, vídeo y otros medios) CSS establece el estilo de diseño de la página, los colores y la tipografía.

Con CSS se puede definir el estilo para cada elemento HTML. Los elementos son los componentes HTML individuales de una página web.

Las hojas de estilo pueden ser externas, internas o en línea. En el caso de querer utilizarlas en forma externas hay que guardarlas como archivos .css e indicarle al archivo .html donde encontrarlos.

En la modalidad interna las instrucciones se escriben en el encabezado de una página .html específica .Esto hace más lenta la carga de la página y más complicada las modificaciones.

Con la modalidad en línea, la hoja de estilo externa se aloja en un servidor diferente. Son especialmente adecuadas cuando queremos utilizarlas varias veces.

¿Qué es un framework CSS?

Los frameworks CSS son herramientas utilizadas por los desarrolladores de interfaces de usuario para hacer más rápido su trabajo. En lugar de crear soluciones desde cero cada vez que surge un nuevo proyecto, los frameworks brindan a los desarrolladores las herramientas para crear rápidamente interfaces de usuario que se pueden ajustar e iterar  a medida que se necesitan.

En pocas palabras los podemos definir a los frameworks como una colección de hojas de estilo CSS que están preparadas y listas para usar en diferentes tipos de situaciones.

El ahorro de tiempo no es el único beneficio que se obtiene al usar los frameworks CSS. Al utilizarlos se estandarizan los diseños y permiten a un desarrollador leer fácilmente el código de otro desarrollador.

Los mejores frameworks CSS de código abierto

Bootstrap

Según ellos mismos, Bootstrap es el más popular de los frameworks para HTML, CSS y JS. Es ideal para diseñar sitios adaptados para móviles (Mobile first) y responsivos.

Foundation

Parece que la gente que hace framework no tiene abuela.
Foundation se describe como “El framework adaptable más avanzado del mundo”

Es una herramienta útil para crear sitios web y aplicaciones web con énfasis en las necesidades empresariales. Facebook, eBay, Mozilla, Adobe, HP, Cisco, y Disney están entre sus usuarios.

Bulma

Bulma es un framework CSS gratuito y de código abierto basado en Flexbox y utilizado por más de 200.000 desarrolladores.

Flexbox, fue diseñado para ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Flexbox maneja el diseño en una sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del Grid Layout de CSS, el cual controla columnas y filas a la vez.

Semantic UI

Semantic UI es un framework de desarrollo que ayuda a crear diseños hermosos y receptivos usando HTML amigable para el ser humano.

Este framework promete permitirnos construir hermosos diseños con sus más de 3000 variables temáticas y más de 50 componentes de interfaz de usuario.

También se integra con muchas bibliotecas de terceros, incluyendo React, Angular, Meteor o Ember.