¡Limpiemos el proyecto!

9/27

Lectura

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

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

Aportes 7

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

¿Conocías Stylus? ¿Qué te parece?

Yo en lo personal prefiero usar llaves, puntos y comas y dos puntos, si a mi me quitas eso me pierdo a leer el código, siento que es un código muy desordenado, para mi elegante es usar las llaves porque así puedo identificar los patrones e identificar rápidamente el bloque de código Con stylus o pug en el caso de HTML, tengo que estar mirando los niveles de identación, que son espacios en blanco y ver que si este está en el nivel correcto o no.

Además tengo una extensión en VSCode (Bracket color pair) que me hace el highlight del bloque en el que estoy trabajando y se me hace mucho más fácil la lectura.

Pero cada quien sus gustos, igual tampoco está mal aprender Stylus para cualquier cosa en el futuro:D

Stylus es muy bueno, me he acostumbrado más a Sass, pero también recomiendo el curso de Stylus en Platzi: https://platzi.com/cursos/stylus/

Cuando aprendes proprocesadores, nunca vuelves a usar CSS como un simple mortal jaja

go ahead!

Me parece muy parecido Stylus a Sass, por no usar llaves ni punto y coma, estan geniales los dos 😛

creo que sin punto y coma puedo vivir pero sin llaves y dos puntos no al final se los termine poniendo

vamos super bien