Anteriormente ya hemos hablado sobre la importancia del diseño adaptable, y hoy queremos hacer una introducción al framework que utilizamos para realizar nuestro frontend en Infranetworking: Foundation. Veremos las principales características de maquetado que nos ofrece para hacer nuestro desarrollo de forma simple y que esté preparado para una mejor experiencia de nuestros usuarios.
Instalación de Foundation
Entramos en la carpeta de nuestro proyecto. En este caso a nuestra carpeta la llamaremos foundation, y recomendamos la configuración con Bower + GruntJs + Sass, así que continuamos con esta instalación.
Instalar Bower
npm install -g bower
Estos paquetes son muy importantes para poder trabajar de forma ordenada en nuestro proyecto. Utilizar Bower nos permite bajar librerías con sus dependencias de forma sencilla y sin preocuparnos por descargar los archivos .zip y luego descomprimir y organizar.
Instalar Foundation desde Bower
Ahora debes crear un archivo llamado bower.json, en este archivo se define la configuración y la versión de tus dependencias para tu proyecto.
{
"name": "Foundation Demo",
"version": "0.0.1",
"authors": [
"Infranetworking.com"
],
"description": "Demo Foundation",
"main": "index.html",
"keywords": [
"foundation"
],
"license": "MIT",
"dependencies": {
"foundation": "~5.5.2"
}
}
Luego puedes instalar estas dependencias con solo ejecutar lo siguiente en la consola:
bower install
Ahora ya tenemos nuestras dependencias instaladas en una carpeta llamada bower_components.
Crear Layout importando las librerías necesarias
Creamos un archivo index.html y colocamos el siguiente código, en el mismo solo importamos los estilos y los scripts necesarios para utilizar Foundation.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Foundation Ejemplo</title> <link rel="stylesheet" href="bower_components/foundation/css/normalize.css"> <link rel="stylesheet" href="bower_components/foundation/css/foundation.min.css"> </head> <body> <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/foundation/js/foundation.min.js"></script> <script> $(document).foundation(); </script> </body> </html>
Foundation y el Diseño adaptable – Grid
Un concepto para desarrollar con el principio de diseño adaptable con Foundation es conocer qué son las Grid, simplemente las podemos definir como las secciones de nuestro sitio que serán divididas en 12 columnas, este será nuestro patrón de diseño.
Se crea cada bloque de nuestro sitio con la definición <div class=»row»>, esto creará un bloque horizontal. Ahora dentro de este bloque definiremos nuestras columnas y sus respectivos tamaños para cada dispositivo, desde las mismas clases de nuestros divs internos podemos definir qué tamaño van a tener para cuando estén en dispositivos small (celulares), medium (tablets) y large (PC), la idea es que la suma de nuestras clases para cada dispositivo siempre sea 12, que vendría siendo nuestro patrón de diseño.
Ahora conociendo esto podemos ver un ejemplo de un bloque creado con estas definiciones.
<div class="row"> <div class="small-2 medium-3 large-4 columns">...</div> <div class="small-4 medium-3 large-4 columns">...</div> <div class="small-6 medium-6 large-4 columns">...</div> </div>
El código anterior lo podemos describir de la siguiente manera:
- Un bloque de tres columnas que inicia con un div con la clase row, este nos colocará un bloque horizontal
- Adentro de nuestro bloque existirán 3 columnas en donde las mismas tienen definidas cuatro clases: small , medium y large que se utilizarán para saber los tamaños de las columnas para cada dispositivo, y la clase columns que hace que nuestros div sean flotantes.
Ejemplo simple de Foundation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Foundation Ejemplo</title>
<link rel="stylesheet" href="bower_components/foundation/css/normalize.css">
<link rel="stylesheet" href="bower_components/foundation/css/foundation.min.css">
<style>
body{
margin-top:50px;
}
.rojo{background:#F90000}
.azul{background:#6DAFDC}
.amarillo{background:#E8E806}
</style>
</head>
<body>
<div class="row">
<div class="small-12 medium-6 large-4 columns rojo">Rojo</div>
<div class="small-12 medium-6 large-4 columns azul">Azul</div>
<div class="small-12 medium-12 large-4 columns amarillo">Amarillo</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Ahora tenemos este resultado para los tres tamaños de los dispositivos, como dijimos nuestro row mide 12 columnas.
Desktop – Solo tomará las columnas de la clase large-x , entonces con cada columna interna que tiene large-4 vamos a obtener este resultado:
Tablets – Solo tomará las columnas de la clase medium-x , entonces con cada columna interna que tiene medium-6 y medium-12 vamos a obtener este resultado:
Móviles – Solo tomará las columnas de la clase small-x, entonces con cada columna interna que tiene small-12 vamos a obtener este resultado:
Como podemos ver, al utilizar Foundation logramos tener un sitio profesional y con diseño adaptable de una forma bastante simple y manteniendo un patrón de diseño. Recordemos siempre tener en mente cuántas columnas tendrá algún elemento en cada tipo de resolución y con esta premisa hacer un diseño adaptable no será tan complejo, ahora de aquí en adelante ya puedes integrar Foundation a tu proyecto y tener tu sitio listo para todas las resoluciones.
¿Qué te pareció esta introducción a Foundation? ¿Crees que lo podrás aplicar a tus sitios?
