Si has estado al tanto del trabajo que ZURB ha estado haciendo con Foundation for Apps, es posible que hayas notado que la mayoría de sus plantillas de demostración tienen algunos paneles deslizables bastante ingeniosos..

Estos son en realidad bastante sorprendentes, especialmente para aplicaciones híbridas. ¿Recuerdas lo útiles que eran los marcos antes de que pasaran de moda? Bueno, ahora puede recuperar esa funcionalidad, pero de una manera receptiva.

Después de algunos retoques, pude extraer la funcionalidad básica de estos paneles y eso es lo que aprenderemos a recrear hoy..

1. Comenzar por el principio

Comenzaremos con un marcado bastante básico. La parte más importante es un contenedor de envoltura para envolver toda la página..

 
  
 
Contenido
 
 lipsum ... 
 
 
 

2. CSS

Las cosas se ponen interesantes en el CSS bastante rápido. Primero, queremos nuestro html y cuerpo selectores para ser altura: 100%. Estamos haciendo esto para configurar el .envolver elemento que estableceremos en altura: 100vh. Con la unidad vh, estamos diciendo que queremos que esta aplicación ocupe toda la altura de la ventana gráfica, por lo que los elementos que contiene se verán obligados a desplazarse. 

También pondremos .envolver ser pantalla: flex para que podamos darles a los niños elementos flexionar propiedad.

html, cuerpo altura: 100%;  .wrap altura: 100vh; pantalla: flexión; 

Nota: En lugar de recordar todas las diversas sintaxis de Flexbox a lo largo de los años, intente utilizar Autoprefixer. Entonces, solo necesita usar la sintaxis de W3C y hará el resto para admitir tantos navegadores como sea posible..

3. Conseguir flexible

Ahora que tenemos esta configuración de "cáscara", podemos comenzar a aplicarle elementos flex muy estándar. El único truco es asegurarse de configurar estos elementos secundarios en overflow-y: scroll para hacer cumplir una barra de desplazamiento.

main flex: 1; pantalla: flexión;  aparte, el artículo overflow-y: scroll; relleno: 2em;  a un lado flex: 1;  articulo flex: 2; 

4. Hacerse sensible

Vayamos un paso más allá y hagamos que nuestro sitio sea receptivo apilando la barra lateral sobre el área de contenido para dispositivos más pequeños. Es tan fácil como agregar una regla CSS dentro de una consulta de medios.

@media (ancho máximo: 800 px) main flex-direction: column; 

Conclusión

Estos pasos deberían ser suficientes para comenzar a utilizar esta técnica en sus sitios web. Ahora que sé cómo hacerlo, estoy encontrando todo tipo de lugares para colocar estos paneles desplazables.

Para ver esto en acción correctamente, echa un vistazo a la demostración en Codepen. También, eche un vistazo al rediseño no oficial de Stylus que construí usando esta técnica.

¿Cómo te ves usándolo??