Introducción a Foundation 5

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

1. Foundation 5 Taller de formación 27/03/2014

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

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. 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. ¿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. ¿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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

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

29. Showcase Jacqueline West

30. Showcase Mister Jekyll

31. Showcase The Honors Society

32. Showcase Swizzle

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