Foundation simplifica tu desarrollo web

Advanced technology simplifies your world
Foundation 5
Taller de formación
27/03/2014

@pixelinmind
es.linkedin.com/in/albertogarciaruiz/
Alberto García Ruiz | Director Creativo en @Cycle_IT
Algo sobre mí

Contenidos
• ¿Qué es Foundation?
• Características principales
• Toolkit esencial
• Flujo de trabajo típico
• Primeros pasos
• Ejercicio 1: Layouts con Grid
• Ejercicio 2: Menú de navegación
• Ejercicio 3: Interchange
• Off-Canvas
• Showcase

A quién va dirigida esta presentación
• Diseñadores de sitios o aplicaciones web que quieren crear desde
prototipos navegables con código facilón, hasta sitios web completos y
perfectamente acabados.
• Desarrolladores web que aprendieron un poquito de CSS pero no lo
suficiente como para resolver son soltura layouts más o menos
complejos y mucho menos responsivos.
• CSS Pros o gurús de las hojas de estilo que están hasta el gorro de
reinventar la rueda y quieren focalizarse en lo que realmente aporta
valor.
• Equipos de desarrollo cuyos miembros cuentan con diferente nivel de
CSS y que agradecen el uso de plantillas compartidas.

¿Qué es Foundation?
The most advanced responsive front-end framework in the world.
Quickly create prototypes and production code for sites and apps
that work on any kind of device.
“
”

¿Qué es Foundation?
Colección de herramientas (framework), desarrollada por ZURB, para crear
sitio y aplicaciones web más rápido y mejor.
El primer framework CSS responsivo.
Contiene plantillas HTML y clases CSS para tipografía, formularios, botones,
navegación y otros componentes de interfaz.
Hace uso de extensiones JavaScript como jQuery.

Características generales
• Comportamiento consistente
• Ideal para el layout base
• Mobile-first
• Creado con SASS
• Peso ajustable (JS modular)
• OOCSS (Object Oriented CSS)
• Pocas dependencias de terceros
• Es open-source
https://github.com/zurb/foundation
• Plantillas ready to use
• Bien documentado
• Canales de soporte y foros

Popularidad
El framework responsive CSS para desarrollo web
más popular... tras Bootstrap
+65K + 23k + 500
+15K + 3k + 434
Ver ránking en cssdb

Toolkit esencial
• Un navegador web, como Firefox, Chrome, …
• Un editor de texto o código: Notepad, SublimeText, TextEdit…
• El framework Foundation 5: entrar en la web de Foundation y
descargar el paquete completo.
Opcional:
• Para probar y depurar la versión mobile es recomendable conectar el Smartphone vía usb y usar
las características de depuración en dispositivo de Chrome
• Para editar los ficheros SASS necesitaremos un compilador (ej. Rubi) y el plugin Sass for ST2

Flujo de trabajo típico
1. Descomprimir el paquete foundation-5.2.1.zip en la carpeta de
desarrollo del proyecto
2. Definir la navegación y layout básico del site
3. Añadir contenido (textos, imágenes...)
4. Añadir estilos (ya sean directos de librerías o propios)
5. Añadir funcionalidad / comportamiento
6. Probar el site tanto en dispositivo móvil como en desktop (recordar:
mobile-first!)

Primeros pasos con Foundation: los ficheros
index.html
robots.txt
humans.txt
/css/
/css/foundation.css
/css/foundation.min.css
/css/normalize.css
/img/
/js/
/js/foundation.min.js
/js/foundation/
/js/vendor/
/js/vendor/fastclick.js
/js/vendor/jquery.cookie.js
/js/vendor/jquery.js
/js/vendor/modernizr.js
/js/vendor/placeholder.js
página de inicio, con un layout básico a modo de
ejemplo (grid, buttons, etc)
librería de hojas de estilo CSS.
librería JS combinada (core + plugins) y minificada
librería JS en módulos
librerías de terceros utilizadas por Foundation

Estructura HTML inicial
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Foundation 5</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Inicialización de Foundation

Inicialización personalizada
$(document).foundation({
reveal : {
animation_speed: 500
},
tooltip : {
disable_for_touch: true
},
topbar : {
custom_back_text: false,
is_hover: false,
mobile_show_parent_link: true
}
});
Más info en: http://foundation.zurb.com/docs/javascript.html

OOCSS
<div class="container darker-grey light-border small-padding">
<div class="row smaller-fonts">
<div class="four columns"></div>
</div>
</div>
Foundation se somete al estilo de desarrollo propuesto por OOCSS:
cada comportamiento o apariencia UI que quieras aplicar sobre
elementos HTML se realiza aplicando su clase correspondiente.
En definitiva así es como Foundation hace su magia: al
igual que otros frameworks CSS, simplemente indicando
nombres semánticos de clases CSS sobre elementos HTML
conseguimos resultados sorprendentes.

Primer ejercicio: Grid básico
El módulo Grid es quizás el más importante de los que conforman Foundation.
Se basa en una rejilla de 12 columnas diseñadas para adaptarse a cualquier
dispositivo, adaptando de forma automática el contenido a la pantalla.
Soporta anidamiento, ordenación y offsets de forma sumamente sencilla.
Vamos a montar un layout clásico
de 2 columnas con:
• Header
• Main content area
• Side content area
• Footer

