Estilos CSS oscuros para aplicaciones Vue.js con Stylus

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

<template>
  <div class="home">
    <img alt="Vue logo" src="../../assets/logo.png">
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'Home'
}
</script>

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:

<template>
  <div class="home">
    <h1>Home Page</h1>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home'
}
</script>

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

<template>
  <!-- Esta parte no la hemos tocado aún -->
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link>
      |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style lang="stylus">
  #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
</style>

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 😉.