En este post te mostraré una plantilla simple de Bulma para comenzar a usar este framework CSS. Es decir, una plantilla de ejemplo para que puedas basarte en ella y comenzar a trabajar modificarla según tus preferencias.

Esto que te mostraré también es conocido como starter template de Bulma.

Cargando el CSS de Bulma

Puedes descargar la hoja de estilos de Bulma desde su web oficial o usando un CDN. Yo usaré unpkg así que la línea para cargar el estilo queda así:

Plantilla de ejemplo en Bulma

Sin más preámbulo veamos la plantilla inicial de Bulma. En este caso tenemos un menú de navegación que a su vez tiene un logotipo y enlaces, tanto a la izquierda como a la derecha.

En cuanto al cuerpo, Bulma permite diseñar usando columnas. Podemos crear nuevas filas con la clase columns, y dentro del div con esa clase, agregar varios div con la clase column.

Plantilla de ejemplo para Bulma CSS

El código queda así:

Ese es todo el código que necesitas, ya va incluido el script para el botón del menú colapsable.

Menú responsivo

Menú responsivo en Bulma – Funcionamiento con JavaScript puro

También estoy incluyendo un script para el funcionamiento del menú, ya que el mismo va a colapsar en pantallas pequeñas y va a mostrar solo un botón.

El código JavaScript para mostrar y ocultar el menú queda así:

Lo único que se hace es intercambiar la clase is-active tanto en el menú como en el botón, en el clic de éste último.

Poniendo todo junto

El código HTML que puse anteriormente es todo lo que necesitas para la plantilla. Ya a partir del mismo puedes comenzar tus proyectos usando este framework.

He creado un ejemplo en vivo por si quieres probar la plantilla de ejemplo online. Finalmente dejaré dos enlaces de interés: la documentación oficial y más posts sobre Bulma.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 6,837 suscriptores

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: