Spanish (Español) translation by Javier Salesi (you can also view the original English article)
En éste tutorial nos enfocaremos en codificar un maquetado PSD, usando el framework responsivo Skeleton. Hay muchísimos tutoriales sobre como codificar un diseño usando HTML y CSS, frecuentemente con un agregado de JavaScript, pero el propósito principal de éste tutorial es hacer las cosas utilizando la versión mas reciente del Skeleton framework (2.0.4). ¡Han habido algunas magníficas mejoras desde la última vez que lo cubrimos!
Antes que nada, dejame presentar a Skeleton, después nos adentraremos en la codificación.
¿Qué es el Skeleton Boilerplate?
Skeleton es el invento de Dave Gamache. Es una grilla fluída de 12 columnas, con una anchura máxima predeterminada de 960px, tipografía básica y estilos mínimos para elementos comunes HTML como botones, enlaces, casillas y áreas de texto.
Su fortaleza recae en el hecho que es un framework CSS ligero. En tan solo casi 400 líneas de código, Skeleton está diseñado para ser un punto de inicio, no un framework exhaustivo con todo el diseño UI como Bootstrap, Foundation o SemanticUI.
¿Por qué utilizar Skeleton?
Porque es sencillo de usar, y es un magnífico inicio para crear tus propios frameworks responsivos.
¿Y qué hay de nuevo?
Dave Gamache presentó y actualizó varias características en Skeleton v2.0:
- clases utilitarias como .
u-full-width,.u-max-full-widthque es perfecto para contenedores de 100% de ancho - tipografía
- botones
- formularios
- listas
- tablas
Comenzando
Durante éste tutorial vamos a codificar el diseño mostrado arriba, hecho por Samir Timezguida. El recorrido comprenderá:
- Descargar Skeleton y escribir nuestro marcado HTML
- Jalar las imágenes del PSD y escribir el CSS
- Agregar un toque de JavaScript que añadirá interactividad
Comencemos por descargar el framework Skeleton de www.getskeleton.com y obtener el PSD de los archivos fuente.
Bosquejando y Planeando
Pudieras preferir un enfoque diferente, pero me gusta comenzar con bosquejar el maquetado para visualizar cada sección. Hay muchas secciones por todo el maquetado:
- Hero
- Introducción
- Creatividad
- Trabajo
- Ayuda
- Clientes
- Sobre
- Video
- Por qué nosotros
- Cita
- Comuníquese
- Contacto
- Pie
Éste es el resultado de mi boceto para la estructura HTML deseada:
Secciones
Para cada sección haremos un contenedor que llenará el ancho de la ventana, con el nombre de la sección como su nombre de clase. Dentro de él aprovecharemos Skeleton al crear la grilla para hacer un contenedor y un elemento contenedor de fila. El HTML para cada sección será una variante de ésto:
1 |
<section class="hero"> |
2 |
<div class="container"> |
3 |
|
4 |
<!-- html for this section goes here -->
|
5 |
|
6 |
</div>
|
7 |
</section>
|
Ahora es momento de tomar cada sección y agregar el marcado. No te preocupes por los estilos, imágenes, fuentes, etc, por ahora nos concentraremos solamente en la estructura HTML.
Menú
Para el menú, necesitamos agregar el ícono de la "hamburguesa" y una lista desordenada llena de enlaces internos. Cada enlace apuntará a una sección específica.
Nota: el ojo alerta entre ustedes puede reconocer las clases fa fa-bars en el elemento <i> para el ícono de navegación. Éstos son típicos íconos de Font Awesome, que implementaremos mas adelante en el proceso.
1 |
<nav class="navigation"> |
2 |
<a href="#" class="menu-icon"> |
3 |
<i class="fa fa-bars"></i> |
4 |
</a>
|
5 |
<ul class="main-navigation" role="navigation"> |
6 |
<li><a href="#hero">Home</a></li> |
7 |
<li><a href="#introduction">Introduction</a></li> |
8 |
<li><a href="#creativity">Creativity</a></li> |
9 |
<li><a href="#work">Work</a></li> |
10 |
<li><a href="#help">Help</a></li> |
11 |
<li><a href="#clients">Clients</a></li> |
12 |
<li><a href="#about">About</a></li> |
13 |
<li><a href="#video">Video</a></li> |
14 |
<li><a href="#why-us">Why us?</a></li> |
15 |
<li><a href="#quote">Quote</a></li> |
16 |
<li><a href="#contact">Contact</a></li> |
17 |
</ul>
|
18 |
</nav>
|
Hero
La sección hero, como se ve en el PSD, comprende una imagen estirada, un título y un subtítulo. Para la imgen de fondo agregaremos un contenedor diferente, para el título usaremos h1 y para el subtítulo un h2. Aquí, ves, estoy usando u-full-width, la nueva clase utilitaria de skeleton.
1 |
<section id="hero" class="hero u-full-width"> |
2 |
<div class="hero-image"></div> |
3 |
<div class="container centered"> |
4 |
<div class="twelve columns"> |
5 |
<h1 class="separator">We’ve got talent</h1> |
6 |
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
7 |
Aenean commodo ligula eget dolor. Aenean massa.</h2>
|
8 |
</div>
|
9 |
</div>
|
10 |
</section>
|
Introduction
La introducción contiene dos elementos; un título y un subtítulo. Preparamos el html para soportar el borde del título, al agregar una clase separator, que añadirá border-bottom y algo de espacio.
1 |
<section id="introduction" class="introduction u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<div class="twelve columns"> |
5 |
<h3 class="separator">Introduction</h3> |
6 |
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</h4> |
7 |
</div>
|
8 |
</div>
|
9 |
</div>
|
10 |
</section>
|
Creativity
La creatividad tiene un fondo de todo el ancho y un botón. También puedes ver la clase centered en el h4; una clase utilitaria que crearemos en el próximo tutorial para ayudarnos a centrar elementos en los ejes vertical y horizontal.
1 |
<section id="creativity" class="creativity u-full-width featured-bg-image"> |
2 |
<h4 class="centered"> |
3 |
<button class="button inverted">Pure creativity</button> |
4 |
</h4>
|
5 |
</section>
|
Work
Ésta es la sección mas grande del sitio web y contiene dos filas adicionales; una para trabajar filtro enlaces y una para trabajar objetos.
1 |
<section id="work" class="work u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<div class="twelve columns"> |
5 |
<h3 class="separator">Some of our work</h3> |
6 |
</div>
|
7 |
</div>
|
8 |
<div class="row"> |
9 |
<!-- work filters -->
|
10 |
</div>
|
11 |
<div class="row"> |
12 |
<!-- work items -->
|
13 |
</div>
|
14 |
</div>
|
15 |
</section>
|
Filtros work contiene una lista desordenada llena de enlaces que filtrarán los elementos work.
1 |
<ul class="work-filters u-full-width"> |
2 |
<li class="active"> |
3 |
<a href="#">All</a> |
4 |
</li>
|
5 |
<li>
|
6 |
<a href="#">Branding</a> |
7 |
</li>
|
8 |
<li>
|
9 |
<a href="#">Web design</a> |
10 |
</li>
|
11 |
<li>
|
12 |
<a href="#">Mobile</a> |
13 |
</li>
|
14 |
<li>
|
15 |
<a href="#">UI</a> |
16 |
</li>
|
17 |
<li>
|
18 |
<a href="#">Illustrations</a> |
19 |
</li>
|
20 |
</ul>
|
Los elementos work tendrán cuatro columnas de ancho, conteniendo la imagen work, el título work y la descripción work.
También pluedes ver que estoy usando otra clase utilitaria, vertical-centered, que centrará el elemento en el eje vertical. La descripción para cada elemento work también tiene un borde inferior. Para lograr ésto reusaremos la clase separator vista anteriormente, mientras se agrega una clase extra para aplicar estilos adicionales, color y tamaño.
1 |
<ul class="work-items u-cf"> |
2 |
<li class="four columns"> |
3 |
<img src="http://placehold.it/400"> |
4 |
<div class="work-detail"> |
5 |
<div class="vertical-centered"> |
6 |
<h3>Branding</h3> |
7 |
<p class="separator orange">MTV AMA logo</p> |
8 |
</div>
|
9 |
</div>
|
10 |
</li>
|
11 |
<li class="four columns"> |
12 |
<img src="http://placehold.it/400"> |
13 |
<div class="work-detail"> |
14 |
<div class="vertical-centered"> |
15 |
<h3>Web Design</h3> |
16 |
<p class="separator orange">Dribbble redesign</p> |
17 |
</div>
|
18 |
</div>
|
19 |
</li>
|
20 |
<li class="four columns"> |
21 |
<img src="http://placehold.it/400"> |
22 |
<div class="work-detail"> |
23 |
<div class="vertical-centered"> |
24 |
<h3>Mobile UI</h3> |
25 |
<p class="separator orange">Google Mail</p> |
26 |
</div>
|
27 |
</div>
|
28 |
</li>
|
29 |
<li class="four columns"> |
30 |
<img src="http://placehold.it/400"> |
31 |
<div class="work-detail"> |
32 |
<div class="vertical-centered"> |
33 |
<h3>Illustrations</h3> |
34 |
<p class="separator orange">Flat icons</p> |
35 |
</div>
|
36 |
</div>
|
37 |
</li>
|
38 |
<li class="four columns"> |
39 |
<img src="http://placehold.it/400"> |
40 |
<div class="work-detail"> |
41 |
<div class="vertical-centered"> |
42 |
<h3>Web design</h3> |
43 |
<p class="separator orange">Inbox by google</p> |
44 |
</div>
|
45 |
</div>
|
46 |
</li>
|
47 |
<li class="four columns"> |
48 |
<img src="http://placehold.it/400"> |
49 |
<div class="work-detail"> |
50 |
<div class="vertical-centered"> |
51 |
<h3>UI</h3> |
52 |
<p class="separator orange">Skeleton skin got a new UI</p> |
53 |
</div>
|
54 |
</div>
|
55 |
</li>
|
56 |
</ul>
|
Help
La sección de ayuda tiene la misma estructura html que la sección de creatividad, pero la diferenciaremos al agregar nombres de clases diferentes.
1 |
<section id="help" class="help u-full-width featured-bg-image"> |
2 |
<h4 class="centered"> |
3 |
<button class="button inverted">We’re here to help!</button> |
4 |
</h4>
|
5 |
</section>
|
Clients
Ésta sección contiene una lista desordenada con las imágenes de cliente. Voy a usar placehold.it para generar las imágenes marcadoras de posición.
1 |
<section id="clients" class="clients u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<h3 class="separator">Our clients</h3> |
5 |
</div>
|
6 |
<ul class="clients u-full-width u-cf"> |
7 |
<li>
|
8 |
<img src="http://placehold.it/200x50" alt="Google Client"> |
9 |
</li>
|
10 |
<li>
|
11 |
<img src="http://placehold.it/200x50" alt="Samsung Client"> |
12 |
</li>
|
13 |
<li>
|
14 |
<img src="http://placehold.it/200x50" alt="Flickr Client"> |
15 |
</li>
|
16 |
<li>
|
17 |
<img src="http://placehold.it/200x50" alt="Foursquare Client"> |
18 |
</li>
|
19 |
<li>
|
20 |
<img src="http://placehold.it/200x50" alt="Pinterest Client"> |
21 |
</li>
|
22 |
</ul>
|
23 |
</div>
|
24 |
</div>
|
25 |
</section>
|
About
Aquí tenemos dos filas diferentes, una para el texto de introducción y uno para las personas.
1 |
<section id="about" class="about u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<!-- introduction -->
|
5 |
</div>
|
6 |
<div class="row"> |
7 |
<!-- people list -->
|
8 |
</div>
|
9 |
</div>
|
10 |
</section>
|
La fila de introduction (introducción) contiene un título y un subtítulo, como lo vimos previamente en la sección de introduction.
1 |
<div class="twelve columns"> |
2 |
<h3 class="separator">About us</h3> |
3 |
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</h4> |
4 |
</div>
|
Las lista de personas es una lista desordenada que contiene cuatro elementos, el último para propósitos de contratación. Cada elemento de la lista es de tres columnas de ancho y contiene una imagen, un enlace, el nombre y el puesto del individuo.
1 |
<ul class="people-list"> |
2 |
<li class="three columns people-list-item"> |
3 |
<img src="http://placehold.it/300"> |
4 |
<div class="people-hover"> |
5 |
<a href="#"><i class="fa fa-external-link"></i></a> |
6 |
<div class="people-detail"> |
7 |
<h3>JOHN</h3> |
8 |
<p>CEO/Founder</p> |
9 |
</div>
|
10 |
</div>
|
11 |
</li>
|
12 |
<li class="three columns people-list-item"> |
13 |
<img src="http://placehold.it/300"> |
14 |
<div class="people-hover"> |
15 |
<a href="#"><i class="fa fa-external-link"></i></a> |
16 |
<div class="people-detail"> |
17 |
<h3>Wiliam</h3> |
18 |
<p>CTO/Founder</p> |
19 |
</div>
|
20 |
</div>
|
21 |
</li>
|
22 |
<li class="three columns people-list-item"> |
23 |
<img src="http://placehold.it/300"> |
24 |
<div class="people-hover"> |
25 |
<a href="#"><i class="fa fa-external-link"></i></a> |
26 |
<div class="people-detail"> |
27 |
<h3>Clare</h3> |
28 |
<p>Designer</p> |
29 |
</div>
|
30 |
</div>
|
31 |
</li>
|
32 |
<li class="three columns people-list-item blank-feature"> |
33 |
<div class="vertical-centered"> |
34 |
<h3 class="separator">WE ARE HIRING</h3> |
35 |
<button class="button">Apply</button> |
36 |
</div>
|
37 |
</li>
|
38 |
</ul>
|
Video
La sección de video contiene solo un botón y la imagen de fondo estirada. En los próximos tutoriales, haremos éste una ventana modal que apunte a un video de Youtube.
1 |
<section id="video" class="video u-full-width featured-bg-image"> |
2 |
<h4 class="centered"> |
3 |
<a href="http://www.youtube.com/embed/EVpyXNiHVbE?autoplay=1" class="button inverted circle"> |
4 |
<i class="fa fa-play"></i> |
5 |
</a>
|
6 |
</h4>
|
7 |
</section>
|
Why us
Avanzando, la sección "why us" (¿por que nosotros? se hace de dos secciones individuales; una para una breve introducción y la otra para los servicios actuales.
1 |
<section id="why-us" class="why u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<!-- introduction section -->
|
5 |
</div>
|
6 |
<div class="row"> |
7 |
<!-- services section -->
|
8 |
</div>
|
9 |
</div>
|
10 |
</section>
|
La sección introduction es de 12 columnas de ancha y contiene el título encerrado en un <h3> y el texto para una breve descripcion en un <h4>. Como verás abajo, el título también tiene una clase separator para crear el efecto de borde mencionado previamente.
1 |
<div class="twelve columns"> |
2 |
<h3 class="separator">Why choose us</h3> |
3 |
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</h4> |
4 |
</div>
|
En la sección de services (servicios), cada elemento de lista contiene una imagen y una descripción.
1 |
<ul class="services"> |
2 |
<li class="four columns"> |
3 |
<div class="service-image"> |
4 |
<img src="http://placehold.it/300x150"> |
5 |
</div>
|
6 |
<h5>App Design</h5> |
7 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
8 |
ilabore et dolore.</p>
|
9 |
</li>
|
10 |
<li class="four columns"> |
11 |
<div class="service-image"> |
12 |
<img src="http://placehold.it/300x150"> |
13 |
</div>
|
14 |
<h5>Responsive Layout</h5> |
15 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
16 |
ilabore et dolore.</p>
|
17 |
</li>
|
18 |
<li class="four columns"> |
19 |
<div class="service-image"> |
20 |
<img src="http://placehold.it/300x150"> |
21 |
</div>
|
22 |
<h5>Pixel Perfect design</h5> |
23 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
24 |
ilabore et dolore.</p>
|
25 |
</li>
|
26 |
</ul>
|
Quote
Ésta sección hereda la misma estructura html que la sección de creatividad, pero con diferente texto para el botón centrado.
1 |
<section id="quote" class="quote featured-bg-image u-full-width"> |
2 |
<h4 class="centered"> |
3 |
<button class="button inverted">Get a quote now.</button> |
4 |
</h4>
|
5 |
</section>
|
Get in touch
¡Solo un par mas! Ésta sección ofrece una breve notificación para el formulario. Es creado con una estructura html que probablemente se ve muy familiar por ahora, con un título y una descripción que tiene un separador entre ellos.
1 |
<section id="contact" class="contact u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<div class="twelve columns"> |
5 |
<h3 class="separator">Get in touch</h3> |
6 |
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt illum sed veritatis at, ipsam quo vitae minima. Animi unde doloremque iste, incidunt nihil, est vero aliquam, nemo id ab totam.</h4> |
7 |
</div>
|
8 |
</div>
|
9 |
</div>
|
10 |
</section>
|
Contact
El formulario de contacto comprende de dos columnas, una para la meta locación y los enlaces de perfiles sociales y otra que contiene el formulario que ayuda al usuario a contactar a la firma.
De nuevo voy a usar el marcado para soportar Font Awesome, que se integrará en el próximo tutorial.
La primera columna es de cuatro columnas de ancho y la segunda es de ocho columnas de ancho. Aquí puedes ver realmente el poder de Skeleton boilerplate, porque estamos usando columnas y filas anidadas. El formulario tiene diferentes tamaños dentro de él; las primeras dos casillas son seis columnas de ancho dentro de un contenedor que tiene una anchura de ocho columnas.
1 |
<section class="container contact-us u-full-width u-max-full-width"> |
2 |
<div class="row"> |
3 |
<div class="four columns contact-us-details"> |
4 |
<h3>Our Location</h3> |
5 |
<h5>
|
6 |
174 Mimosa ST. NW <br /> |
7 |
Casablanca, MA 20370 <br /> |
8 |
(212) 123 456 7 <br /> |
9 |
Samir Timezguida</h5>
|
10 |
<ul class="social-links"> |
11 |
<li>
|
12 |
<a href="http://twitter.com/wdtuts" target="_blank"> |
13 |
<i class="fa fa-twitter"></i> |
14 |
</a>
|
15 |
</li>
|
16 |
<li>
|
17 |
<a href="https://www.facebook.com/webdesigntutsplus" target="_blank"> |
18 |
<i class="fa fa-facebook"></i> |
19 |
</a>
|
20 |
</li>
|
21 |
<li>
|
22 |
<a href="https://plus.google.com/117485987435498566293" target="_blank"> |
23 |
<i class="fa fa-google-plus"></i> |
24 |
</a>
|
25 |
</li>
|
26 |
</ul>
|
27 |
</div>
|
28 |
<div class="eight columns contact-us-form"> |
29 |
<form>
|
30 |
<div class="row"> |
31 |
<div class="six columns"> |
32 |
<input class="u-full-width" type="text" placeholder="Name" id="nameInput"> |
33 |
</div>
|
34 |
<div class="six columns"> |
35 |
<input class="u-full-width" type="email" placeholder="Email" id="emailInput"> |
36 |
</div>
|
37 |
</div>
|
38 |
<textarea class="u-full-width" placeholder="Message" id="messageInput"></textarea> |
39 |
<input class="button u-pull-right" type="submit" value="Send"> |
40 |
</form>
|
41 |
</div>
|
42 |
</div>
|
43 |
</section>
|
Footer
Nuestro footer (pie) contiene algo de texto encerrado en un contenedor de doce columnas.
1 |
<section class="footer u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<div class="twelve columns"> |
5 |
<h5>© 2015 WebDesign Tuts+.</h5> |
6 |
</div>
|
7 |
</div>
|
8 |
</div>
|
9 |
</section>
|
¡Eso es todo por Ahora!
Éste tutorial ha demostrado exactamente para que es Skeleton: hemos usado su marcado para crear la estructura de una página web. En el próximo tutorial tomaremos esa estructura y agregaremos estilos para darle un aspecto completamente único. ¡Ahí nos vemos!
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!
