Capítulo II : Framework CSS
Framework CSS
2.1. Frameworks CSS
Un framework CSS es una biblioteca de estilos visuales genéricos que se
emplean uso para desarrollar una página web. Además de estos estilos visuales
los frameworks CSS suelen añadir una serie de utilidades, como componentes
para hacer cuadros de diálogo, tablas, carrusel de imágenes, etcétera.
A continuación, se menciona algunos de los frameworks CSS más usados.
Tailwind CSS
Este es un framework CSS que ofrece un enfoque diferente que otros como
Bootstrap. Tailwind CSS en realidad no tiene muchos componentes, sino clases
de utilidad que aplicar directamente sobre el CSS. Estos frameworks se llaman
también "utility first" y ofrecen estilos CSS atómicos. Aunque también permite
crear componentes, lo deja más del lado del desarrollador, que los podrá
personalizar a su gusto.
Tailwind CSS tiene la característica de se muy maleable y adaptarse muy bien a
lo que el desarrollador necesite. Con el framework puedes hacer builds de clases
CSS totalmente personalizadas, que se parezcan o no a las que se ofrecen de
manera predeterminada.
Bootstrap
Es el framework CSS más popular, en 2020, usado en infinidad de proyectos de
todo tipo. Cuando apareció creó una tendencia de frameworks basados en
componentes, capaces de implementar temas de diseño completos y complejos,
aportando mucha sencillez y agilidad al desarrollo CSS y dotando a los
pág. 29
Programación Web. Del Frontend al Backend
Capítulo II : Framework CSS
programadores de herramientas para crear diseños consistentes con poco
esfuerzo.
Durante sus años de existencia ha evolucionado mucho, incorporando
novedades del estándar de CSS con rapidez y eliminando dependencias
pesadas como jQuery que hoy en día es innecesario en la mayoría de los
proyectos.
Materialize CSS
Materialize es un framework CSS que implementa el tema de diseño "Material
Design". Ofrece componetes material listos para usar, que se pueden integrar de
una manera cómoda en los sitios web, consiguiendo un diseño guiado por las
directrices de aplicaciones y sitios de Google.
Crea diseños consistentes que son fáciles de entender y familiares para los
usuarios en general. Tiene muchos componentes que también implementan
comportamientos dinámicos con Javascript y recientemente se actualizó para
eliminar su dependencia con jQuery.
El framework es sencillo de usar, relativamente ligero, permite optimización y los
componentes están altamente personalizados en su diseño.
Foundation
Con Bootstrap y Materialize, Foundation es uno de los frameworks CSS basados
en componentes más importantes del momento. Tiene muchos seguidores y
mantiene una base de código que se actualiza con frecuencia para incorporar
las novedades de CSS.
A diferencia de otros frameworks CSS ofrece un subset de sus herramientas
orientado a la creación de emails, que tienen características de desarrollo
distintos que los sitios web. Ofrece un set de herramientas para poder optimizarlo
pág. 30
Programación Web. Del Frontend al Backend
Capítulo II : Framework CSS
correctamente y construir un build que incluya solamente los componentes que
se desean.
Bulma
Este es un framework CSS basado en componentes que usa Flexbox de manera
precisa para simplicidad del código.
Los componentes de Bulma son CSS puros, es decir, no tiene el set de
componentes que requieren Javascript para funcionar. No obstante, tiene un
montón de extensiones que sí incluyen componentes de todo tipo, dinámicos y
con Javascript, usando varios frameworks, creados por terceros. Es sencillo de
usar y de aprender y permite un desarrollo moderno.
2.2. Bootstrap
En los últimos años y con la aparición de la denominada web 2.0, Internet ha
sufrido un importante cambio para ir adaptándose a todas las necesidades de
los usuarios, y por consiguiente, los sitios web también han tenido que cambiar
mucho. Uno de los cambios más significativos, fue la llegada del concepto
responsive, es decir, diseños que se adaptan al tamaño de pantalla de cualquier
dispositivo capaz de navegar por la red.
Esto es posible gracias al uso de técnicas avanzadas de CSS, o bien, mediante
el uso de frameworks desarrollados por terceras personas o empresas. Es el
caso de Bootstrap creado por Twitter. A lo largo de este artículo vamos a hablar
sobre Bootstrap, uno de los frameworks CSS más famosos y utilizados hoy en
día por los desarrolladores de portales web.
¿Qué es Bootstrap?
El framework Bootstrap vio la luz en el año 2011. En un principio fue desarrollado
por Twitter aunque posteriormente fue liberado bajo licencia MIT. Hoy en día
pág. 31
Programación Web. Del Frontend al Backend
Capítulo II : Framework CSS
continúa su desarrollo en un repositorio de GitHub. Se trata de un framework que
ofrece la posibilidad de crear un sitio web totalmente responsive mediante el uso
de librerías CSS. En estas librerías, nos podemos encontrar un gran número
elementos ya desarrollados y listos para ser utilizados como pueden ser botones,
menús, cuadros e incluso un amplio listado de tipografías.
Desde que vio la luz, Bootstrap se ha caracterizado por tratarse de una excelente
herramienta para crear interfaces de usuarios limpias y totalmente adaptables a
cualquier tipo de dispositivo y pantalla, independientemente de su tamaño.
2.2.1. Características de Bootstrap
▪ Fácil de usar: cualquiera con conocimientos básicos de HTML y CSS
puede comenzar a usar Bootstrap
▪ Funciones de respuesta: el CSS responsivo de Bootstrap se ajusta a
teléfonos, tabletas y computadoras de escritorio
▪ Enfoque móvil primero: en Bootstrap, los estilos primero para
dispositivos móviles son parte del marco central
▪ Compatibilidad con el navegador: Bootstrap es compatible con todos
los navegadores modernos (Chrome, Firefox, Internet Explorer 10+, Safari
y Opera
2.2.2. Empezar a trabajar con Bootstrap
Hay dos formas de comenzar a utilizar Bootstrapen su propio sitio web. Usted
puede:
1. Incluye Bootstrap desde un CDN
2. Descargue Bootstrap desde [Link]
pág. 32
Programación Web. Del Frontend al Backend
Capítulo II : Framework CSS
Bootstrap CDN
La gente de StackPath amablemente proporciona soporte CDN para CSS y
JavaScript de Bootstrap. Revisar [Link]
Descarga
Si desea descargar y alojar Bootstrap usted mismo, vaya a
[Link] y siga las instrucciones allí.
Una vez descargado, descomprima la carpeta comprimida para ver la estructura
de Bootstrap (compilado). Verás algo como esto:
2.2.3. Grid System
Sin duda, una de las características más importantes y útiles que ofrece
Bootstrap es su sistema de rejilla donde se pueden adaptar todos los elementos
al ancho de 12 columnas que varían su tamaño dependiendo del dispositivo
desde el cual se visualiza la web. Este sistema está pensado para ayudarnos en
la disposición de los componentes de nuestra web y su adaptación a los
diferentes tamaños de las pantallas.
pág. 33
Programación Web. Del Frontend al Backend
Capítulo II : Framework CSS
El funcionamiento de este sistema se puede resumir en los siguientes puntos.
▪ Las columnas de la rejilla irán agrupadas dentro de las filas, que se indicarán
con la clase ".row". Las filas se deben colocar dentro de una etiqueta
contenedora que se indicará con la clase ".container" para ancho fijo o
".container-fluid" para ocupar todo el ancho de la pantalla.
▪ El contenido se debe disponer dentro de columnas, las cuales serán los
únicos hijos de las filas, y que a su vez serán los únicos hijos del contenedor
▪ Cada fila se puede dividir hasta un máximo de 12 columnas, pero seremos
nosotros los que tendremos que definir el número de columnas en el que
queremos dividir cada fila. En cualquier caso, la suma del tamaño de esas
columnas no puede superar el valor de 12. Es decir, podemos crear una
columna que ocupe 6 espacios, y otras dos que ocupen 3 cada una de ellas.
▪ El tamaño de las columnas se especificará con clases CSS que ofrece
Bootstrap y que define para cada tamaño de pantalla. Por ejemplo, col-md-
xx, donde xx podrá tomar un valor comprendido entre 1 y 12. Las posibles
clases que podemos utilizar son:
o .col-xs-: Pensado para pantallas cuyo tamaño sea menor de 768 px.
o .col-sm-: Para pantallas mayor o igual a 768 px.
o .col-md-: Para pantallas mayor o igual a 992 px.
o .col-lg-: Para pantallas mayor o igual a 1.200 px.
A continuación, os dejamos un ejemplo de uso de este sistema de rejilla.
pág. 34
Programación Web. Del Frontend al Backend
Capítulo II : Framework CSS
El resultado de ese ejemplo, es lo que se puede ver en la siguiente imagen.
2.2.4. Componentes
Las clases de Bootstrap se basan en los siguientes colores:
Ejemplo de botones:
Ejemplo de implementación de Bootstrap en un proyecto HTML.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
pág. 35
Programación Web. Del Frontend al Backend
Capítulo II : Framework CSS
<title>Bootstrap demo</title>
<link href="[Link]
alpha2/dist/css/[Link]" rel="stylesheet"
integrity="sha384-
aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp"
crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="[Link]
alpha2/dist/js/[Link]" integrity="sha384-
qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N"
crossorigin="anonymous"></script>
</body>
</html>
Todos los componentes de Bootstrap se encuentran detallados en la página
web de Bootstrap: [Link]
pág. 36
Programación Web. Del Frontend al Backend
