() translation by (you can also view the original English article)
Durante este tutorial, construiremos el fantástico portafolio con línea de tiempo, como se vio en un tutorial anterior de Tomás Laurinavicius. Utilizaremos algunas técnicas adaptables, así como animaciones CSS3, Sass y un poco de jQuery.
Archivo y estructura de directorio
Bien, el primer paso es crear los archivos y carpetas que necesitamos. La imagen a continuación muestra nuestra estructura raíz.
Como puedes ver, tenemos una configuración muy simple aquí. Dentro del directorio "css" continúa y crea un archivo styles.scss y también toma una copia de normalize.css. Para poder usar Sass en este proyecto, necesitarás instalar Sass en tu máquina o necesitarás una aplicación para que te observe y compile por ti. Actualmente estoy usando CodeKit para Mac, pero hay muchas alternativas como Prepos, Scout y Koala, por nombrar algunas. ¡No son todos gratis, pero cualquiera que elijas te ahorrará mucho tiempo!
Dentro de la carpeta "js" crea un archivo llamado app.js y descarga una copia de modernizr.js para colocarlo aquí también. La compilación de Modernizr que he utilizado incluye todas las pruebas de CSS3 y HTML5, ya que no deberíamos necesitar más que eso. Correcto, eso cubre nuestros archivos y carpetas iniciales. El siguiente paso es verificar nuestro diseño de PSD para ver qué partes necesitan ser cortadas.
Cortando el PSD
El diseño de esta página es sencillo, lo que facilita la tarea de decidir si necesitamos algún corte. Tomás ha proporcionado todos estos activos junto con el PSD, por lo que no sería posible tener ningún corte en este diseño. Sin embargo, decidí que para este tutorial deberíamos cortar las tres imágenes del portafolio y el ícono de carga en la parte inferior de la página. Esto es más fácil que nada, por lo que no tenemos que hacer ningún cambio de tamaño en Photoshop.
En Photoshop, toma la herramienta de corte y dibuja con cuidado las rebanadas. Puede nombrar cada sector haciendo doble clic en él. Luego usa Exportar para la web... (o un elemento de menú similar dependiendo de tu versión de Photoshop) para exportar las rebanadas a nuestro directorio de imágenes.
Luego creé una nueva carpeta dentro de "imágenes" llamada "cartera" que contendrá las imágenes relacionadas con los artículos de la cartera. Mueve las tres imágenes de cartera a esta carpeta y eso completa nuestro proceso de división.
Imagen tipo Avatar
Ahora ve a uifaces.com y elige una de las imágenes para usar como nuestra imagen de perfil. Logré encontrar el mismo que el diseño, pero no importa a quién elijas. Coge la versión 128x128 y pégala en la carpeta "images".
Casi hemos terminado con nuestras imágenes con solo las redes sociales y los iconos de navegación para resolver. Lo haremos a continuación.
Sprites
Cuando tengas grupos de imágenes como iconos, es una buena idea crear una imagen que contenga todos ellos en un patrón de cuadrícula. Estos se llaman Sprites. Puedes llevar esto a extremos y crear un archivo grande de cada imagen en tu sitio web, pero para este tutorial vamos a crear dos sprites y una versión de retina correspondiente para cada uno.
Entonces, usando los enlaces a los recursos provistos por Tomas, podemos descargar cada uno de los iconos de las redes sociales. Coge la versión de 128x128 píxeles de cada uno para que podamos escalar hasta los tamaños que necesitamos. Luego, en Photoshop, tenemos que crear un archivo de 101px por 51px. Arrastra cada uno de los íconos de redes sociales a este archivo y redimensiona a 24px por 24px. Los íconos son negros, pero necesitamos que sean blancos, así que aplica un estilo de capa a cada uno que ofrezca una superposición de color de blanco. Cambia el color de fondo a algo oscuro para que podamos verlos y luego disponerlos como...
Cada ícono tiene exactamente 1 píxel desde los bordes y uno del otro. También cambié la opacidad de cada icono al 80%. Ahora duplica esta fila de iconos y colócala directamente debajo asegurándote de mantenerla a 1 píxel de los bordes. Cambia la opacidad de la segunda fila de iconos al 100%. Debería verse algo como esto ...
Ahora oculta la capa de fondo en Photoshop para obtener un fondo transparente y guarda para la web como PNG titulado social-sprite.png dentro de la carpeta "images". El siguiente paso es crear la versión retina de este sprite, por lo que obtenemos iconos nítidos en pantallas de alta densidad de píxeles. Esto debería ser bastante simple y solo implica duplicar el tamaño de lo que ya tenemos. Entonces la versión de la retina será 202px por 102px. Recuerda, todo tiene que duplicarse, lo que incluye el espacio alrededor de cada icono, por lo que para este elemento necesitarás 2 píxeles entre cada icono y en los bordes. La versión final de la retina debería verse así...
¡Estupendo! Ahora solo oculta la capa de fondo como antes y exporta como PNG, pero esta vez llámalo social-sprite@2x.png. Esta es una convención de nomenclatura estándar para la versión retina de un archivo de imagen.
Entonces ahora solo tenemos que hacer lo mismo con los íconos de navegación. Estos íconos son objetos vectoriales dentro del PSD, lo que significa que podemos duplicarlos en un nuevo archivo y escalarlos según sea necesario. El tamaño necesario para la versión normal es de 49px por 18px y la versión de retina con el doble de tamaño es 98 px por 36px. Las imágenes terminadas deberían verse así:
¡Excelente! Guarda estos como nav-sprite.png y nav-sprite@2x.png. Creo que esto completa todo lo que tenemos que hacer para las imágenes, ¡así que sigamos escribiendo algún código!
La Base HTML y Sass
Comencemos con los huesos de nuestra página. En nuestro index.html, copia el siguiente marcado para comenzar:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<meta charset="UTF-8"> |
5 |
<meta name="viewport" content="initial-scale=1.0"> |
6 |
|
7 |
<title>My Portfolio</title> |
8 |
<link rel="stylesheet" href="css/style.css"> |
9 |
<script src="js/modernizr.js"></script> |
10 |
</head>
|
11 |
<body>
|
12 |
<main class="wrap group"> |
13 |
<aside class="sidebar"> |
14 |
<div class="my-info"> |
15 |
|
16 |
</div>
|
17 |
<nav class="menus"> |
18 |
|
19 |
</nav>
|
20 |
</aside>
|
21 |
<div class="content"> |
22 |
|
23 |
</div>
|
24 |
</main>
|
25 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
26 |
<script src="js/app.js"></script> |
27 |
</body>
|
28 |
</html>
|
Es un diseño simple con el elemento de envoltura main que contiene un aside a un lado y un contenido div. Dentro de la barra lateral tenemos dos secciones, my-info y un navegador con una clase menus. Nuestras dependencias también están incluidas, especialmente la última versión de jQuery 1.x. Comencemos ahora por completar nuestro archivo Sass con algunas variables.
1 |
$black: #000; |
2 |
$white: #FFF; |
3 |
$grey: #f7f7f7; |
4 |
$darkgrey: #5e5e5e; |
5 |
$red: #d35136; |
6 |
$green: #27b599; |
7 |
$blue: #088ecc; |
8 |
$darkblue: #11171c; |
9 |
|
10 |
$padding: 10px; |
11 |
$margin: 10px; |
12 |
$main-width: 1000px; |
13 |
|
14 |
$font-size: 14px; |
15 |
$font-family: 'Lato', sans-serif; |
16 |
$line-height: 1.4; |
17 |
|
18 |
$break-four: 1050px; |
19 |
$break-three: 760px; |
20 |
$break-two: 520px; |
21 |
$break-one: 360px; |
22 |
|
23 |
@import url('http://fonts.googleapis.com/css?family=Lato:300,400,700'); |
24 |
@import url('normalize.css'); |
25 |
|
26 |
//Utilities |
27 |
.group:after { |
28 |
content: ""; |
29 |
display: table; |
30 |
clear: both; |
31 |
}
|
¡Es un buen pedazo de código para comenzar! Esto realmente solo está configurando algunos valores predeterminados y variables para usar en todo nuestro archivo Sass. La sección más importante aquí es la que contiene las cuatro variables de punto de ruptura. Estos definen en qué puntos debe cambiar nuestro diseño. Sass es muy útil aquí ya que solo podemos hacer referencia a estas variables al escribir nuestras consultas de medios y si un punto de quiebre debe cambiar, solo hay un lugar para cambiarlo.
Como puedes ver en la declaración @import, también estamos importando la fuente de Google utilizada en el diseño y la copia de Normalize.css que descargamos anteriormente. La única declaración hasta ahora es la clase group, que es una compensación para los elementos que contienen elementos flotantes tipo clearfix. Visita nicolasgallagher.com para obtener más información sobre esto.
Si todo está configurado correctamente, al guardar styles.scss se generará el archivo CSS simple que hemos incluido en nuestra página. Ver la página ahora mostrará una pantalla en blanco bastante aburrida, así que hagámoslo más divertido agregando más estilos y completando el área de la barra lateral.
La barra lateral; Mi información
Antes que nada agreguemos lo siguiente a nuestro archivo Sass:
1 |
//Main styles |
2 |
* { |
3 |
position: relative; |
4 |
-webkit-box-sizing: border-box; |
5 |
-moz-box-sizing: border-box; |
6 |
-ms-box-sizing: border-box; |
7 |
box-sizing: border-box; |
8 |
}
|
9 |
|
10 |
html, body, .wrap { |
11 |
min-height: 100%; |
12 |
}
|
13 |
|
14 |
body { |
15 |
color: $grey; |
16 |
font-size: $font-size; |
17 |
font-family: $font-family; |
18 |
line-height: $line-height; |
19 |
background: $darkblue; |
20 |
}
|
Cada elemento ahora debe estar ubicado de forma relativa, mediante la propiedad relative y también debe tener la propiedad box-sizing establecida en border-box, lo que permite que los elementos tengan un ancho de porcentaje que incluya su padding. Esto significa que podemos establecer dos elementos uno al lado del otro con un ancho del 50%, luego ajustamos el relleno en cada uno tanto como queramos sin romper el diseño. ¡Una regla CSS muy, muy útil! El soporte para casi todos los navegadores viene a través de las declaraciones prefijadas del proveedor.
Los estilos restantes aquí actúan como valores predeterminados para nuestra página. Tenemos que asegurarnos de que los elementos de envoltura principales permanezcan al 100% de altura en todo momento, ya que nuestra barra lateral debe llenar la pantalla verticalmente. Establecemos aquí el fondo del body en $darkblue, que en realidad es nuestro color de la barra lateral. Esto es lo que le da a nuestra barra lateral la apariencia de una altura del 100%. En realidad, el elemento de la barra lateral solo será tan alto como su contenido, pero tendrá un fondo transparente, mostrando así el color detrás de él.
Comencemos por desarrollar la barra lateral...
1 |
<img src="images/cj.jpg" alt="Chris Johnson" class="portfolio-image"> |
2 |
<h1>Chris Johnson</h1> |
3 |
<h2>Experienced UX/UI <br> Designer based in London, UK</h2> |
4 |
<div class="social group"> |
5 |
<a href="#" class="dribbble">Dribbble</a> |
6 |
<a href="#" class="twitter">Twitter</a> |
7 |
<a href="#" class="facebook">Facebook</a> |
8 |
<a href="#" class="googleplus">Google+</a> |
9 |
</div>
|
Agrega este código en el div .my-info. Es posible que debas cambiar el nombre de la imagen del portafolio según lo hayas llamado. Aquí no sucede mucho, pero guarda el archivo y echa un vistazo al navegador.
Encantador. Ahora abre style.scss e ingresa el siguiente código:
1 |
.sidebar { |
2 |
width: 100%; |
3 |
height: 100%; |
4 |
|
5 |
@media screen and (min-width: $break-three) { |
6 |
float: left; |
7 |
width: 20%; |
8 |
}
|
9 |
|
10 |
|
11 |
.my-info { |
12 |
text-align: center; |
13 |
padding: $padding*3 0; |
14 |
border-bottom: 1px solid $darkgrey; |
15 |
|
16 |
.portfolio-image { |
17 |
border-radius: 50%; |
18 |
}
|
19 |
|
20 |
h1, h2 { |
21 |
font-weight: normal; |
22 |
}
|
23 |
|
24 |
h1 { |
25 |
font-size: 120%; |
26 |
}
|
27 |
|
28 |
h2 { |
29 |
font-size: 100%; |
30 |
}
|
31 |
|
32 |
}
|
33 |
|
34 |
}
|
Como estamos siguiendo una estrategia para dispositivos móviles aquí, necesitamos que nuestra barra lateral tenga ancho completo y altura completa en las resoluciones móviles. Una consulta rápida de medios para nuestro punto de ruptura $break-three flota la barra lateral izquierda y restringe el ancho al 20%.
Los estilos para .my-info son bastante simples. Solo queremos centrar todo y darle un poco de espacio alrededor de los bordes. Para separar nuestra sección de menú que pronto será, simplemente usamos un borde de 1px en el borde inferior. Para hacer circular la imagen del portafolio, la cual tiene la clase portfolio-image, dale un border-radius del 50% y, por último, debemos anular algunos estilos de fuente para cualquier elemento h1 o h2 dentro de esta sección.
Enlaces a redes sociales
Ahora tenemos que abordar esos enlaces de redes sociales, utilizando uno de los sprites que creamos anteriormente. Coloca el siguiente código directamente después de las declaraciones h2 en el último bloque de código.
1 |
.social { |
2 |
width: 120px; |
3 |
margin: 0 auto; |
4 |
|
5 |
a { |
6 |
float: left; |
7 |
width: 25px; |
8 |
height: 25px; |
9 |
margin: 0 $margin/5; |
10 |
background: url(../images/social-sprite.png) no-repeat; |
11 |
text-indent: -9999px; |
12 |
|
13 |
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2) { |
14 |
background: url(../images/social-sprite@2x.png) no-repeat; |
15 |
background-size: 101px 51px; |
16 |
}
|
17 |
|
18 |
&.dribbble { |
19 |
background-position: 0px 0px; |
20 |
|
21 |
&:hover { |
22 |
background-position: 0px -25px; |
23 |
}
|
24 |
|
25 |
}
|
26 |
|
27 |
&.twitter { |
28 |
background-position: -25px 0px; |
29 |
|
30 |
&:hover { |
31 |
background-position: -25px -25px; |
32 |
}
|
33 |
}
|
34 |
|
35 |
&.facebook { |
36 |
background-position: -50px 0px; |
37 |
|
38 |
&:hover { |
39 |
background-position: -50px -25px; |
40 |
}
|
41 |
}
|
42 |
|
43 |
&.googleplus { |
44 |
background-position: -75px 0px; |
45 |
|
46 |
&:hover { |
47 |
background-position: -75px -25px; |
48 |
}
|
49 |
}
|
50 |
|
51 |
}
|
52 |
}
|
Eso parece bastante complicado, pero no es realmente. El grueso de este código es manejar cómo aparecen los iconos y sus estados de desplazamiento. En primer lugar, debemos hacer flotar cada uno de los elementos <a>, darles ancho y alto y también un margen para espaciarlos. Lo siguiente que hacemos es especificar la imagen de fondo. Esto debería establecerse en el sprite social que creamos antes. Por último, debemos asegurarnos de que el texto utilizado en cada elemento no aparezca en la página. La propiedad text-indent se encarga de eso muy bien.
La siguiente sección es la interesante. Aquí, estamos especificando qué fondo usar para pantallas con alta densidad de píxeles. La idea aquí es usar la versión "duplicada" del sprite social si la relación de píxeles del dispositivo es 2. La propiedad background-size es necesaria para escalar el archivo al tamaño original, por lo que todo nuestro código de posicionamiento solo funciona sin tener que duplicar nada
Las siguientes cuatro secciones son todas del mismo concepto. Estamos estableciendo la posición de fondo para cada icono y el estado hover respectivo. Echemos un vistazo en el navegador:
¡Increíble! Eso se ve realmente bien. Si todo es correcto, los estados hover deberían funcionar y todos deberían verse nítidos en un iPhone/iPad, etc. Ahora, comencemos a abordar el menú de la barra lateral.
Los menús de la barra lateral
Comienza por ingresar lo siguiente en index.html en el contenedor menus.
1 |
<h3 class="work">Work</h3> |
2 |
<ul>
|
3 |
<li><a href="#" class="current-menu-item">Latest</a></li> |
4 |
<li><a href="#">Web Design</a></li> |
5 |
<li><a href="#">Branding</a></li> |
6 |
<li><a href="#">Photography</a></li> |
7 |
<li><a href="#">Print</a></li> |
8 |
<li><a href="#">Mobile Design</a></li> |
9 |
</ul>
|
10 |
|
11 |
<h3 class="about">About</h3> |
12 |
<ul>
|
13 |
<li><a href="#">Skills</a></li> |
14 |
<li><a href="#">Experience</a></li> |
15 |
<li><a href="#">Education</a></li> |
16 |
<li><a href="#">Clients</a></li> |
17 |
<li><a href="#">Testimonials</a></li> |
18 |
<li><a href="#">Blog</a></li> |
19 |
</ul>
|
20 |
|
21 |
<h3 class="contact">Contact</h3> |
22 |
<ul>
|
23 |
<li><a href="#">Address</a></li> |
24 |
<li><a href="#">Phone</a></li> |
25 |
<li><a href="#">Social Networks</a></li> |
26 |
<li><a href="#">Email</a></li> |
27 |
</ul>
|
Bastante autoexplicativo, creo, así que continuemos ingresando los siguientes estilos después de la sección my-info, pero aún dentro del elemento general sidedar.
1 |
.menus { |
2 |
text-align: center; |
3 |
|
4 |
@media screen and (min-width: $break-three) { |
5 |
padding: $padding*2 $padding*3; |
6 |
}
|
7 |
|
8 |
h3 { |
9 |
text-transform: uppercase; |
10 |
font-size: 120%; |
11 |
font-weight: normal; |
12 |
padding-left: $padding*2.5; |
13 |
cursor: pointer; |
14 |
width: 20%; |
15 |
margin: $margin*2 $margin*11 $margin; |
16 |
|
17 |
@media screen and (min-width: $break-one) { |
18 |
margin: $margin*2 auto $margin*2; |
19 |
}
|
20 |
|
21 |
@media screen and (min-width: $break-three) { |
22 |
margin: $margin*2 0 $margin 0; |
23 |
}
|
24 |
|
25 |
&:before { |
26 |
content: ""; |
27 |
position: absolute; |
28 |
top: 0px; |
29 |
left: 0px; |
30 |
height: 18px; |
31 |
display: block; |
32 |
background: url(../images/nav-sprite.png) no-repeat; |
33 |
|
34 |
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2) { |
35 |
background: url(../images/nav-sprite@2x.png) no-repeat; |
36 |
background-size: 49px 18px; |
37 |
}
|
38 |
}
|
39 |
|
40 |
&.work { |
41 |
color: $red; |
42 |
|
43 |
&:before { |
44 |
width: 15px; |
45 |
background-position: 0px 0px; |
46 |
}
|
47 |
}
|
48 |
|
49 |
&.about { |
50 |
color: $green; |
51 |
|
52 |
&:before { |
53 |
width: 17px; |
54 |
background-position: -15px 0px; |
55 |
}
|
56 |
}
|
57 |
|
58 |
&.contact { |
59 |
color: $blue; |
60 |
|
61 |
&:before { |
62 |
width: 17px; |
63 |
background-position: -32px 0px; |
64 |
}
|
65 |
}
|
66 |
}
|
67 |
}
|
Esto es en realidad muy similar a los iconos de las redes sociales en cuanto al concepto y la implementación del concepto. Para el elemento menus en sí solo queremos que todo esté centrado. Una vez que hayamos superado nuestro punto de ruptura de $break-three, necesitaremos algo de relleno para ubicar los menús lejos de los bordes ligeramente.
Cada uno de los elementos h3 debe tener diferentes colores e iconos diferentes. Estamos utilizando una combinación de pseudo elementos:before, sprites y consultas de medios para lograr esto. Aparte de esto, tenemos un par de consultas de medios para controlar los márgenes de los elementos h3 en tamaños de pantalla más grandes. Esto es para que siempre estén posicionados correctamente en relación con sus menús.
Hablando de los menús, agregaremos el CSS para ellos en un momento. Primero, echemos un vistazo en el navegador:
Hablando de los menús, agregaremos el CSS para ellos en un momento. Primero, echemos un vistazo en el navegador:
Listas de menú
1 |
ul { |
2 |
list-style: none; |
3 |
padding: 0; |
4 |
display: none; |
5 |
margin: 0 $margin*13.5 $margin; |
6 |
text-align: left; |
7 |
|
8 |
@media screen and (min-width: $break-three) { |
9 |
margin: 0 0 0 $margin*2.5; |
10 |
display: block; |
11 |
width: auto; |
12 |
}
|
13 |
|
14 |
&.open { |
15 |
display: inline-block; |
16 |
margin: 0 auto $margin $margin*6; |
17 |
|
18 |
@media screen and (min-width: $break-three) { |
19 |
margin: 0 0 0 $margin*2.5; |
20 |
display: block; |
21 |
width: auto; |
22 |
}
|
23 |
}
|
24 |
|
25 |
li { |
26 |
a { |
27 |
color: $darkgrey; |
28 |
text-decoration: none; |
29 |
-webkit-transition: color 0.4s ease; |
30 |
-moz-transition: color 0.4s ease; |
31 |
-o-transition: color 0.4s ease; |
32 |
-ms-transition: color 0.4s ease; |
33 |
transition: color 0.4s ease; |
34 |
|
35 |
&:hover, &.current-menu-item { |
36 |
color: $white; |
37 |
-webkit-transition: color 0.4s ease; |
38 |
-moz-transition: color 0.4s ease; |
39 |
-o-transition: color 0.4s ease; |
40 |
-ms-transition: color 0.4s ease; |
41 |
transition: color 0.4s ease; |
42 |
}
|
43 |
}
|
44 |
}
|
45 |
}
|
En resoluciones móviles, queremos que nuestros menús estén ocultos, de modo que el usuario puede elegir ocultarlos o mostrarlos cuando necesites acceder a ellos. Una vez que lleguemos a nuestro punto de $break-three, los menús deberían estar visibles todo el tiempo.
La clase .open maneja cómo se muestran los menús cuando están abiertos. El diseño los coloca de forma bastante precisa, por lo que hacemos lo mismo aquí usando márgenes. Una vez más, el punto $break-three entra en juego y anula los márgenes para esas resoluciones y más. Los estilos para elementos li son bastante sencillos. Lo principal a tener en cuenta es el uso de transiciones CSS3. Los he usado aquí para dar una buena apariencia de desvanecimiento cuando cierro sobre el elemento. ¡Te animo a jugar con las transiciones para ver qué efectos interesantes puedes lograr!
Guardemos el archivo y veamos los resultados en el navegador.
¡Muy agradable! Los menús se comportan exactamente como deberían. Ahora vamos a llevar a cabo nuestra primera parte de JavaScript/jQuery, para controlar la apertura y el cierre de los menús.
Abre app.js e ingresa la siguiente función:
1 |
$(function() { |
2 |
|
3 |
$('.menus h3').on('click', function(e) { |
4 |
$(this).next('ul').toggleClass('open'); |
5 |
e.preventDefault(); return false; |
6 |
});
|
7 |
|
8 |
});
|
Estamos comenzando este archivo con la función jQuery document ready, que básicamente espera que el documento esté completamente listo antes de ejecutar cualquiera de los códigos. Lee más sobre el evento listo en api.jquery.com.
A continuación, adjuntamos un evento clic a cualquier h3 dentro de nuestro elemento menus. Cuando ocurre este evento (o sea, que el usuario haga clic en h3) usamos jQuery para encontrar el elemento "next" ul y alternar la clase open en él. Entonces, si el elemento ya tiene la clase, lo eliminará, y viceversa, si no lo hace. La última línea está ahí para detener cualquier acción predeterminada para el elemento. Probablemente esto no se aplique aquí porque los elementos h3 no tienen una acción predeterminada, mientras que una etiqueta ancla, por ejemplo, sí lo hace. Aún así, es una buena práctica adquirir el hábito de incluirlo cuando se usan manejadores de eventos click.
Guarda este archivo y regresa al navegador. Cuando te encuentres en resoluciones móviles, si haces clic en los títulos del menú, deberías ver el menú abrir debajo. Si esto no sucede, verifica si hay errores en JavaScript, o actualiza tu navegador y vuelve a intentarlo.
¡Eso cierra el área del sidebar! Avancemos y obtengamos un poco de contenido en la página.
Contenido principal
El primer paso aquí es agregar el HTML que necesitamos a la página.
1 |
<article class="portfolio-item group first"> |
2 |
<header class="portfolio-info"> |
3 |
<div class="date">7 Nov 2013</div> |
4 |
<div class="description"> |
5 |
Free PSD template for startups, small businesses and basically for everyone liking good design. |
6 |
</div>
|
7 |
<div class="meta"> |
8 |
<p><strong>Client:</strong> Despreneur</p> |
9 |
<p><strong>Tags:</strong> Web Design</p> |
10 |
</div>
|
11 |
</header>
|
12 |
<figure class="portfolio-image"> |
13 |
<img src="images/portfolio/free-psd-templates.jpg" alt="Free PSD Templates"> |
14 |
</figure>
|
15 |
</article>
|
16 |
<article class="portfolio-item group"> |
17 |
<header class="portfolio-info"> |
18 |
<div class="date">7 Nov 2013</div> |
19 |
<div class="description"> |
20 |
Free PSD template for startups, small businesses and basically for everyone liking good design. |
21 |
</div>
|
22 |
<div class="meta"> |
23 |
<p><strong>Client:</strong> Despreneur</p> |
24 |
<p><strong>Tags:</strong> Web Design</p> |
25 |
</div>
|
26 |
</header>
|
27 |
<figure class="portfolio-image"> |
28 |
<img src="images/portfolio/moody-shot.jpg" alt="Moody Shot"> |
29 |
</figure>
|
30 |
</article>
|
31 |
<article class="portfolio-item group"> |
32 |
<header class="portfolio-info"> |
33 |
<div class="date">7 Nov 2013</div> |
34 |
<div class="description"> |
35 |
Free PSD template for startups, small businesses and basically for everyone liking good design. |
36 |
</div>
|
37 |
<div class="meta"> |
38 |
<p><strong>Client:</strong> Despreneur</p> |
39 |
<p><strong>Tags:</strong> Web Design</p> |
40 |
</div>
|
41 |
</header>
|
42 |
<figure class="portfolio-image"> |
43 |
<img src="images/portfolio/new-york.jpg" alt="New York"> |
44 |
</figure>
|
45 |
</article>
|
46 |
<article class="portfolio-item group loading-wrap"> |
47 |
<header class="portfolio-info"> |
48 |
</header>
|
49 |
<figure class="portfolio-image"> |
50 |
<div class="loading"> |
51 |
<img src="images/loading.png" alt="Loading" class="rotate"> Loading... |
52 |
</div>
|
53 |
</figure>
|
54 |
</article>
|
Coloca este código dentro del div con la clase .content. Tenemos los tres artículos que figuran en el diseño y también un artículo "Cargando". He colocado el ícono de carga dentro de su propio portfolio-item para que podamos mantener la estructura de la página. Entonces puedo simplemente colocar el ícono de carga dentro del elemento portfolio-image. Verás aquí también que el primer portfolio-item tiene una clase first. Esto será importante en nuestro CSS al que accederemos luego de echar otro vistazo rápido en el navegador:
Está bien, pero no es exactamente lo que queremos, así que vamos directo a los estilos.
1 |
.content { |
2 |
width: 100%; |
3 |
min-height: 100%; |
4 |
background: $white; |
5 |
|
6 |
@media screen and (min-width: $break-three) { |
7 |
float: left; |
8 |
width: 80%; |
9 |
}
|
10 |
|
11 |
.portfolio-item { |
12 |
background: $grey; |
13 |
|
14 |
&:before { |
15 |
content: ""; |
16 |
position: absolute; |
17 |
width: 3px; |
18 |
background: darken($grey, 5%); |
19 |
top: 0px; |
20 |
left: 17px; |
21 |
bottom: 0px; |
22 |
}
|
23 |
|
24 |
&.first { |
25 |
&:before { |
26 |
top: 30px; |
27 |
}
|
28 |
}
|
29 |
|
30 |
.portfolio-info { |
31 |
min-height: 100%; |
32 |
color: $darkgrey; |
33 |
padding: $padding*2 $padding*2 $padding*2 $padding*4; |
34 |
-webkit-box-sizing: border-box; |
35 |
-moz-box-sizing: border-box; |
36 |
-ms-box-sizing: border-box; |
37 |
box-sizing: border-box; |
38 |
|
39 |
@media screen and (min-width: $break-three) { |
40 |
float: left; |
41 |
width: 30%; |
42 |
}
|
43 |
|
44 |
.date { |
45 |
font-size: 110%; |
46 |
color: $black; |
47 |
margin-bottom: $margin; |
48 |
|
49 |
&:before { |
50 |
content: ""; |
51 |
position: absolute; |
52 |
width: 11px; |
53 |
height: 11px; |
54 |
border-radius: 50%; |
55 |
border: 2px solid $grey; |
56 |
background: $red; |
57 |
left: -29px; |
58 |
top: 3px; |
59 |
}
|
60 |
}
|
61 |
|
62 |
.meta { |
63 |
color: $black; |
64 |
margin-top: $margin; |
65 |
|
66 |
p { |
67 |
margin: 0; |
68 |
}
|
69 |
}
|
70 |
|
71 |
}
|
72 |
|
73 |
}
|
74 |
|
75 |
}
|
¡Otra gran parte del código allí! Vamos a descomponerlo pieza por pieza. Los estilos .content son similares a los estilos de la barra lateral ya que en las resoluciones móviles solo necesitamos ancho completo, pero cualquier valor igual o superior a nuestro punto $break-three deberíamos flotarlo y aumentar el ancho al 80%. También debemos darle al div content un fondo blanco para seccionarlo desde la barra lateral.
Los elementos portfolio-item deben tener un fondo gris. Para crear la línea de tiempo que se ejecuta en el margen izquierdo del área de contenido, le daremos a cada portfolio-item un elemento :before. Aquí simplemente lo colocamos 17px desde el borde izquierdo y usamos el truco top/bottom para forzarlo a tener un 100% de altura. Esto implica establecer tanto la propiedad top como bottom en 0, lo que de hecho indica que el elemento se encuentra en ambas ubicaciones, lo que da como resultado un elemento de altura completa. Esto también funciona para las propiedades left y right para crear un elemento de ancho completo. Debemos ubicar nuestro primer portfolio-item lejos del borde superior de la ventana, lo cual logramos aquí estableciendo la propiedad superior en 30px.
Los artículos portfolio-info deberían, de nuevo, ser del 100% de ancho a menos que estemos a $break-three o superior. Para crear el pequeño círculo rojo que se ve en el diseño, decidí usar los elementos date (de fecha), ya que los dos parecen estar vinculados. En el CSS, la mejor manera de lograrlo es usar un pseudo elemento :before . Y para que sea un círculo, debe tener un alto y ancho y un border-radius de 50%. Luego, lo colocamos absolutamente a la izquierda de la fecha. Para obtener un pequeño espacio alrededor, simplemente aplica un borde del mismo color que los elementos del portfolio-item.
La información meta es muy simple. Simplemente establece el texto en negro y dale un margen superior. Cualquier etiqueta <p> dentro de aquí no debería tener márgenes. Guarda el archivo y observa lo que esta sección relativamente corta del código ha logrado.
¡Esto ahora se está acercando mucho! Continuemos con nuestros estilos del content...
1 |
.portfolio-image { |
2 |
padding: $padding*2; |
3 |
background: $white; |
4 |
border-left: 1px solid darken($grey, 10%); |
5 |
text-align: center; |
6 |
|
7 |
@media screen and (min-width: $break-three) { |
8 |
float: left; |
9 |
width: 70%; |
10 |
}
|
11 |
|
12 |
img { |
13 |
width: 100%; |
14 |
max-width: 610px; |
15 |
height: auto; |
16 |
}
|
17 |
|
18 |
div.loading { |
19 |
img { |
20 |
width: auto; |
21 |
height: auto; |
22 |
}
|
23 |
}
|
24 |
}
|
Coloca esto directamente después de los estilos de portfolio-info. Este pequeño bloque de código hará que las imágenes dentro de la cartera sean adaptables. La idea es reducir la escala de las imágenes a lo más pequeño que necesitemos, pero solo ampliarlas a su ancho real. Esto significa que debes tener imágenes de ancho fijo, pero es bastante factible en un diseño/plantilla como este, ya que las imágenes probablemente se generarán dinámicamente y se recortarán a un tamaño determinado.
También estamos utilizando los elementos de portfolio-image para agregar otro detalle de diseño, que es el borde fino entre las imágenes y la información. Si miras otra vez en el navegador, deberías ver las imágenes escalando con el navegador y, en general, ¡luciendo increíble!
Lo que sigue...
¡Es hora de tomar un café! En la siguiente y última parte de esta serie, agregaremos algunos brillos al diseño. Construiremos un ícono para la carga en la parte inferior de nuestra área de contenido, animándolo con CSS3, y luego imitando el desplazamiento infinito a medida que se carguen más ítems de cartera.
