Intro Ducci Na Foundation 5

Advanced technology simplifies your world
Foundation 5
Taller de formacin
27/03/2014
Algo sobre m
Alberto Garca Ruiz | Director Creativo en @Cycle_IT

@pixelinmind
es.linkedin.com/in/albertogarciaruiz/
Contenidos
Qu es Foundation?
Caractersticas principales
Toolkit esencial
Flujo de trabajo tpico
Primeros pasos
Ejercicio 1: Layouts con Grid
Ejercicio 2: Men de navegacin
Ejercicio 3: Interchange
Off-Canvas
Showcase
A quin va dirigida esta presentacin
Diseadores de sitios o aplicaciones web que quieren crear desde

prototipos navegables con cdigo faciln, 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 ms o menos
complejos y mucho menos responsivos.
CSS Pros o gurs de las hojas de estilo que estn 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?
Coleccin de herramientas (framework), desarrollada por ZURB, para
crear sitio y aplicaciones web ms rpido y mejor.
El primer framework CSS responsivo.
Contiene plantillas HTML y clases CSS para tipografa, formularios, botones,
navegacin y otros componentes de interfaz.
Hace uso de extensiones JavaScript como jQuery.
Caractersticas 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
Popularidad
El framework responsive CSS para desarrollo web
ms popular... tras Bootstrap
+65K
+ 23k
+ 500
+15K
+ 3k
+ 434
Ver rnking en cssdb
Toolkit esencial
Un navegador web, como Firefox, Chrome,
Un editor de texto o cdigo: Notepad, SublimeText, TextEdit
El framework Foundation 5: entrar en la web de Foundation y

descargar el paquete completo.
Opcional:
Para probar y depurar la versin mobile es recomendable conectar el Smartphone va usb y
usar las caractersticas de depuracin en dispositivo de Chrome
Para editar los ficheros SASS necesitaremos un compilador (ej. Rubi) y el plugin Sass for ST2
Flujo de trabajo tpico

1. Descomprimir el paquete foundation-5.2.1.zip en la carpeta de
desarrollo del proyecto
2. Definir la navegacin y layout bsico del site
3. Aadir contenido (textos, imgenes...)
4. Aadir estilos (ya sean directos de libreras o propios)
5. Aadir funcionalidad / comportamiento
6. Probar el site tanto en dispositivo mvil como en desktop
(recordar: mobile-first!)
Primeros pasos con Foundation: los

ficheros
index.html
pgina de inicio, con un layout bsico a modo de
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
ejemplo (grid, buttons, etc)
librera de hojas de estilo CSS.
librera JS combinada (core + plugins) y minificada

librera JS en mdulos
libreras de terceros utilizadas por Foundation
Estructura HTML inicial
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=devicewidth, 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> Inicializacin
<script>
$(document).foundation();
</script>
</body>
de Foundation
Inicializacin 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
}
});
Ms 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 smallpadding">
<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 semnticos de clases CSS sobre elementos
HTML conseguimos resultados sorprendentes.
Primer ejercicio: Grid bsico

El mdulo Grid es quizs el ms importante de los que conforman
Foundation. Se basa en una rejilla de 12 columnas diseadas para
adaptarse a cualquier dispositivo, adaptando de forma automtica el
contenido a la pantalla.
Soporta anidamiento, ordenacin y offsets de forma sumamente sencilla.
Vamos a montar un layout clsico
de 2 columnas con:
Header
Main content area
Side content area
Footer

El mdulo Grid es quizs el ms importante de los
que conforman Foundation. Se basa en una rejilla
de 12 columnas diseadas para adaptarse a
cualquier dispositivo, adaptando de forma
automtica el contenido a la pantalla.
Soporta anidamiento,
ordenacin 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 pgina html en el navegador veremos que con estas

simples etiquetas hemos logrado el layout que buscbamos; y adems
responsivo!
Incluyendo estilos tipogrficos

Foundation incluye estilos para todos los elementos header
<h1>h1.
<h2>h2.
<h3>h3.
<h4>h4.
<h5>h5.
<h6>h6.
This
This
This
This
This
This
is
is
is
is
is
is
a
a
a
a
a
a
very large header.</h1>

large header.</h2>
medium header.</h3>
moderate header.</h4>
small header.</h5>
tiny header.</h6>
Y tambin es posible resaltar determinados encabezados con la etiqueta

subheader
<h1 class="subheader">h1.subheader</h1>
<h2 class="subheader">h2.subheader</h2>
Podemos insertar texto pequeo 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 prrafo p, negrita strong y cursiva em tambin estn

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 travs 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 botn


