Ahora que hemos aprendido cómo utilizar los diferentes métodos que forman parte del desarrollo de RWD, vamos a comenzar a aplicarlos de forma práctica.
Para los ejemplos que presentaremos usaremos el enfoque mobile-first que significa pensar y diseñar para móviles primero. La idea de este enfoque es asegurar que el contenido mostrado es el mismo en todos los tamaños de pantalla, asegurando que el contenido esté bien formateado y optimizado para móviles primero, y luego adaptarlo a pantallas más grandes. Con más de 50% de usuarios móviles en promedio a través de muchos países del mundo, no es de extrañar que esta metodología sea la más aceptada en el mundo de RWD.
Este tutorial esta hecho para aprender a hacer RWD manualmente, para entender bien cómo funciona y cómo controlar cada aspecto del mismo, por lo tanto no se usará ningún framework como Bootstrap o Foundation, los cuales explicaremos más adelante.
Preparando los archivos
Lo primero que tenemos que hacer es preparar una estructura de archivos que usaremos a lo largo del curso. La estructura de archivos puedes encontrarla en Github, y cada branch representa una lección del curso.
Para tener todo bien organizado, a mi me gusta usar archivos separados para cada componente, usando Sass todos los archivos se compilarán en un solo archivo CSS final. Por esta razón en este tutorial usaremos la siguiente estructura de archivos:
/index.html
/css/
styles.css
/scss/
styles.scss
_vars.scss
components/
_layout.scss
_body.scss
Noten que los archivos cuyos nombres comienzan con _ no serán compilados individualmente, ya que son considerados parciales, que se compilan dentro de los archivos donde son incluidos. La estructura mencionada funciona de la siguiente manera:
En el index.html (o la plantilla de tu aplicacion) agregamos el enlace al archivo CSS y una estructura básica de contenido usando etiquetas semánticas, la cual iremos ampliando a medida que avanzamos:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/styles.css"> <title>Curso RWD</title> </head> <body> <div class="wrap"> <header class="head"> <div class="container"> <div class="box"> <h1>Curso RWD</h1> </div> </div> </header> <main class="container"> <section class="content"> <div class="box"> <h2>Sub titulo</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla mollitia maiores asperiores expedita, deleniti quia temporibus, magnam quae! Ullam expedita, dolorem quam reiciendis accusantium similique nisi consectetur totam nostrum dolores!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit sapiente porro temporibus odit perferendis! Assumenda nihil, fugit sint ipsam facilis quasi pariatur, voluptatibus impedit laboriosam ut fuga dolore alias!</p> </div> </section> <aside class="sidebar"> <div class="box"> <h3>Opciones</h3> <ul> <li><a href="#">Lorem ipsum dolor.</a></li> <li><a href="#">Reprehenderit, illum, deserunt.</a></li> <li><a href="#">Numquam, ipsa, voluptate!</a></li> <li><a href="#">Similique, mollitia, aliquid.</a></li> </ul> </div> </aside> </main> <footer class="foot"> <div class="container"> <div class="box"> <p><a href="https://styde.net" target="_blank">Styde.net</a> Copyright ©2015</p> </div> </div> </footer> </div> </body> </html>
Usamos el compilador de Sass para generar nuestro CSS de manera normal apuntando a toda la carpeta scss (ver curso de Sass), pero agregando un flag para generar CSS expandido que podamos revisar fácilmente.
sass --watch --style expanded scss:css
El archivo styles.css será creado automáticamente por el compilador cada vez que guardamos alguno de nuestros archivos .scss. En el archivo styles.scss agregaremos import a los demás archivos de la siguiente forma:
@import “vars”; // No requiere el _ @import “components/body”; @import “components/layout”; // Los archivos se van agregando aquí a medida que los necesites
Con esto ya tenemos una estructura de archivos básica, así que vamos a empezar a crear algunas variables y cosas que necesitaremos. En el archivo _vars.scss
$breakpoints: ( medium: 680px, large: 1025px, xl: 1360px, );
Para acceder a los valores del mapa, usaremos la función map-get() de Sass de la siguiente forma:
map-get($breakpoints, medium)
Con esto en mente, podemos crear los media queries en los archivos de los componentes usando los valores del mapa. Recuerden que este mapa lo pueden crear con cualquier cantidad de valores, depende sólo de tu necesidad o del proyecto. También los valores específicos de los breakpoints dependen de tu contenido.
Una forma de generar los valores para los breakpoints es usando tamaños comunes de dispositivos, pero a veces tiene más sentido generarlos dependiendo del contenido. Una vez que el contenido empiece a verse mal, es momento de agregar un nuevo breakpoint.
Para este curso usaremos los tres valores mostrados en el mapa. Para facilitar el desarrollo, es muy común usar un archivo por componente, el cual incluye los breakpoints necesarios, como veremos en los ejemplos siguientes:
// Body
body {
margin: 0;
padding: 0;
line-height: 1.4em;
font-family: sans-serif;
}
@media (max-width: (map-get($breakpoints, medium) - 1)) {
body {
font-size: 14px;
}
}
@media (min-width: map-get($breakpoints, medium)) and (max-width: (map-get($breakpoints, large) - 1)) {
body {
font-size: 15px;
}
}
@media (min-width: map-get($breakpoints, large)) {
body {
font-size: 16px;
}
}
Noten como en este ejemplo, usamos los breakpoints simplemente para cambiar el tamaño del texto en los diferentes breakpoints. También noten el detalle de usar ($valor - 1) para no solapar los media queries.
Con esta misma estructura en el archivo, podemos crear una serie de estilos básicos usando el archivo _layout.scss:
// Layout
.box {
padding: 10px;
}
En este archivo hemos agregado varios estilos que explicaré a continuación. Primero, la clase auxiliar .box por el momento sólo contiene un padding uniforme que será aplicado a todos los elementos que usen la clase. Es bueno tener una serie de clases auxiliares para no repetir código, pero noten que en la vida real, la clase .box normalmente incluiría cosas como color de fondo, márgenes, bordes, etc.
.container {
margin: 0 auto;
&::after {
content: "";
display: block;
clear: both;
}
}
En el siguiente bloque, definimos el contenedor para el grid, este contenedor puede ser flexible, fijo, o una combinación cómo usamos aquí, que es flexible en pantallas pequeñas y medianas pero fijo en pantallas más grandes. El valor auto a los lados sirve para centrar el contenedor. Ademas, noten que he agregado un clearfix, el cual es necesario para que los elementos dentro del contenedor, al ser flotados a la izquierda o derecha no lo hagan colapsar.
// @media (max-width: (map-get($breakpoints, medium) - 1)) {
// No necesitamos nada especifico para pantallas pequeñas
// }
@media (min-width: map-get($breakpoints, medium)) and (max-width: (map-get($breakpoints, large) - 1)) {
.content {
width: 61.8%;
float: left;
}
.sidebar {
width: 38.2%;
float: left;
}
}
@media (min-width: map-get($breakpoints, large)) {
.container {
max-width: 960px;
margin: 0 auto;
}
.content {
width: 61.8%;
float: left;
}
.sidebar {
width: 38.2%;
float: left;
}
}
Luego agregamos el código necesario para posicionar el contenido y el sidebar uno al lado del otro (para el ejemplo, he usado los valores conocidos como “proporción áurea” o Golden Ratio). Noten que el en breakpoint para pantallas pequeñas no he agregado nada ya que naturalmente los divs usan automáticamente todo el ancho disponible y fluyen de acuerdo a como son agregados en el HTML (Ergo, mobile first).
Importante
Es muy buena idea escribir el HTML de manera que fluya naturalmente en pantallas pequeñas, de esta forma posicionamos los elementos de otra forma de ser necesario a medida que la pantalla crece. Así escribimos menos código, especialmente para dispositivos pequeños y nuestro HTML fluye mejor en ellos.
Con esto concluimos el sencillo ejemplo de layout responsive, pero preparamos una base flexible que nos permitirá crecer a medida que lo necesitamos. Prometo que la siguiente entrega con trucos y varios ejemplos de layout vendrá mucho más pronto que ésta.
Enlaces de interés
- Aprende a instalar y usar Sass, un maravilloso preprocesador de CSS
- Introducción al diseño web responsive
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Introducción al diseño web responsive