36
Advanced technology simplifies your world Foundation 5 Taller de formación 27/03/2014
Advanced technology simplifies your world
Foundation 5
Taller de formación27/03/2014
@pixelinmindes.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 ficherosindex.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 minificadalibrerí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> <!-- body content here --> <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 class="four columns"></div> <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
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.
Primer ejercicio: Grid básico
Empezamos definiendo un contenedor con 3 filas:
<div id="container"> <div class="row">-</div> <div class="row">-</div> <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
<!-- Size Classes --><a href="#" class="button [tiny small large]">Default Button</a><!-- Color Classes --><a href="#" class="button [secondary success alert]">Color Button</a><!-- Radius Classes --><a href="#" class="button [radius round]">Radius Button</a><!-- Disabled Class --><a href="#" class="button disabled">Disabled Button</a><!-- Expand Class --><a href="#" class="button expand">Expanded Button</a>
Segundo ejercicio: Crear un menú de navegaciónFoundation 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/[email protected], (small)], [img/[email protected], (medium)], [img/[email protected], (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/[email protected], (only screen and (min-width: 1px))], [img/[email protected], (only screen and (min-width: 480px))], ))], [img/[email protected], (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
