Ir al contenido principal

Destacado

C4 Model | Por una mejor comunicación

Introducción. Han pasado muchos años desde la introducción de UML en el ámbito del desarrollo de software, con la llegada de Agile , la forma de desarrollar software cambió drásticamente: algunos conceptos evolucionaron, aparecieron nuevos mientras que otros fueron abandonados. Hoy en día, UML es utilizado por contadas personas,  la propia industria ha dejado de lado aquellos elaborados diagramas,  recurriendo a diagramas genéricos o diagramas parciales, altamente variados entre sí, para representar y describir arquitecturas/diseños. Aquí es donde entra Simon Brown , quien identificó este problema de comunicación dentro de las organizaciones. Para solucionarlo, desarrolló el modelo C4 , un sistema de modelos, capaz de describir el software de manera clara y accesible, no solo para  los equipos de desarrollo y arquitectos sino para todo aquel interesado en comprender el funcionamiento y  estructura de un sistema . Modelo C4. El modelo C4 se basa en un c...
Publicar un comentario
Leer más
Etiquetas

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

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Layout</title>
    </head>
    <body>
        <div class="smpl-container smpl-container--with-header">
            <header class="smpl-header">
                I'm a header
            </header>
            <section class="smpl-content">
                I'm content
            </section>
        </div>
    </body>
</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)
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100vh;
}

.smpl-container {
    display: flex;
    overflow: hidden;
    height: 100%;
}


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

.smpl-container--with-header {
    flex-direction: column;
}

.smpl-container--with-sidebar {
    flex-direction: row;
}
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). 

.smpl-content {

    overflow-y: auto;
    display: flex;
}
Ya casi...

Definimos los elementos restantes
.smpl-header {
    height: 35px;
    border-bottom: 1px solid #ccc;
    padding: 5px;
    display: flex;
    align-items: center;
}

.smpl-sidebar {
    flex: 1
    background-color: #ccc;
    padding: 5px;
}

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!

Etiquetas:

Comentarios

Publicar un comentario

Entradas populares