lIqFD

index.jade

doctype html
html(lang="es")
  head
    meta(charset="UTF-8")
    title Generar código HTML con Jade Template
    link(href="estilos.css", rel="stylesheet", type="text/css")
    
  body
  
    h1 Aprendiendo a usar Jade Template
      
    h2 Textos y comentarios
   
    p Texto dentro de un tag de <em>parrafo</em> 
    
    // Los comentarios HTML son visibles en el codigo HTML
    
    //- Los comentarios JADE no son visibles
    
    //  Bloque de Comentario HTML
      | Comentario escrito
      | en multilinea
      
    p
      | Texto en 
      | multilinea
      
    p.
      Otra forma de agregar 
      textos largos
     
    h2 #IDs y Clases css
    
    //- Generar un div con ID, asi de simple.
    #contenido
    
      //- Generar un div un clase css
      .sidebar
        p Parrafo dentro de un div con clase css .sidebar
    
    h2 Atributos
    //- Como ya vimos al inicio de este documento, hemos utilizado
      | los atributos en las etiquetas html,link, y meta
    
    //- Podemos agregar atributos a un elemento html, dentro de un parentesis,
      | ya sea separandolos por coma o espacio
    input.input_text(type="text" placeholder="Ingresa un texto aquí", maxlength="8")
    
    h2 Anidación
    
    nav
      ul.menu
        //- Anidamiento simple
          | usando saltos de linea y tab para insertar tags html dentro de otros
        li
          a(href="#") Inicio  
        //- Anidamiento con expansion de bloque
          | Escribir una linea con tags html anidados, 
        li: a(href="#", title="Portafolio") Portafolio
        
    h2 Variables
    //- En jade podemos declarar variables
      | anteponiendo el simbolo "-" antes del nombre de variable
      
    //- Variable simple
    - variable = "Jade Template"
    
    h3 El valor de nuestra variable es:  #{variable} !!!
    
    //- Variable como objeto
    - datos = { nombre: 'Miguel', pais:'Perú' }
    
    p.describe Mi nombre es #{datos.nombre} y vivo en Lima,#{datos.pais}
    
    //- Variable Booleana(true/false)
    - booleano = true
    
    p Generar código HTML con jade es #{booleano ? "Fácil" : "Dificil"}
  
    
    
   

    
    
    

lIqFD.markdown

lIqFD

A Pen by Miguel Quispe on CodePen.

License.

style.css

body{
  font: 400 14px/20px 'Helvetica Neue', Arial;
}

h1{
  margin-bottom: 40px
}

h2{
  padding-bottom: 10px;
  border-bottom: 1px solid #e9e9e9;
  margin-bottom:10px;
}

nav{
  width: 160px;
  padding: 10px;
  background: #f6f6f6;
  border-radius: 6px;
}