Una de mis clases favoritas es cuando enseño a los alumnos algunos ejemplos de tiendas online en base Prestashop y en las que todavía no se han dado cuenta que el uso de tablas es totalmente desaconsejado.
¡Ni se os ocurra maquetar con tablas!
Las tablas rompen el diseño responsive.
Si has llegado a esta entrada te explico como solucionarlo y te doy un ejemplo de por dónde empezar.
La clave es entender que Prestashop 1.6 utiliza bootstrap.
Podéis comprobarlo vosotros mismos observando el código html (con mozilla ctrl + u o directamente inspeccionando la consola del navegador) y viendo que en las etiquetas html aparecen clases del tipo col-xs-12, col-sm-4, col-md-8 o col-xl-3.
Si estás pensando en comprar algún tipo de constructor para prestashop tal vez puedas esperar un poquito más.
Puede ser interesante contratar una agencia o freelance, aunque tal vez también os podría interesar contratar a un alumno del curso de confección y publicación de páginas web IFCD0110.
Vamos a ello.
Definir la estructura de la página
El primer paso es dibujar sobre un papel como quieres visualizar la página.
Empieza por la versión teléfono.
Después la tableta.
Finalmente la versión de escritorio.
E imagina que se trata de bloques que a posteriori se van a ir apilando unos sobre otros.
Escribir el html
A continuación escribiremos el html correspondiente combinado con las clases de prestashop pertinentes.
Recordemos las clases que nos sirven para definir columnas:
- .row, sirve para indicar una fila (cuidado: prestashop 1.6 usa la versión 2.3 de bootstrap. a la fecha de escribir esta entrada la versión última es 3.3. en esta versión no uses la clase .row sino .container)
- .col-xs-*, cuanto va a ocupar la columna en teléfono vertical.
- .col-sm-*, cuanto va a ocupar la columna en teléfono horizontal y tablet vertical
- .col-md-*, cuanto va a ocupar la columna en tablet horizontal y pantalla de escritorio
- .col-xl-*, cuanto va a ocupar en una pantalla de escritorio grande
Los * indican un número que va del 1 al 12.
En total todas las filas tienen que sumar 12 columnas.
Cuando una columna ha sido definida para una pantalla de orden inferior, si no se va a modificar en la pantalla de orden superior entonces no es necesario indicar nada más. El motivo lo explicaríamos en una entrada posterior en la que demostrásemos la lógica que hay detrás del css de bootstrap.
El código resultante lo podéis ver en la imagen.
¡Y esto es todo!
Un ejemplo sencillo pero práctico.
¡Nos vemos mañana con una nueva entrada!
Deja una respuesta