¡No acudas de inmediato a un plugin de #WordPress! Usa el poder de #CSS para que tus sitios tengan presencia, sean ágiles, amigables con los usuarios y los buscadores.

1. Hacks y tips de
CSS para tu
WordPress
Desde la experiencia de una desarrolladora frontend.
01

2. ¡Hola, Soy Mayra!
Acerca de mí.
Soy desarrolladora frontend por Laboratoria, radicada
en CDMX.
Desarrollo sitios y herramientas web con HTML, ReactJs
y WordPress.
Encuentráme en:
• Twitter: @leonoramiau
• Github: @cruzmayra
02

3. 03
Disclaimer

4. 04
Tips

5. Jerarquía
05
Es la representación visual de elementos de tu diseño que consideres importantes.

6. Espacio negativo
06
Reduce el ruido visual, incrementa la legibilidad y el equilibrio.

7. Alineación
07
Ayuda a organizar elementos relativos a una línea, margen o elemento.

8. ID y clases descriptivos
08

9. Ordena propiedades alfabéticamente
09

10. Usar saltos de línea
10

11. 11
Hacks

12. Body class
12
Aprovecha el cambio de clases del body para mostrar/ocultar elementos

13. 13
Body class

14. Ocultar menu item en pagina
14

15. 15
Imágenes

16. Object-fit
16
Define cómo responde un elemento a la altura y el ancho de su elemento
contenedor.

17. 17
Object-fit

18. Dimensiones
18
Usa el tamaño adecuado para las imágenes, de acuerdo al tamaño de la pantalla.

19. 19
Dimensiones

20. Image set
20
Especifica que imagen utilizar en diferentes situaciones.

21. 21
Image set

22. 22
Image set

23. 23
Antes de
irme
Refuerza tus conocimientos de
HTML y CSS
Ayuda a mantenerte actualizado y a
enfrentar retos con mayor seguridad.
No acudas de inmediato a un
plugin.
Evalúa tus necesidades y el tamaño de la
tarea, si es pequeña probablemente no
necesites un plugin.
Busca inspiración.
Busca referencias en los sitios que amas
o busca sitios que amar.

24. 24
Encuentráme en:
• Twitter: @leonoramiau
• Github: @cruzmayra