Adrián Benavente Profile picture
Nov 23, 2019 8 tweets 3 min read Read on X
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. ImageImage
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... Image
¿Y qué me dicen de los grid gaps? Algo así bastaría: Image
Por último, un ejemplo recooooontra simplificado de cómo se implementaría en el html Image
*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 😋 ImageImageImage

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Adrián Benavente

Adrián Benavente Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @fenavente

Sep 27, 2020
Terminé Mad Men y ahora no sé cómo seguir con mi vida.
Después de haber visto ambas seriazas, puedo afirmar que Halt And Catch Fire es la siguiente serie lógica para ver después de Mad Men. Abro hilo...
Ambas tienen un formato de episodios parecido, si bien ambas te cuentan una historia única con una maestría impresionante.
Read 11 tweets
Sep 20, 2020
"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.
Read 4 tweets
Sep 14, 2020
<meter>, el primo cercano de <progress>
developer.mozilla.org/en-US/docs/Web…
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.
Tiene el plus de que todos los estados se pueden estilar: css-tricks.com/html5-meter-el…
Read 4 tweets
Sep 14, 2020
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... ImageImage
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).
Videíto...
Read 7 tweets
Sep 12, 2020
...ya pueden seguir con su vida normal.
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. ImageImage
Read 5 tweets
Sep 6, 2020
Si usás Sass, estos dos botones son exactamente lo mismo, solo que en el primero la forma en que se están usando las clases es redundante. Image
Sass es perfectamente capaz de entender esto como si se tratase tanto de clases separadas como de una misma clase con un sufijo. Image
Lo que finalmente será traducido de esta manera en el CSS... Image
Read 4 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(