3.1 INTRODUCCIÓ AL DISSENY (LAYOUT) AMB CSS

En els darrers capítols, hem après a manipular la mida de les caixes i l'espai que les envolta, però necessitem alguna cosa més, necessitem poder moure les capses per no quedar-nos limitats a dissenys d'una sola columna. 

CSS ens ofereix diverses maneres de resoldre problemes de disseny, en un eix horitzontal, eix vertical o fins i tot tots dos. Escollir el mètode de disseny adequat per a un context pot ser difícil i, sovint, és possible que necessiteu més d'un mètode de disseny per resoldre el vostre problema. Nosaltres ens centrarem en un dels sistemes més moderns i efectius, les capses flexibles o Flexbox.

CSS ha evolucionat a mesura que han evolucionat les nostres necessitats de disseny web i tecnologia de navegador. Podeu llegir com ha evolucionat el disseny CSS i el nostre enfocament al disseny al llarg del temps en aquest article de Rachel Andrew.

3.2 FLEXBOX

Flexbox és un mecanisme de disseny per a dissenys unidimensionals. Dissenys en un únic eix, sigui horitzontalment o verticalment. De manera predeterminada, flexbox alinearà els fills de l'element un al costat de l'altre, i els estirarà en la direcció del bloc, de manera que tinguin tots la mateixa alçada. Algunes de les funcions principals de Flexbox són:

• Els elements es poden mostrar com a fila o columna.

• Per defecte treballa en una sola línia, però li podem demanar que els ajusti a diverses línies.

• L'espai es pot distribuir dins dels elements, de manera que es fan més grans i més petits segons l'espai disponible al seu contenidor.

Aprendrem les funcions bàsiques de flexbox tot construint un exemple. L'exemple consistirà en una pàgina on es mostraran tres imatges de costat. Comença descarregant AQUESTA carpeta amb les imatges i puja-la al teu projecte (per organitzar millor el projecte posa les imatges en una carpeta). A continuació, crea tres etiquetes <img> per mostrar les tres imatges i un <div> que faci de contenidor. A continuació dona una mica d'estil per veure-ho millor:

Hauries de veure les tres imatges, en fila o columna, depenent de la mida de la pantalla (prova de fer-la gran i petita per veure què passa), sobre un fons blau.

El primer que volem fer és centrar les imatges a la pantalla, tant en horitzontal com en vertical. Per fer-ho hem de convertir el contenidor en un element flexible. Afegeix: display: flex a l'element body del CSS. Què passa? Ha canviat alguna cosa?

Veiem que quan fem la pantalla petita les imatges queden tallades o amagades, això és perquè per defecte flexbox treballa amb una sola línia, però podem fer que treballi amb més d'una línia quan els elements surtin de la mida de la pantalla. Afegeix: flex-wrap: wrap al contenidor. Què passa? Ha canviat alguna cosa?

Ja podem centrar les imatges, en horitzontal les centrem amb: justify-content: center i en vertical amb: align-items: center. Si volem separar les imatges entre elles podem donar-los marge o els valors space-between o space-around  de la propietat justify-content. Prova de canviar justify-content: center per justify-content: space-around. Què ha canviat? Com es distribueix l'espai buit?

Ja tenim les imatges centrades! El teu codi CSS actual hauria de ser semblant a aquest:

Fixa't que fins ara només hem treballat sobre el contenidor. Però els elements de dins el contenidor també s'han convertit en capses flexibles i actuant sobre els elements en concret podem fer coses com: canviar l'ordre dels elements o la mida.

Assigna una classe o identitat a cada imatge per poder-les seleccionar amb CSS. Al CSS assigna order: 1 a la primera imatge. Què ha passat?

Per defecte tots els elements tenen el valor zero a order, canviant aquest valor podem canviar l'odre en què es mostren. Ara assigna flex: 2 a una de les imatges. Què passa?

