Do one for CSS Grid, too! Haha. Please and thank you! :)
You're welcome :)
Having one for CSS Grid will be quite handy as well. Might consider it for a future project.
Oh! Installing this as soon as I get to my computer for the morning.
Update. I'm LOVING this. The visual representation of each attribute is exactly what I needed. I learned something. I was like, so THAT'S what "align-item: stretch" does. Sweet.
Added first review to the marketplace! Time to check out your other extensions.
Thanks for your review! Really appreciate it 🙏
Hope you find the other extensions useful as well :)
Question, how did you create the .svg images for each attribute?
The whole cheatsheet is based on the excellent work by Darek Kay. I'm not sure which tools he used to create them but you can check out the code on GitHub. :)
Sorry for the late response. Was a bit busy today.
There are quite a lot of resources on the Web but the ones I can recommend are:
The are tons of other resources as well but I hope you'll find these useful :)
Edit: Oh, I forgot our lovely DEV.to :) You can follow the js tag. There are a lot of good posts.
Thank you so much! I love it.
Amazing Dzhavat! I just installed it :)
I really like hovering on display: flex and being able to open it 👍
Building cheatsheets right into extensions is such a good idea! Do you have any good resources for how to go about building an extension?
When I think about it, I can’t understand why we haven’t explored this idea earlier. It makes a lot of sense to me now (or maybe I’m already biased :)). We work with code so the tools needed to support our work should be as close as possible. I’d love to see more extensions similar to this one. An obvious one is a Grid cheatsheet.
As for resources, I’m only looking at the official documentation at the moment. Sometimes I find them a bit hard to understand, though, but it helps by looking at the examples. They have a nice CLI tool for generating new extensions. It makes it very easy to get started. :)
Absolutely! This post has given me a bunch of similar ideas of information or little tools that I want available when I'm writing code; but before this I would have to go look up separately, etc. So thanks for the inspiration!
Those docs look great, thanks :) I'll take a look.
So good! I can stop mixing up align-items and justify-content now 🙈
I feel you! Hope this little tool can help you with that :)
Thank you for that. I will install it immediately. If you would make the same with Grid would be awesome.
I also love your css to MDN.
Thanks. Hope it serves you well :)
Will appreciate your feedback once you've used them for some time. If you feel like there's something that can be improved, let me know.
Now make one for CSS Grid, where you can generate and export your grid 😉.
It's not an extension but this generator is pretty amazing cssgrid-generator.netlify.com/
Yes, it is! Sarah Drasner has released a lot of amazing tools. All of them deserve to be bookmarked :)
That's a really good idea :)
I might give it a try in the future, or of someone wants to take on the challenge, he/she can do it as well.
It's going to be great if my little extension inspires other people to build more tools like this embedded in the code editor.
Thanks it's really helpfull.
"justify-content: space-evenly;" is missing from your cheatsheet
Thanks for letting me know! Will add it in the next update :)
Awesome thanks! Really helpful
Thanks for this 😀
Just tried it... Awesome!
Shared with the Tech Team in the company I work for :)
That's awesome! Thanks :)
Damn this is quite helpful as I always forgot what element I should add to regardless thank you
Thanks for making this! It'll come in handy soon
This is exactly what I needed so I don't have to google what each property does for the 100th time 😃
This is exactly why I built it :) Hope you find it useful.
If someone needs to see this cheatsheet to solve the problem, the problem wouldn't be solved!
I see what you mean and I agree. But many times the problem is remembering the right property, not much about the end result.
Awesome!! Loved it!
Nice work @dzhavat
Very helpful and useful extension ❤️❤️❤️
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.