Estilos CSS oscuros para aplicaciones Vue.js con Stylus

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

Contenido del curso

Bienvenida al curso

1
Vue consumiendo APIs oficiales de Blizzard
13:27 min

VueCli, configuración inicial del proyecto y consumo del API de Blizzard

Creación de los componentes y layouts de nuestro proyecto

Agregando funcionalidades avanzadas a nuestro proyecto

Antes de continuar, vamos a limpiar y a organizar un poco más el proyecto 🧹, a darle forma y color. ¡Una app de Diablo III no puede tener el fondo blanco!

Si te fijas bien, todavía tenemos el componente HelloWorld.vue dentro de /src/components. Vamos a eliminarlo, que ya no nos hace falta.
Una vez borrado, verás un error en la terminal, porque la vista Home está haciendo uso de este componente que ya no existe. Tenemos que actualizar el contenido de la vista Home (/views/Home/Index.vue), que hacía uso de este componente. Podemos dejarlo así:

&lt;template&gt;
  &lt;div class=&quot;home&quot;&gt;
    &lt;img alt=&quot;Vue logo&quot; src=&quot;../../assets/logo.png&quot;&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
// @ is an alias to /src
export default {
  name: 'Home'
}
&lt;/script&gt;

Del componente vista /views/Home/Index.vue vamos a borrar también la imagen con el logo de Vue. Podemos dejar una etiqueta h1 con el nombre de la página, algo como esto:

&lt;template&gt;
  &lt;div class=&quot;home&quot;&gt;
    &lt;h1&gt;Home Page&lt;/h1&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
// @ is an alias to /src

export default {
  name: 'Home'
}
&lt;/script&gt;

Tu página Home se vería así:

La temática de nuestra aplicación esta basada en el juego Diablo III, por ello vamos a darle un toque más oscuro a nuestra web. Vamos a cambiar los estilos de CSS de nuestro fichero App.vue y vamos a dejarlo así:

&lt;template&gt;
  &lt;!-- Esta parte no la hemos tocado aún --&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;div id=&quot;nav&quot;&gt;
      &lt;router-link to=&quot;/&quot;&gt;Home&lt;/router-link&gt;
      |
      &lt;router-link to=&quot;/about&quot;&gt;About&lt;/router-link&gt;
    &lt;/div&gt;
    &lt;router-view/&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;style lang=&quot;stylus&quot;&gt;
  #app
    padding 60px 0
    font-family 'Avenir', Helvetica, Arial, sans-serif
    -webkit-font-smoothing antialiased
    -moz-osx-font-smoothing grayscale
    color #ffffff // Le ponemos un color de letra blanco para que resalte
    background-color #15202b // Le cambiamos el color de fondo por un azul marino oscuro
&lt;/style&gt;

Stylus

> 📗 Recuerda que estamos usando Stylus Lang como pre-procesador CSS. Lo que me gusta de Stylus es que es sencillo y limpio, a la vez que potente y funcional.

No hace falta que uses ; para terminar las sentencias, o los : para separar la clave del valor, puedes omitir las llaves ({, }) de abrir/cerrar clases. Desde mi punto de vista, se ve mejor y más elegante. Aunque al final, cuando se "compile", se verá como CSS normal y corriente.

Durante este curso, intentaremos seguir este estilo a la hora de escribir CSS con Stylus:

No llaves {}
No punto y coma ;
No dos puntos :

Como son opcionales, los puedes usar si lo prefieres. Durante el curso, intentaremos seguir este estilo, lo más minimalista posible. Menos cosas que escribir 😉.

Estilos CSS oscuros para aplicaciones Vue.js con Stylus

Bienvenida al curso

Vue consumiendo APIs oficiales de Blizzard

VueCli, configuración inicial del proyecto y consumo del API de Blizzard

Creación de Aplicaciones Vue.js con API de Diablo III

Desarrollo de Aplicaciones con APIs de Blizzard: Guía Completa

Estructura y gestión de carpetas en proyectos Vue.js

Instalación y configuración de librerías en Vue con Bootstrap

Configuración de Axios para llamadas a APIs de Diablo III

Gestión de Tokens con Vuex: Integración y Almacenamiento en Vue.js

Creación de los componentes y layouts de nuestro proyecto

Componente Reutilizable de Carga con Vue.js

Estilos CSS oscuros para aplicaciones Vue.js con Stylus

Creación de Layouts con Vue y Bootstrap para Mejorar la UI

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

Creación de NavBar y Footer con BootstrapVue y FontAwesome

Refactorización de Importaciones en Vue.js con Plugins

Buscador de Perfiles en Diablo III: Creación de Formulario y Título

Rutas Dinámicas y Lazy Loading en Vue.js

Construcción y Consumo de APIs con Vue.js y Vuex

Creación y Uso de Componentes en Vue.js: MainBlock y TopHeroes

Visualización de Héroes con Bootstrap-Vue en Diablo III

Componente de Progreso de Actos en Vue.js

Implementación de Componentes Vue: MainBlock y PlayerStats

Navegación y Visualización de Artesanos en Vue.js

Funciones y Componentes para la Vista de Héroe en Vue.js

Agregando funcionalidades avanzadas a nuestro proyecto

Carga Diferida de Componentes en Vue.js: Mejora de Rendimiento

Implementación de Inventario de Objetos de Personaje en Vue.js

Directivas Personalizadas en Vue: Creación y Uso Básico

Configuración y despliegue de aplicaciones en Netlify con Vue.js

Creación y Personalización de Páginas en Vue.js