La propietat flex defineix l'amplada dels elements individuals en un contenidor flexible. O, més exactament, els permet tenir amplades flexibles. Funciona com un pes que indica al contenidor flexible com distribuir l'espai addicional a cada element. Per exemple, un element amb un valor flex de 2 creixerà el doble de ràpid que els elements amb el valor predeterminat d'1.

El teu codi CSS final hauria de ser semblant a aquest:

Un últim apunt important a tenir en compte és que fins ara hem utilitzat flexbox per treballar amb elements en horitzontal, però també servei per fer-ho verticalment. L'únic que cal és canviar la direcció de l'eix amb: flex-direction: column.

3.3 INTRODUCCIÓ AL DISSENY ADAPTATIU

En els primers dies de la web, la majoria de la gent utilitzava ordinadors d'escriptori. Actualment, el web està disponible en ordinadors de sobretaula, ordinadors portàtils, tauletes, telèfons plegables, neveres i cotxes. La gent espera amb raó que els llocs web tinguin un bon aspecte independentment del dispositiu que facin servir. El disseny adaptable (o responsive en anglès).

Per veure si una pàgina web s'adapta a diferents tamanys de pantalla podeu obrir la web amb l'ordinador i fer petita la pantalla del navegador. Prova-ho amb AQUESTA web. Què passa? Tot es llegeix i veu bé quan la pantalla és petita?

3.4 LES MEDIA QUERIES

El disseny responsive s'aconsegueix mitjançant "consultes multimèdia" CSS. Són una manera d'aplicar condicionalment les regles CSS. Li diuen al navegador que ha d'ignorar o aplicar determinades regles en funció del dispositiu de l'usuari.

La següent figura ens il·lustra la sintaxis a utilitzar:

Portem-ho a la pràctica amb un exemple, construirem el layout d'una web on hi ha d'haver un navegador, una secció amb el contingut principal i una secció amb quatre imatges. Volem que la disposició de les imatges sigui diferent en la vista de mòbil i en l'ordinador. Al mòbil s'han de veure al final de tot en forma de quadrícula de 2x2, en canvi, a l'ordinador volem que es vegin les quatre imatges en una sola fila a sota del navegador. Volem això:

Comencem creant els elements necessaris al <body> del nostre arxiu html:

Comencem amb el CSS, què fem primer el disseny per mòbil o el d'ordinador? Sempre és una bona idea començar amb el disseny mòbil. Els dissenys per ordinador solen ser més complexos que els seus homòlegs mòbils, i l'enfocament mobile-first maximitza la quantitat de CSS que podeu reutilitzar als vostres dissenys.

Així doncs, comencem fent la versió per mòbil. Amb tot el que has après ja l'hauries de saber fer sol. El navegador ha de tenir una alçada de 80px, el contingut 600px i les imatges 250px. T'hauria de quedar un codi CSS semblant a:

Ja tenim la versió mòbil, per fer la versió d'ordinador no cal que generem un nou arxiu i codi CSS, simplement cal aplicar una media query que especifiqui al navegador que passa quan la pantalla és més gran. En aquest cas el què volem que passi és:

• Que l'amplada de les imatges es redueixi al 25% per tal que quedin les quatre en línia.

• Canviar l'ordre dels elements amb flexbox per tal que les imatges es mostrin a sota del navegador.

Prova-ho! Si no te'n surts, el codi que has d'afegir al final del teu arxiu CSS és aquest:

3.5 UNA PÀGINA DE PÀGINES

Gairebé totes les webs estan formades per diverses pàgines amb diferents continguts que s'enllacen les unes amb les altres. Per fer-ho només cal crear un nou arxiu html per cadascuna de les pàgines. Cal tenir en compte:

• S'acostuma a treballar amb una sola fulla d'estils CSS per a totes les pàgines i, per tant, a la capçalera de tots els arxius html s'haurà de vincular el mateix arxiu CSS.

• La primera pàgina que carreguen els navegadors és la que s'anomeni "index.html", posa aquest nom a la que vols que sigui la pàgina inicial.

• Per enllaçar unes pàgines amb les altres només has de crear els enllaços corresponents (<a>) i posar l'adreça relativa a l'arxiu html a l'atribut href.