19,304 lecturas

Cómo usar Bulma y VueJS juntos

por Aashir Aamir Khan3m2020/08/17

Demasiado Largo; Para Leer

Bulma es un marco CSS gratuito y de código abierto basado en Flexbox y utilizado por más de 200 000 desarrolladores. Es el más fácil de aprender debido a su denominación natural de clases y un sistema de cuadrícula simple. Puede personalizar los colores, los puntos de interrupción, el tipo y las importaciones personalizadas para reducir el tamaño del archivo. Necesita un flujo de trabajo Sass para personalizarlo usando Variables, lo cual solo es posible si está usando el cargador sass de node-sass. No podrás personalizar nada de esta manera debido a la naturaleza de Bulma.

Companies Mentioned

featured image - Cómo usar Bulma y VueJS juntos

Bulma es un marco CSS gratuito y de código abierto basado en Flexbox y utilizado por más de 200 000 desarrolladores. Es el más fácil de aprender (en mi opinión) debido a su nomenclatura natural de clases y un sistema de cuadrícula simple. No es tan popular como Bootstrap, pero tiene una base de fans específica.

La publicación de hoy no trata sobre los beneficios o el uso de Bulma. Se trata más específicamente de la integración de Bulma y VueJS.

Cómo usar Bulma con VueJS

Hay varias formas de empezar con Bulma. Tu también puedes:

use npm para instalar el paquete Bulma (Recomendado - Personalizable)
use jsDelivr CDN para vincular a la hoja de estilo de Bulma (no se puede personalizar)

1. Integración Bulma usando npm

Es mi recomendación personal usar Bulma en VueJS de esta manera, debido a algunos beneficios que no obtendrá de otra manera.

Puede personalizar los colores, los puntos de interrupción, el tipo y las importaciones personalizadas para reducir el tamaño del archivo.

Esto solo es posible si configuramos un flujo de trabajo Sass en nuestro proyecto, debido a la naturaleza de Bulma.

Así que, aquí vamos:

Instalando Bulma

Instale estas dependencias requeridas (si ya no existe en su proyecto):

 npm install --save-dev node-sass sass-loader

También puede leer esta publicación detallada al respecto si no lo entiende o desea una instalación más detallada.

Instale Bulma a través de npm/yarn:

 npm install bulma

Ahora puede revisar su

 package.json

para ver los cambios.

Agregando al proyecto

Es muy obstinado importar a Bulma al proyecto, pero de esta manera funciona mejor para mí:

Cree un main.scss en la carpeta /assets.

En este archivo `main.scss` pega este código:

 // Customizations Here (Optional) // Bulma Import @ import '~bulma' ;

Agregue este archivo en main.js de su proyecto de esta manera:

 require ( '@/assets/main.scss' );

Estás bien, ahora. Simplemente inicie el servidor de desarrollo local y verifique que Bulma esté trabajando en su sitio web.

2. use jsDelivr CDN para vincular a la hoja de estilo de Bulma (no se puede personalizar)

Esta es la forma más fácil de integrar Bulma en su proyecto (Vue o HTML/CSS), pero no podrá personalizar nada de esta manera. Obtendrás una versión completa de Bulma.

Entonces, así es como puede agregar a través de CDN:

Copie esto, o recupere la última versión de Bulma de JSDelivr :

 <link href= "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" >

Ve al directorio /public y pega esto en index.html

Reinicie el servidor de desarrollo local y comience a usar Bulma 🙌.

Personalización (Bonificación)

Este es el capítulo adicional de esta publicación, donde mencionaré brevemente los efectos de la personalización en Bulma y cómo puedes personalizarla. Bulma está escrita de forma nativa en Sass, por lo que necesita un flujo de trabajo de Sass para personalizarlo usando Variables, lo cual solo es posible si está usando npm

Personalización básica

 @charset "utf-8" ; // Import a Google Font @ import url( 'https://fonts.googleapis.com/css?family=Nunito:400,700' ); // Set your brand colors $purple: # 8 A4D76; $pink: #FA7C91; $brown: # 757763 ; $beige-light: #D0D1CD; $beige-lighter: #EFF0EB; // Update Bulma's global variables $family-sans-serif: "Nunito" , sans-serif; $grey-dark: $brown; $grey-light: $beige-light; $primary: $purple; $link: $pink; $widescreen-enabled: false ; $fullhd-enabled: false ; // Update some of Bulma's component variables $body-background-color: $beige-lighter; $control-border-width: 2 px; $input-border-color: transparent; $input-shadow: none; // Import only what you need from Bulma @ import "../node_modules/bulma/sass/utilities/_all.sass" ; @ import "../node_modules/bulma/sass/base/_all.sass" ; @ import "../node_modules/bulma/sass/elements/button.sass" ; @ import "../node_modules/bulma/sass/elements/container.sass" ; @ import "../node_modules/bulma/sass/elements/title.sass" ; @ import "../node_modules/bulma/sass/form/_all.sass" ; @ import "../node_modules/bulma/sass/components/navbar.sass" ; @ import "../node_modules/bulma/sass/layout/hero.sass" ; @ import "../node_modules/bulma/sass/layout/section.sass" ;