Ir al contenido principal

Destacado

Javascript | Proxy

Proxy Esta entrada continua con el tema de patrones de diseño y en esta ocasión vamos a examinar el patron Proxy y algunas de sus ventajas. Descripción. El proxy es un patrón de diseño, de tipo estructural y consiste en definir un objeto/componente (sustituto) por medio del cuál controlamos el acceso a otro (original). Esto nos permite agregar funcionalidad adicional así como simplificar la interacción con el objeto original. Ejemplo. RealSubject : es el objeto que nuestro Proxy va a "sustituir. Tiene 2 métodos: connect y disconnect Proxy : es el objeto que controla el acceso a RealSubject . Internamente crea una referencia de RealSubject y hace las llamadas a los métodos correspondientes. La clase mantiene la misma interfaz (connect y disconnect) pero añade funcionalidades extras ( fireBeforeConnectEvent y fireAfterConnectEvent ) así como un control de errores (try/catch). Con este patron podemos agregar funcionalidades que necesitemos en nuestro proyecto sin tener que modifi
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