November 6, 2021 — Esta charla es un recopilatorio de trucos y prácticas que he aprendido a lo largo de los años maquetando webs con CSS.

Todo el código será CSS nativo, sin usar pre-procesadores como SASS, LESS, etc.

Habrá de todo un poco:

Selectores avanzados (*, >, +, :not, :nth-child, [data-attribute]…)

Propiedades poco conocidas (flexbox gap, texto multicolumna, filters, scroll-snap, shape outside, gradientes cónicos)

Accesibilidad en imágenes, animaciones y formularios tarjetas clicables en toda la superfície sin que todo sea ni usar JS

Como evitar que un texto que se convierta en negrita mueva el contenido adyacente

Custom properties y dark mode

Todos los ejemplos se podrán consultar libremente Codepen, de modo los asistentes puedan ver el código y trastear tranquilamente a su aire sin tener que ir tomando nota de todo, aunque la charla quede grabada. Y, como no, todo compatible con WordPress. Aunque los ejemplos estén en Codepen, todos están basado en casos reales que me he ido encontrando maquetando themes.

Finalmente haré mención de algunas novedades que están por venir o que todavía tienen poco soporte a nivel de navegadores, pero que me parecen muy interesantes. Aunque esta parte no será la temática principal, sólo un «caramelito». Este tipo de charlas de «mira lo que viene» me parecen realmente muy interesantes pero a la vez un poco frustrantes, porque la mayoría de cosas aún no se pueden aplicar y te dejan con la miel en los labios.

Presentation Slides »

October 2, 2021 — En esta pequeña charla os enseño de una manera práctica y sencilla el uso de las custom properties y cómo podemos hacer uso de ellas para facilitarnos el trabajo día a día. Si no las usas hoy en día ¡Ya estás tardando!

Presentation Slides »

June 1, 2021 — Durante la cuarentena algunos hemos adquirido habilidades gastronómicas y si éste no es tu caso pero quieres conocer «nuevas tecnologías» al momento de realizar tus plantillas, esta ponencia es para ti. Vamos a «cocinar» una hermosa plantilla con ingredientes disruptivos. Recuerda que WordPress no solo se compone de PHP o Bootstrap.

June 1, 2021 — La idea de este meetup es empezar a conocer un poco más lo que nos ofrece CSS, una pieza clave a la hora de realizar nuestros sitios web, empezaremos por una corta introducción, mencionaremos tres conceptos que si o si debemos conocer como son la herencia, cascada, especificidad y finalmente hablaremos de varias buenas practicas que nos llevara a un nivel superior a la hora de escribir código CSS.

Presentation Slides »

April 19, 2021 — En esta charla vamos a hacer una recorrido por muchos aspectos del CSS en relación a su uso con WordPress. Cuáles son las distintas formas en qué podemos encolarlo, utilizarlo, cómo afecta al renderizado, algunos consejos y también curiosidades que te ayudarán a entender y dominar esta tecnología que da colores y formas a la Web.

April 6, 2021 — This talk goes over the basics of the CSS Grid specification.

Presentation Slides »

November 30, 2020 — In this talk, you’ll learn some valuable tips for writing CSS in your own custom themes. You’ll learn the best way to include stylesheets in your theme, how to write CSS that’s easy to organize/maintain, when to use newer CSS features (such as Grid, Flexbox, Feature Queries, Custom Properties), and other ways to keep your sanity while writing CSS for your themes.

November 23, 2020 — “Tailwind CSS ist ein hochgradig anpassbares Low-Level-CSS-Framework, das Ihnen alle Bausteine zur Verfügung stellt, die Sie für die Erstellung maßgeschneiderter Designs benötigen, ohne lästig aufgezwungene Stile, um deren Überschreibung Sie kämpfen müssen.”

Die Integration von Tailwind CSS in ein WordPress Theme um mal kurz auszutesten, gestaltet sich ziemlich leicht. Die Einbindung eines Links aus einem der vielen zur Verfügung stehenden CDNs reicht für das ausprobieren aus. Wer aber das volle Potenzial des Utility-Frameworks ausreitzen will, kommt um ein lokales Setup nicht herum.

November 3, 2020 — CSS (Cascading Style Sheets) is a language used to control the look and feel of your website. This powerful tool controls the spacing, coloring, fonts, and decorative elements (such as boxes and underlines) of your WordPress website. In this session, we’ll learn what CSS is, how to view the CSS already affecting your website, and how to add your own CSS.

Presentation Slides »

September 30, 2020 — Tutorial on how to add custom CSS to the editor and blocks.

Presentation Slides »