Ir al contenido principal

Destacado

Node | Debug nestjs app en vscode

Recientemente me encontré trabajando en un proyecto basado en nestjs y una cosa que me sorprendió fue la cantidad de console.log distribuidos por todo el repositorio, señal de que el equipo lo usaba como su principal forma de depurar. Un poco old school para mí gusto para ser sincero, así que, ¿Por qué no usar vscode a tu favor? La siguiente configuración ademas de correr la app,  enlaza  el debugger al proceso node. En MacOS:   Ejecutar > Agregar configuración... Listo, ya podemos poner breakpoints en donde lo requiramos, sencillo no? C you space cowboy!

Flexbox | Layouts

Hoy vamos a crear una hoja de estilo que nos permitirá implementar algunos de los layouts mas comunes dentro de las aplicaciones web.

Las principales características que deberá cumplir:

  • Debe soportar un sidebar.
  • Debe soportar un header.
  • Debe soportar un footer.
  • Tendrá una sección para el contenido, el cual debe ajustarse al mismo.
  • Debe ser responsiva.


Para ello utilizaremos el modulo de caja flexible (flexbox), que no es más que una método para distribuir el espacio entre items dentro de un contenedor. 


Plantilla inicial (HTML):

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Simple Layout</title>
  5. </head>
  6. <body>
  7. <div class="smpl-container smpl-container--with-header">
  8. <header class="smpl-header">
  9. I'm a header
  10. </header>
  11. <section class="smpl-content">
  12. I'm content
  13. </section>
  14. </div>
  15. </body>
  16. </html>

Los estilos

Aplicamos un reset básico y a continuación definimos el container principal que como pueden ver será un flex container (display: flex)
  1. body, html {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. height: 100vh;
  6. }
  7.  
  8. .smpl-container {
  9. display: flex;
  10. overflow: hidden;
  11. height: 100%;
  12. }


Agregamos algunos modificadores para adaptar el layout cuando necesitemos un header o un sidebar

  1. .smpl-container--with-header {
  2. flex-direction: column;
  3. }
  4.  
  5. .smpl-container--with-sidebar {
  6. flex-direction: row;
  7. }
  8.  
La sección del contenido debe ocupar todo el espacio restante así que le definimos un flex-grow igual a 1, además de que debe mostrar un scroll en caso de que  necesite más espacio del disponible en el viewport (overflow). 

  1. .smpl-content {
  2.  
  3. overflow-y: auto;
  4. display: flex;
  5. }
Ya casi...

Definimos los elementos restantes
  1. .smpl-header {
  2. height: 35px;
  3. border-bottom: 1px solid #ccc;
  4. padding: 5px;
  5. display: flex;
  6. align-items: center;
  7. }
  8.  
  9. .smpl-sidebar {
  10. flex: 1
  11. background-color: #ccc;
  12. padding: 5px;
  13. }

Con estas reglas también podemos definir un container que contenga un sidebar + contenido y combinarlos como en el siguiente ejemplo:




Bastante bien no?

Nos falta cubrir 2 puntos:
  • El footer
  • Debe ser responsiva (parcialmente cubierta ya que flexbox se adapta de forma natural)
Pero eso lo veremos en el siguiente post, c you digital cowboy!

Comentarios

Entradas populares