Introduccinafoundation5 140430124249 Phpapp02

Advanced technology simplifies your world
Foundation 5
Taller de formación
27/03/2014
Algo sobre mí
Alberto García Ruiz | Director Creativo en @Cycle_IT
@pixelinmind
es.linkedin.com/in/albertogarciaruiz/
Contenidos
• ¿Qué es Foundation? • Ejercicio 1: Layouts con Grid
• Características principales • Ejercicio 2: Menú de navegación
• Toolkit esencial • Ejercicio 3: Interchange
• Flujo de trabajo típico • Off-Canvas
• Primeros pasos • 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 • Pocas dependencias de terceros
• Ideal para el layout base • Es open-source

https://github.com/zurb/foundation
• Mobile-first
• Plantillas ready to use
• Creado con SASS
• Bien documentado
• Peso ajustable (JS modular)
• Canales de soporte y foros
• OOCSS (Object Oriented CSS)
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 página de inicio, con un layout básico a modo de
robots.txt ejemplo (grid, buttons, etc)
humans.txt
/css/
/css/foundation.css
/css/foundation.min.css librería de hojas de estilo CSS.
/css/normalize.css
/img/
/js/
/js/foundation.min.js librería JS combinada (core + plugins) y minificada
/js/foundation/
librería JS en módulos
/js/vendor/
/js/vendor/fastclick.js
/js/vendor/jquery.cookie.js
/js/vendor/jquery.js librerías de terceros utilizadas por Foundation
/js/vendor/modernizr.js
/js/vendor/placeholder.js
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(); Inicialización de Foundation
</script>
</body>
</html>
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
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.
<div class="container darker-grey light-border small-padding">
<div class="row smaller-fonts">
<div class="four columns"></div>
</div>
</div>
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

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

Introduccinafoundation5 140430124249 Phpapp02

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introduccinafoundation5 140430124249 Phpapp02

Cargado por

Copyright:

Formatos disponibles

Advanced technology simplifies your world

Alberto García Ruiz | Director Creativo en @Cycle_IT

• Características principales • Ejercicio 2: Menú de navegación

• Toolkit esencial • Ejercicio 3: Interchange

• Flujo de trabajo típico • Off-Canvas

• Primeros pasos • Showcase

• Desarrolladores web que aprendieron un poquito de CSS pero no lo

• Equipos de desarrollo cuyos miembros cuentan con diferente nivel de

“ The most advanced responsive front-end framework in the world.

El primer framework CSS responsivo.

Contiene plantillas HTML y clases CSS para tipografía, formularios, botones,

Hace uso de extensiones JavaScript como jQuery.

• Ideal para el layout base • Es open-source

+65K + 23k + 500

Ver ránking en cssdb

• Un editor de texto o código: Notepad, SublimeText, TextEdit…

• El framework Foundation 5: entrar en la web de Foundation y

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:

<link rel="stylesheet" href="css/normalize.css">

Más info en: http://foundation.zurb.com/docs/javascript.html

En definitiva así es como Foundation hace su magia: al

Soporta anidamiento, ordenación y offsets de forma sumamente sencilla.

Vamos a montar un layout clásico

No hace falta visualizar esto en el navegador para saber que

Continuamos con el contenido central:

Y por último el Footer:

<h1>h1. This is a very large header.</h1>

Y también es posible resaltar determinados encabezados con la etiqueta

El estilo de párrafo p, negrita strong y cursiva em también están

Foundation da formato elegante a las citas a través de los elementos

<blockquote>Those people who think they know everything are a

<nav class="top-bar" data-topbar>

Más info en: http://foundation.zurb.com/docs/components/topbar.html

Esto se gestiona mediante la etiqueta data-interchange

<img data-interchange="[img/test_landscape_1@1x.jpg, (small)],

El primer parámetro son permite definir la imagen a cargar, mientras que el

<img data-interchange img/test_landscape_1@1x.jpg, (only screen and

Más info en: http://foundation.zurb.com/docs/components/interchange.html

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

The Honors Society

Site oficial de Foundation

Angular para Foundation

Popular CSS Libraries

Mobile First by Luke Wroblewsky

También podría gustarte