Bulma es un marco CSS simple, elegante y moderno que muchos desarrolladores prefieren a Bootstrap. Personalmente, creo que Bulma tiene un mejor diseño por defecto y también se siente más liviano.
En este tutorial, te daré una introducción súper rápida a la biblioteca.
También hemos creado un curso gratuito de Bulma. ¡Haz clic aquí para echarle un vistazo!
La puesta en marcha
Configurar Bulma es muy fácil y puede hacerlo de varias formas diferentes, ya sea que prefiera NPM, descargarlo directamente de los documentos o usar un CDN. Simplemente vamos a enlazar a un CDN desde nuestro archivo HTML, así:
Esto nos dará acceso a las clases de Bulma. Y eso es todo lo que Bulma es, una colección de clases.
Modificadores
Lo primero que debes aprender sobre Bulma son las clases modificadoras. Estos le permiten establecer estilos alternativos para casi todos los elementos de Bulma. Todos comienzan con is-*o has-*, y luego reemplaza el *con el estilo que desee.
Para entender este concepto correctamente, comencemos mirando los botones.
Botones
Para convertir un botón normal en un botón Bulma, simplemente le daremos la clase de button.
Click here Lo que da como resultado el siguiente estilo:
Como puede ver, tiene un bonito diseño plano por defecto. Para cambiar el estilo, usaremos modificadores Bulma. Comencemos haciendo el botón más grande, verde y con esquinas redondeadas:
Click here Este resultado es un botón de aspecto agradable:
También puede utilizar modificadores para controlar el estado de los botones. Por ejemplo, agreguemos la clase is-focused, que agrega un borde a su alrededor:
Finalmente, usemos también uno de los has-*modificadores. Por lo general, controlan lo que hay dentro del elemento. En nuestro caso, el texto. Agreguemos has-text-weight-bold.
Aquí está el resultado:
Le recomiendo que juegue con combinaciones de las diversas clases para comprender cuán flexible es este sistema. Las combinaciones son casi infinitas. Consulte la sección de botones en los documentos para obtener más información.
Columnas
En el núcleo de cualquier marco de CSS está la forma en que resuelven las columnas, ya que eso es relevante para casi todos los sitios web que creará. Bulma se basa en Flexbox, por lo que es muy sencillo crear columnas. Creemos una fila con cuatro columnas.
First column Second column Third column Fourth column Primero, estamos creando un contenedor con una clase de columnsy luego le damos a cada uno de los niños una clase de column. Da como resultado lo siguiente:
También agregué un borde alrededor de las columnas para que sean más evidentes.
Tenga en cuenta que puede agregar tantas columnas como desee. Flexbox se encarga de dividir el espacio a partes iguales entre ellos.
Para dar colores a las columnas, podemos reemplazar el texto dentro de ellas con un
etiqueta, y asígnele la notificationclase y un is-*modificador. Así por ejemplo:
Primera columna
Vamos a hacer esto utilizando el is-info, is-success, is-warningy is-dangermodificadores, lo que da como resultado la siguiente:
En notificationrealidad, la clase está destinada a alertar a los usuarios sobre algo, ya que le permite rellenar el fondo con un color utilizando los is-*modificadores. Aquí funciona bien para separar las columnas.
También podemos controlar fácilmente el ancho de una columna. Agreguemos el is-halfmodificador a la columna verde.
Lo que da como resultado que la segunda columna ocupa ahora la mitad del ancho, mientras que las otras tres ocupan un tercio de la mitad restante cada una.
Estas son las opciones que puede utilizar para controlar el ancho de las columnas:
is-three-quartersis-two-thirdsis-halfis-one-thirdis-one-quarteris-four-fifthsis-three-fifthsis-two-fifthsis-one-fifth
Héroe
Finalmente, también aprendamos cómo crear un héroe en Bulma. Usaremos la semántica y le daremos una clase de heroy is-infopara darle algo de color. También necesitamos agregar un niño a la clase hero-body.
Para que este héroe haga algo significativo, agregaremos un elemento contenedor dentro del cuerpo y agregaremos un título y un subtítulo.
Primary title
Primary subtitle
¡Ahora empieza a verse bien! Si queremos que sea más grande, simplemente podemos agregar is-mediumla etiqueta en sí.
... 
¡Y eso es!
Ahora tienes una idea básica de cómo funciona Bulma. Y la mejor parte es que el resto de la biblioteca es tan intuitivo y fácil como los conceptos que ha visto hasta ahora. Entonces, si comprende esto, comprenderá el resto sin problemas.
¡Asegúrese de consultar el curso gratuito de Bulma en Scrimba si desea obtener más información!
¡Gracias por leer! Mi nombre es Per Borgen, soy el cofundador de Scrimba, la forma más fácil de aprender a codificar. Debe consultar nuestro bootcamp de diseño web receptivo si desea aprender a construir un sitio web moderno a nivel profesional.
