Spanish (Español) translation by Ricardo Ramírez (you can also view the original English article)
Si has estado siguiendo el trabajo que ZURB ha estado haciendo con Foundation for Apps, puede que hayas notado que la mayoría de sus plantillas demo tienen algunos paneles desplazables bastante ingeniosos.
Estos paneles son bastante asombrosos – especialmente para aplicaciones híbridas. ¿Recuerdan lo prácticos que eran los marcos antes que quedaran obsoletos? Bueno, ahora puedes tener esa misma funcionalidad pero en una forma responsiva.
Después de algunos retoques pude extraer la funcionalidad básica de estos paneles y eso es lo que estaremos aprendiendo a recrear hoy.
1. Comencemos desde el principio
Empezaremos con las etiquetas básicas. La parte más importante es un contenedor para la página entera.
1 |
<div class="wrap"> |
2 |
|
3 |
<main>
|
4 |
|
5 |
<aside>
|
6 |
<h1>Sidebar</h1> |
7 |
<p>
|
8 |
lipsum... |
9 |
</p>
|
10 |
</aside>
|
11 |
|
12 |
<article>
|
13 |
<h1>Content</h1> |
14 |
<p>
|
15 |
lipsum... |
16 |
</p>
|
17 |
</article>
|
18 |
|
19 |
</main>
|
20 |
|
21 |
</div>
|
2. CSS
Las cosas se vuelven interesantes en CSS muy rápido. Primero, queremos que nuestros selectores html y body tengan height: 100%. Estamos haciendo esto para configurar el elemento .wrap al que colocaremos height: 100vh. Con la unidad vh estamos diciendo que necesitamos que la aplicación tome toda la altura de la ventana para que los elementos en su interior sean obligados a desplazarse.
También definimos que .wrap sea display: flex, entonces podemos colocar la propiedad flex a los elementos hijos.
1 |
html, body { |
2 |
height: 100%; |
3 |
}
|
4 |
|
5 |
.wrap { |
6 |
height: 100vh; |
7 |
display: flex; |
8 |
}
|
Nota: En lugar de recordar todos los tipos de sintaxis para Flexbox, intenta usar Autoprefixer. Luego solo necesitas utilizar la sintaxis en la especificación de la W3C y este hará el resto para soportar todos los navegadores posibles.
3. Siendo flexible
Ahora que tenemos este "contenedor" configurado, podemos comenzar a añadir un estilo estándar a cada elemento flex dentro de el. El único truco es asegurarse de configurar estos elementos hijos con overflow-y: scroll para aplicar una barra de desplazamiento.
1 |
main { |
2 |
flex: 1; |
3 |
display: flex; |
4 |
}
|
5 |
|
6 |
aside, article { |
7 |
overflow-y: scroll; |
8 |
padding: 2em; |
9 |
}
|
10 |
|
11 |
aside { |
12 |
flex: 1; |
13 |
}
|
14 |
|
15 |
article { |
16 |
flex: 2; |
17 |
}
|
4. Siendo responsivo
Vamos a dar un paso más y haremos nuestro sitio responsivo llevando la barra lateral a la parte superior para dispositivos más pequeños. Es tan fácil como agregar una regla CSS dentro de un media query.
1 |
@media (max-width: 800px) { |
2 |
main { |
3 |
flex-direction: column; |
4 |
}
|
5 |
}
|
Conclusión
Estos pasos deben ser suficientes para hacerte comenzar a usar esta tecnica en tus sitios web. Ahora que sé cómo hacerlo, estoy buscando todo tipo de lugares para colocar estos paneles desplazables.
Para ver esto correctamente, mira el demo en Codepen. También visita el rediseño no oficial de Stylus que construí usando esta técnica.
¿Cómo te ves usando esto?
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!
