Se lee en 2 minutos

Si has llegado hasta aquí ya sabrás que Foundation es un framework que nos ayuda mucho a la hora de hacer nuestros layouts y desarrollos web, en especial en el tema responsive.

En esta ocasión voy a centrarme en una técnica muy útil para manipular los contenidos de nuestras páginas.

Consiste en mostrar u ocultar elementos de la interfaz en función del tamaño (ancho) disponible. Se podría hacer también controlando las media queries y poniendo los correspondientes “display:none;” etc. Pero con este método “ni siquiera tendremos que pensar”.
Foundation cuenta con una serie de clases listas para ser usadas y cuyos nombres explican perfectamente su funcionalidad:

Estas clases hacen que se muestre el elemento sobre el que son aplicadas. En el caso del primer bloque, solo se mostrarán para el tamaño indicado. En el segundo caso los elementos sobre los que apliquemos dichas clases se mostrarán solo si el tamaño del visor es de igual o superior tamaño al indicado por el nombre de la clase.

Vamos a poner un ejemplo sencillo para ponerlo en práctica. Lo primero que haremos siempre es cargar en nuestro html tanto el CSS como el JavaScript que “hacen la magia”. En este caso los voy a cargar directamente desde un CDN de Foundation, para no tener que descargar y adjuntar dichos archivos.

Código del ejemplo:

Ver el ejemplo

(Cambia el tamaño del navegador para ir viendo los resultados )

Como ves, mostramos elementos solo en ciertas condiciones o “a partir” de ciertas condiciones. Tenemos disponibles clases para hacer justo lo contrario:

Combinando el uso de estas clases podemos mostrar u ocultar cualquier elemento de una página dependiendo del tamaño disponible del visor.

 

Suscríbete a tonalidad.es