<a href="#" class="button

Button</a>



[tiny small large]">Default Button</a>

[secondary success alert]">Color
[radius round]">Radius Button</a>
disabled">Disabled Button</a>
expand">Expanded Button</a>
Segundo ejercicio: Crear un men de

navegacin
Foundation 5 incorpora etiquetas para crear un men de navegacin
principal para nuestro site o webapp, y lo mejor de todo: es responsivo.

<nav>
<section>
<ul>
<li><a
<li><a
<li><a
<li><a
</ul>
</section>
</nav>
href="#">HTML</a></li>
href="/css/">CSS</a></li>
href="/js/">JavaScript</a></li>
href="/jquery/">jQuery</a></li>
Ahora aadimos las etiquetas que harn 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 aadir dos elementos ms: un ttulo a la izquierda y un

botn a la derecha para mostrar el men en dispositivos pequeos:
<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>
Ms info en: http://foundation.zurb.com/docs/components/topbar.html
Tercer ejercicio:
Interchange para imgenes responsivas
Interchange hace uso de media queries para cargar de forma dinmica el
contenido responsivo apropiado para el navegador del usuario.
Esto se gestiona mediante la etiqueta data-interchange
Empecemos por el caso de uso ms sencillo y tpico: intercambiar

imgenes:
<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 parmetro son permite definir la imagen a cargar, mientras que

el segundo define en qu pantalla se debe mostrar (small, mdium o
large); tambin 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))]">
Ms info en: http://foundation.zurb.com/docs/components/interchange.html
Off Canvas Layouts
Ms info en: http://foundation.zurb.com/docs/components/offcanvas.html
Showcase
Jacqueline West
Showcase
Mister Jekyll
Showcase
The Honors Society
Showcase
Swizzle
Bonus
Site oficialdeFoundation
Angular para Foundation
Popular CSS Libraries
Mobile Firstby Luke Wroblewsky

Intro Ducci Na Foundation 5

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Intro Ducci Na Foundation 5

Загружено:

Авторское право:

Доступные форматы

Advanced technology simplifies your world

Alberto Garca Ruiz | Director Creativo en @Cycle_IT

Flujo de trabajo tpico

Ejercicio 1: Layouts con Grid

Ejercicio 2: Men de navegacin

A quin va dirigida esta presentacin

Diseadores de sitios o aplicaciones web que quieren crear desde

Desarrolladores web que aprendieron un poquito de CSS pero no lo

Equipos de desarrollo cuyos miembros cuentan con diferente nivel

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

Ideal para el layout base

Creado con SASS

Peso ajustable (JS modular)

OOCSS (Object Oriented CSS)

Pocas dependencias de terceros

Un navegador web, como Firefox, Chrome,

Un editor de texto o cdigo: Notepad, SublimeText, TextEdit

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

Flujo de trabajo tpico

Primeros pasos con Foundation: los

ejemplo (grid, buttons, etc)

librera de hojas de estilo CSS.

librera JS combinada (core + plugins) y minificada

Estructura HTML inicial

Ms info en: http://foundation.zurb.com/docs/javascript.html

En definitiva as es como Foundation hace su magia: al

Primer ejercicio: Grid bsico

Primer ejercicio: Grid bsico

Primer ejercicio: Grid bsico

No hace falta visualizar esto en el navegador para saber que

Empezamos aplicando contenido y clases de Foundation en el Header:

Continuamos con el contenido central:

Y por ltimo el Footer:

Refrescando nuestra pgina html en el navegador veremos que con estas

Incluyendo estilos tipogrficos

very large header.</h1>

Y tambin es posible resaltar determinados encabezados con la etiqueta

Podemos insertar texto pequeo en los encabezados mediante la

El estilo de prrafo p, negrita strong y cursiva em tambin estn

[tiny small large]">Default Button</a>

Segundo ejercicio: Crear un men de

principal para nuestro site o webapp, y lo mejor de todo: es responsivo.

Ahora aadimos las etiquetas que harn la magia:

Por ltimo podemos aadir dos elementos ms: un ttulo a la izquierda y un

Ms info en: http://foundation.zurb.com/docs/components/topbar.html

Empecemos por el caso de uso ms sencillo y tpico: intercambiar

El primer parmetro son permite definir la imagen a cargar, mientras que

Off Canvas Layouts

Ms info en: http://foundation.zurb.com/docs/components/offcanvas.html

Вам также может понравиться