El módulo Grid es quizás el más importante de los
que conforman Foundation. Se basa en una rejilla
de 12 columnas diseñadas para adaptarse a
cualquier dispositivo, adaptando de forma
automática el contenido a la pantalla.
Soporta anidamiento,
ordenación y offsets de
forma sumamente sencilla.

Empezamos definiendo un contenedor con 3 filas:
<div id="container">
<div class="row">-</div>
</div>
No hace falta visualizar esto en el navegador para saber que
por ahora no tenemos nada…

Empezamos aplicando contenido y clases de Foundation en el Header:
<div class="row">
<div class="large-12 columns">Header</div>
</div>
Continuamos con el contenido central:
<div class="row">
<div class=”large-8 columns”> Lorem ipsum dolor sit amet,
consectetur adipiscing elit...</div>
<div class=”large-4 columns”> In at urna sit amet nisi tincidunt
molestie...</div>
</div>
Y por último el Footer:
<div class="row">
<div class=”large-12 columns”>Copyright © Cycle Information
Technology S.L. 2014.</div>
</div>

Refrescando nuestra página html en el navegador veremos que con estas
simples etiquetas hemos logrado el layout que buscábamos; ¡y además
responsivo!

Incluyendo estilos tipográficos
Foundation incluye estilos para todos los elementos header
<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is a small header.</h5>
<h6>h6. This is a tiny header.</h6>
Y también es posible resaltar determinados encabezados con la etiqueta
subheader
<h1 class="subheader">h1.subheader</h1>
<h2 class="subheader">h2.subheader</h2>

Podemos insertar texto pequeño en los encabezados mediante la
etiqueta small
<h1>h1. <small>Small segment header.</small></h1>
<h2>h2. <small>Small segment header.</small></h2>
El estilo de párrafo p, negrita strong y cursiva em también están
harmonizados.
Los enlaces a por defecto muestran un estilo con color azul basado en el color
primario de Foundation en SASS.
Foundation da formato elegante a las citas a través de los elementos
blockquote y cite
<blockquote>Those people who think they know everything are a
great annoyance to those of us who do.<cite>Isaac
Asimov</cite></blockquote>

Estilos de botón

<a href="#" class="button [tiny small large]">Default Button</a>

<a href="#" class="button [secondary success alert]">Color Button</a>

<a href="#" class="button [radius round]">Radius Button</a>

<a href="#" class="button disabled">Disabled Button</a>

<a href="#" class="button expand">Expanded Button</a>

Segundo ejercicio: Crear un menú de
navegación
Foundation 5 incorpora etiquetas para crear un menú de navegación principal
para nuestro site o webapp, y lo mejor de todo: es responsivo.
<nav>
<section>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="/css/">CSS</a></li>
<li><a href="/js/">JavaScript</a></li>
<li><a href="/jquery/">jQuery</a></li>
</ul>
</section>
</nav>

Ahora añadimos las etiquetas que harán la magia:
<nav class="top-bar" data-topbar>
<section class="top-bar-section">
<ul class="left">
<li><a href="/html/">HTML</a></li>
<li><a href="/css/">CSS</a></li>
<li><a href="/js/">JavaScript</a></li>
<li><a href="/jquery/">jQuery</a></li>
</ul>
</section>
</nav>

Por último podemos añadir dos elementos más: un título a la izquierda y un
botón a la derecha para mostrar el menú en dispositivos pequeños:
<ul class="title-area">
<li class="name">
<h1><a href="#">Top Bar Title </a></h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
</ul>
Más info en: http://foundation.zurb.com/docs/components/topbar.html

Tercer ejercicio:
Interchange para imágenes responsivas
Interchange hace uso de media queries para cargar de forma dinámica el
contenido responsivo apropiado para el navegador del usuario.
Esto se gestiona mediante la etiqueta data-interchange

Empecemos por el caso de uso más sencillo y típico: intercambiar imágenes:
<img data-interchange="[img/test_landscape_1@1x.jpg, (small)],
[img/test_landscape_1@2x.jpg, (medium)],
[img/test_landscape_1@4x.jpg, (large)]" width="100%">
El primer parámetro son permite definir la imagen a cargar, mientras que el
segundo define en qué pantalla se debe mostrar (small, médium o large);
también es posible definir los puntos de corte de manera precisa:
<img data-interchange img/test_landscape_1@1x.jpg, (only screen and
(min-width: 1px))], [img/test_landscape_1@2x.jpg, (only screen and
(min-width: 480px))], ))], [img/test_landscape_1@4x.jpg, (only
screen and (min-width: 960px))]">
Más info en: http://foundation.zurb.com/docs/components/interchange.html

Off Canvas Layouts
Más info en: http://foundation.zurb.com/docs/components/offcanvas.html

Bonus
Site oficial de Foundation
Angular para Foundation
Popular CSS Libraries
Mobile First by Luke Wroblewsky

Foundation simplifica tu desarrollo web

Foundation simplifica tu desarrollo web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (10)

Similaire à Foundation simplifica tu desarrollo web

Similaire à Foundation simplifica tu desarrollo web (20)

Dernier

Dernier (20)

Foundation simplifica tu desarrollo web