Organización de Assets en Vue: Imágenes, Fuentes y CSS Globales

Clase 11 de 27 • Curso Avanzado de Vue.js 2

Antes de continuar, necesitamos tener un directorio en el cual guardar nuestros assets (imágenes, estilos CSS, tipografías, etc.).

Por defecto, al crear el proyecto tenemos la carpeta /assets creada, con una imagen, el logo de Vue.
Lo primero que tenemos que hacer es borrar todo el contenido de la carpeta /assets. Una vez que esté vacía, vamos a crear 3 carpetas: img (para las imágenes), css (para nuestros estilos CSS globales) y fonts (donde guardaremos las tipografías que instalemos en el proyecto).

Tu carpeta /assets debería verse así:

📂 /assets 
   ├── 📂 /css
   ├── 📂 /fonts
   └── 📂 /img

Imágenes

Para agilizar el desarrollo del curso, descarga todas las imágenes de este repositorio (https://github.com/baumannzone/diablo3-vue-platzi) y guárdalas dentro de la carpeta de imágenes, en /assets/img. Las iremos explicando según las vayamos utilizando.

Fuentes

Si has jugado alguna vez al juego de Diablo (al I, al II o al III) y has visto el resultado final de la app https://diablo3.netlify.com, te habrás dado cuenta que, en ciertas partes de la app, se hace uso de una tipografía muy especial.

Esta es la fuente que usa nuestra aplicación:

Esta es la tipografía oficial del juego:

El juego de Diablo tiene una tipografía o fuente muy reconocible. Para intentar aproximarnos lo máximo posible a esto, nos vamos a descargar una fuente que se asemeja bastante y que, desde mi punto de vista, ¡es muy chula!
La fuente se llama DiabloHeavy y la puedes descargar de manera gratuita desde aquí: https://fontzone.net/font-details/diablo-heavy.
En caso de que no esté disponible, puedes ir al repositorio del proyecto y descargar los archivos de la carpeta /fonts, en assets.

Estilos CSS

Otra cosa que vamos a ver, es como tener estilos de CSS globales en nuestra aplicación. Esto puede sernos útil en varias ocasiones, cuando queremos sobrescribir los estilos de alguna librería externa, por ejemplo.
En este caso, no era necesario crear un archivo global de CSS, pero lo vamos a hacer por motivos prácticos.

Dentro de nuestra carpeta de /css, en /assets, vamos a crear un fichero css con extensión de Stylus (recuerda, el pre-procesador CSS del que hablamos antes). Crea el archivo con nombre main.styl. Aquí dentro, tendremos nuestro CSS global. Empezaremos cargando la fuente que acabamos de descargarnos, para tenerla disponible en nuestra aplicación.

Le agregamos este contenido a nuestro archivo main.styl:

// ---------------------
// Diablo-Like Font · DiabloHeavy Font
// ---------------------

// Damos de alta la fuente con el nombre &quot;DiabloHeavy&quot; y cargamos todos los formatos
@font-face
  font-family &quot;DiabloHeavy&quot;
  src url(&quot;../fonts/diabloh.eot&quot;)
  src url(&quot;../fonts/diabloh.eot?#iefix&quot;) format(&quot;embedded-opentype&quot;),
  url(&quot;../fonts/diabloh.otf&quot;) format(&quot;opentype&quot;),
  url(&quot;../fonts/diabloh.svg&quot;) format(&quot;svg&quot;),
  url(&quot;../fonts/diabloh.ttf&quot;) format(&quot;truetype&quot;),
  url(&quot;../fonts/diabloh.woff&quot;) format(&quot;woff&quot;),
  url(&quot;../fonts/diabloh.woff2&quot;) format(&quot;woff2&quot;)
  font-style normal
  font-weight normal

// Creamos una clase que tenga de tipografía la fuente de Diablo
.font-diablo
  font-family &quot;DiabloHeavy&quot;, sans-serif

Más adelante retomaremos este fichero, pero de momento, podemos dejarlo así.
En cuanto tengamos registrado nuestro archivo CSS global en la aplicación, podremos usar la clase .diablo-font en cualquier elemento (con texto) de nuestra aplicación, en el que queramos renderizar dicha fuente.

Para registrarlo, lo único que tenemos que hacer es importarlo desde el fichero principal, main.js:

// CSS global
import './assets/css/main.styl'

Puedes ponerlo debajo del CSS de la librería BootstrapVue. De esta forma estarás registrando dicho archivo CSS de manera global en tu proyecto y todas las clases que pongas ahí podrán ser usadas desde cualquier parte.

> Al crear el proyecto con el CLI de Vue, una de las opciones que teníamos era la de los "preprocesadores CSS".
Nosotros le indicamos que queríamos Stylus para el CSS, por lo tanto, cuando estamos escribiendo CSS con formato de Stylus, Webpack y sus amigos están transformando el código de Stylus a CSS válido. Y lo mejor, ¡no hemos tenido que configurar nada! 💃

Creo que ya podemos pasar al siguiente bloque de contenido, donde trabajaremos sobre el layout principal.