Custom shorthand properties in CSS? Pretty close!
https://dev.to/janeori/css-the-single-coolest-api-technique-you-can-imagine-4ma8
Remote
Jane Ori 💚 CSS Runner 👩💻
@JaneOri@front-end.social
mastodon 4.7.3Hello World 👽
✍ breakpoint-system, doubledash.css, css-media-vars, augmented-ui, CSS-Sweeper, Space Toggles, & more
🦋 http://janeori.propjockey.io
📝 http://dev.to/janeori
💍 Art
she/her
0 Followers
0 Following
15 Posts
Joined September 27, 2023
I loved Spider-Noir. What's even more rewarding is seeing Nicolas Cage looking so happy in interviews about it. Grateful to witness such a perfect fit, to see a person so unique bring their full self somewhere unexpected and absolutely nail it. 🤗
Fork of Ana Tudor's beautiful animated SCSS for-loop particle artwork implemented in 100% CSS:
https://codepen.io/propjockey/pen/ZYBQzzO?editors=0100
Replying to
@patrickbrosset@mas.to @stefan@front-end.social
You can make a CSS only etch-a-sketch with it
https://dev.to/janeori/an-innovative-idea-for-holding-state-in-css-23gh
100% CSS repeat() function
https://codepen.io/propjockey/pen/XJNWYqQ??editors=0100
Repeat anything, strings, sets of animation properties to help manage parallel array properties, calc() partials, polygon partials, shape partials, text-shadows, anything!
In CSS, var(--registered-prop, fallbacks are unfortunately unreachable) so I made custom setter functions:
https://propjockey.github.io/doubledash.css/#setters
available in v0.3.3
There is more potential locked behind the CSS custom fn spread operator than any other planned feature in all of CSS.
Aside from being a severe DX inconsistency that var(csv) args don't auto spread as planned (and nearly shipped), that decision (temporarily) nerfed @ fn potential 1000 times over.
Replying to
@alvaromontoro@front-end.social I enjoyed how difficult that was. Misclicking an old tile and seeing everything reset to that point was a bit brutal lmao
End strategy was to identify words, select that subsequence, repeat without worrying about interconnectedness until all terms were identified, then unscramble the message, reset, and redo in order.
CSS tip:
If you code your library's class name like so:
[class*="breakpoint-system"]
Your users can extend the functionality like so:
.my-element--breakpoint-system {
/* override default settings */
}
Author Experience improvement:
SEEING the dependency of their class name.
FOR LOOPS IN 100% CSS
https://codepen.io/propjockey/pen/RNoWBBK?editors=0100
🫳
🎤
How the 100% CSS --repeat() function works, some demos, and a really easy way for you to begin using it now!
Anyone who works with numbers in CSS is going to love this one. Trivially show numbers with decimal precision in content:
https://codepen.io/propjockey/pen/JobdXLz?editors=0100
Bonus content: do the same thing with
https://codepen.io/propjockey/pen/dPOoMmx?editors=0100
100% CSS
Came back to one of my favorite cities in the world a couple weeks ago. This is the reason the double dash website is green
https://propjockey.github.io/doubledash.css/
It's so delicious 🤤
Like Lodash but for CSS
https://propjockey.github.io/doubledash.css/
Replying to
@ppk@front-end.social idk what the multi platform etiquette is but repeating what I mentioned elsewhere, you can use math to create a comparison bit flag and use
if(style(--flag: 1): red;);
https://codepen.io/propjockey/pen/MYjEZYp