Cómo usar BulmaCSS con Parcel

Hola, no soy un experto en CSS y siempre uso un framework como Bootstrap, pero hoy decidí probar Bulma CSS.

Bulma se puede usar mediante CDN o NPM. El CDN es una forma fácil de empezar, pero tiene algunas desventajas:

• No tienes Sass para personalizar los estilos.
• El archivo es pesado (incluye el framework de Bulma completo).

Bulma desde CDN

En tu archivo HTML, importas el CSS y ya tienes todo listo para usar Bulma.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">

El CDN es una buena opción para pruebas o prototipos básicos, pero no para un proyecto real.

Bulma desde NPM

Bulma también se puede instalar desde NPM, y usarlo de esta forma ofrece varias ventajas:

• Sass para personalizar variables y estilos.
• Seleccionar qué componentes cargar del framework de Bulma.

Requisitos

Para usar Bulma desde NPM necesitas tener Node.js instalado en tu máquina.

• Entra a https://nodejs.org/en/download/, elige tu sistema operativo e instálalo.

Crea un nuevo directorio llamado bulmalab. Desde tu terminal, entra a la carpeta e instala Bulma con npm usando el siguiente comando:

npm install bulma --save

Bulma ya está listo. El siguiente paso es usar un empaquetador para compilar nuestros archivos Sass y levantar un servidor web con Parcel.

Cómo usar Parcel con Sass

Parcel es un empaquetador de aplicaciones fantástico para Sass, JavaScript y recursos estáticos sin configuración.

Uso Parcel porque me ayuda a compilar mis archivos Sass sin complicaciones y genera la versión final.

Configura tu proyecto con npm e instala parcel-bundler:

npm init -y 
npm install -g parcel-bundler

Configura las tareas para Parcel.

Edita el archivo package.json y crea una nueva tarea dentro de los scripts con Parcel y tu punto de entrada, como index.html:

    "server": "parcel index.html",
    "prod": "parcel build index.html"

Importar Bulma

Crea un nuevo directorio con un archivo scss/main.scss. Este archivo importará cada archivo de Bulma para poder personalizarlo o extenderlo.

El archivo main.scss importará las variables iniciales y Bulma:

@import "node_modules/bulma/sass/utilities/initial-variables";
@import "node_modules/bulma/bulma";

El archivo index.html importa el archivo Sass:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <link rel="stylesheet" href="scss/index.scss">
</body>
 
    <h2>hello from bulma</h2>
</html>

Compilar Bulma y nuestro Sass

Parcel compila nuestros archivos Sass en tiempo real, solo necesitamos iniciar el servidor de desarrollo:

dany@lx-personal:~/Desktop/bulmacss-step-1$ npm run server
 
> bulmacss-step-1@1.0.0 server /home/dany/Desktop/bulmacss-step-1
> parcel index.html
 
Server running at http://localhost:1234 
✨  Built in 2.00s.

¡Nuestro proyecto ya está listo para ser personalizado con Bulma!

Foto por James Baldwin en Unsplash