Les dejo un ejemplito de cómo pueden crearse un set de media queries expresivas con #Sass en solo unas líneas de código.
Emmm, el `flex-direction: row` no era necesario ya que es el valor por defecto, se me escapó 😅
Con el mismo array de breakpoints y el mixin del ejemplo anterior, rápidamente podríamos crear una grilla responsive con #CSSGrid haciendo algo como esto...
¿Y qué me dicen de los grid gaps? Algo así bastaría:
Por último, un ejemplo recooooontra simplificado de cómo se implementaría en el html
*fé de erratas, no es un array, es un mapa
Y así, podríamos jugar con las infinitas posibilidades de CSS Grid y Sass por toda la eternidad, espero que hagan cosas muy grosas 🤩
Mejorando aun más lo anterior, podríamos decidir cuánto queremos que abarque cada columna.
Prometo pronto ordenar toda esta data en un posteo de blog, diculpen la quemada de coco. Lo pongo acá para no olvidarme 😋
• • •
Missing some Tweet in this thread? You can try to
force a refresh
"El dilema de las redes sociales", está bueno y es cierto lo que visibiliza, pero no menciona que existen RRSS abiertas y alternativas descentralizadas como Mastodon, alternativas de mensajería con mucho más control sobre tu privacidad como Telegram y Signal.
No se menciona una sola vez al software libre, por ejemplo, dejándote la sensación de que la única solución es hacer cosas como apagar notificaciones o privar a tus hijes de usar el teléfono en vez de enseñarles a usarlo de manera responsable y productiva.
Sin embargo, creo que es un docu piola para ver y sobre todo para hacérselo ver a la gente que no está tanto en el tema, mencionando lo anterior y abriendo ese debate.
Permite mayor control sobre los distintos estados, se pueden definir límites mínimos y máximos, y cuál es el valor óptimo y cuál se encuentra por debajo del deseado.
Mucha gente recurre a librerías que hacen cosas muy anti accesibilidad para hacer progress bars, por eso quería dejar en claro que existe un elemento HTML pensado para eso y que es completamente estilable desde CSS. Es accesible out of the box si hacemos una serie de cosas...
1. Enlazarlo a una etiqueta <label> 2. Acepta "phrasing content", por compatibilidad es recomendable dentro pasarle en texto el porcentaje de progreso (fácilmente se puede ir actualizando con JS, de todos modos van a tener que actualizar el value, así que no cuesta nada).
Gracias, Twitter, por hacer mierda la calidad de los videos 😡
Y si son obse como yo, con la etiqueta <wbr> le pueden decir a CSS dónde está permitido romper una palabra, si no se encuentra antes con el borde de un contenedor.