Bulma CSS

Plantilla inicial de Bulma

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í:

<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.1/css/bulma.min.css">

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í:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plantilla inicial de Bulma CSS - By Parzibyte</title>
    <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.1/css/bulma.min.css">
</head>

<body>

    <nav class="navbar is-warning" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://parzibyte.me/blog">
                <img alt=""
                    src="https://raw.githubusercontent.com/parzibyte/ejemplo-mern/master/src/img/parzibyte_logo.png"
                    style="max-height: 80px" />
            </a>
            <button class="navbar-burger is-warning button" aria-label="menu" aria-expanded="false"
                data-target="navbarBasicExample">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </button>
        </div>
        <div class="navbar-menu">
            <div class="navbar-start">
                <a class="navbar-item" href="#">Enlace</a>
                <a class="navbar-item" href="#">Otro enlace</a>
            </div>
            <div class="navbar-end">
                <a class="navbar-item" href="#">Enlace a la derecha</a>
                <div class="navbar-item">
                    <div class="buttons">
                        <a target="_blank" rel="noreferrer" href="https://parzibyte.me/l/fW8zGd"
                            class="button is-primary">
                            <strong>Soporte y ayuda</strong>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", () => {
            const boton = document.querySelector(".navbar-burger");
            const menu = document.querySelector(".navbar-menu");
            boton.onclick = () => {
                menu.classList.toggle("is-active");
                boton.classList.toggle("is-active");
            };
        });
    </script>
    <section class="section">
        <div class="columns">
            <div class="column has-text-centered">
                <h1 class="is-size-1">Plantilla de Bulma CSS</h1>
                <p>El contenido de una columna</p>
                <a href="https://parzibyte.me/blog">By Parzibyte</a>
            </div>
        </div>
        <div class="columns">
            <div class="column">
                Columna 1
            </div>
            <div class="column">
                Columna 2
            </div>
        </div>
        <div class="columns">
            <div class="column">
                Otra columna dentro de una nueva fila
            </div>
        </div>
    </section>
</body>

</html>

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í:

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", () => {
        const boton = document.querySelector(".navbar-burger");
        const menu = document.querySelector(".navbar-menu");
        boton.onclick = () => {
            menu.classList.toggle("is-active");
            boton.classList.toggle("is-active");
        };
    });
</script>

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.

Finalmente dejaré dos enlaces de interés: la documentación oficial y más posts sobre Bulma.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
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/

Entradas recientes

Cancelar trabajo de impresión con C++

En este post te quiero compartir un código de C++ para listar y cancelar trabajos…

1 día hace

Copiar bytes de Golang a JavaScript con WebAssembly

Gracias a WebAssembly podemos ejecutar código de otros lenguajes de programación desde el navegador web…

4 semanas hace

Imprimir PDF con Ghostscript en Windows de manera programada

Revisando y buscando maneras de imprimir un PDF desde la línea de comandos me encontré…

4 semanas hace

Hacer pruebas en impresora térmica Bluetooth Android

Esta semana estuve recreando la API del plugin para impresoras térmicas en Android (HTTP a…

1 mes hace

Limpiar clave PEM

Hoy te enseñaré a extraer la cadena base64 de una clave PEM usando una función…

1 mes hace

Foco con Telegram, apagador de 3 vías, relevador y ESP8266

Encender un foco con un Bot de Telegram es posible usando una tarjeta como la…

1 mes hace

Esta web usa cookies.