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.
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!
Comentarios