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 pas...
A quién va dirigida esta presentación
• Diseñadores de sitios o aplicaciones web que quieren crear desde
prototipos navega...
¿Qué es Foundation?
The most advanced responsive front-end framework in the world.
Quickly create prototypes and productio...
¿Qué es Foundation?
Colección de herramientas (framework), desarrollada por ZURB, para crear
sitio y aplicaciones web más ...
Características generales
• Comportamiento consistente
• Ideal para el layout base
• Mobile-first
• Creado con SASS
• Peso...
Popularidad
El framework responsive CSS para desarrollo web
más popular... tras Bootstrap
+65K + 23k + 500
+15K + 3k + 434...
Toolkit esencial
• Un navegador web, como Firefox, Chrome, …
• Un editor de texto o código: Notepad, SublimeText, TextEdit...
Flujo de trabajo típico
1. Descomprimir el paquete foundation-5.2.1.zip en la carpeta de
desarrollo del proyecto
2. Defini...
Primeros pasos con Foundation: los ficheros
index.html
robots.txt
humans.txt
/css/
/css/foundation.css
/css/foundation.min...
Estructura HTML inicial
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0...
Inicialización personalizada
$(document).foundation({
reveal : {
animation_speed: 500
},
tooltip : {
disable_for_touch: tr...
OOCSS
<div class="container darker-grey light-border small-padding">
<div class="row smaller-fonts">
<div class="four colu...
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 r...
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 r...
Primer ejercicio: Grid básico
Empezamos definiendo un contenedor con 3 filas:
<div id="container">
<div class="row">-</div...
Empezamos aplicando contenido y clases de Foundation en el Header:
<div class="row">
<div class="large-12 columns">Header<...
Refrescando nuestra página html en el navegador veremos que con estas
simples etiquetas hemos logrado el layout que buscáb...
Incluyendo estilos tipográficos
Foundation incluye estilos para todos los elementos header
<h1>h1. This is a very large he...
Podemos insertar texto pequeño en los encabezados mediante la
etiqueta small
<h1>h1. <small>Small segment header.</small><...
Estilos de botón
<!-- Size Classes -->
<a href="#" class="button [tiny small large]">Default Button</a>
<!-- Color Classes...
Segundo ejercicio: Crear un menú de
navegación
Foundation 5 incorpora etiquetas para crear un menú de navegación principal...
Ahora añadimos las etiquetas que harán la magia:
<nav class="top-bar" data-topbar>
<section class="top-bar-section">
<ul c...
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 disp...
Tercer ejercicio:
Interchange para imágenes responsivas
Interchange hace uso de media queries para cargar de forma dinámic...
Empecemos por el caso de uso más sencillo y típico: intercambiar imágenes:
<img data-interchange="[img/test_landscape_1@1x...
Off Canvas Layouts
Más info en: http://foundation.zurb.com/docs/components/offcanvas.html
Showcase
Jacqueline West
Showcase
Mister Jekyll
Showcase
The Honors Society
Showcase
Swizzle
Bonus
Site oficial de Foundation
Angular para Foundation
Popular CSS Libraries
Mobile First by Luke Wroblewsky
Introducción a Foundation 5
Introducción a Foundation 5
Introducción a Foundation 5
Upcoming SlideShare
Loading in...5
×

Introducción a Foundation 5

2,891

Published on

Presentación del taller de formación continua de Cycle-IT: "Introducción a Foundation 5".

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,891
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducción a Foundation 5

  1. 1. Advanced technology simplifies your world Foundation 5 Taller de formación 27/03/2014
  2. 2. @pixelinmind es.linkedin.com/in/albertogarciaruiz/ Alberto García Ruiz | Director Creativo en @Cycle_IT Algo sobre mí
  3. 3. 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
  4. 4. 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.
  5. 5. ¿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. “ ”
  6. 6. ¿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.
  7. 7. 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
  8. 8. Popularidad El framework responsive CSS para desarrollo web más popular... tras Bootstrap +65K + 23k + 500 +15K + 3k + 434 Ver ránking en cssdb
  9. 9. 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
  10. 10. 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!)
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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.
  15. 15. 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
  16. 16. 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.
  17. 17. 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…
  18. 18. 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>
  19. 19. 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!
  20. 20. 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>
  21. 21. 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>
  22. 22. 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>
  23. 23. 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>
  24. 24. 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>
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. Off Canvas Layouts Más info en: http://foundation.zurb.com/docs/components/offcanvas.html
  29. 29. Showcase Jacqueline West
  30. 30. Showcase Mister Jekyll
  31. 31. Showcase The Honors Society
  32. 32. Showcase Swizzle
  33. 33. Bonus Site oficial de Foundation Angular para Foundation Popular CSS Libraries Mobile First by Luke Wroblewsky
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×