14 comments
Guilherme Rizzo, over 5 years ago Hey Designer News! Creator here, happy to answer any questions! :)
The problem
While working with web development, you've probably found yourself scrolling through inspect element a lot or looking for the computed styles tab on your browsers developer tools (and probably found some CSS properties that you've never heard before haha).
Sometimes you just want to get 1 thing from a framework or are curious about what is the border-radius, box-shadow, etc of an element you just saw on the internet.
The solution
This tool is faster than inspect element and gives all of the styles with their shorthands. This means you don't get messy ... or overwritten styles. Want to copy them? Cool, you just have to click! Check out the demo on the website:
https://guivr.github.io/cssscan
3 Products in 3 Months
This is my last product of the challenge I made up for myself to ship 3 products in 3 months.
CSS Scan took me 50 hours and 17 minutes to develop. Inspired by @levelsio, I recorded all the development and made a timelapse video of it. Check it out! https://www.youtube.com/watch?v=OtsNNXpXcYs
Features:
- Instantly check computed styles
- Click to copy
- Check the real size of elements
- Outline all elements
- Ignore box-sizing or hover styles
Price
I decided to price it as Pay what you want.
I would love to hear from you all how you can have a better experience using CSS Scan! Thank you!
Johnny Bad, over 5 years ago A big time-saver for me and my team. Thanks a lot!
Guilherme Rizzo, over 5 years ago That's nice to hear, Johnny! Wish you and your team the best.
helena domo, over 5 years ago Well done! I was looking for something that works as good as this! Congrats!
Guilherme Rizzo, over 5 years ago Thank you, Helena! I'm glad you like it :)
Nathan Cooper, over 5 years ago
I use Chrome Dev Tools often. No longer do I have to scroll the lists of element and computed styles. This is a big time-saver for me. Thank you.
Guilherme Rizzo, over 5 years ago That's nice to hear, Nathan! :) Any suggestions for updates?
Nathan Cooper, over 5 years ago
A toggle to include the class along with the properties/values when copied, i.e., the entire selector.
If possible to do the above, maybe include also parent, sibling, inherited, etc. styles that also affect the selected element's appearance.
For pre-processors, include the location of the selected style in the source files; source maps I believe.
You're welcome and I look forward to future updates. Thanks
Guilherme Rizzo, over 5 years ago Hey Nathan, I'm looking forward to implementing your first suggestion today! You'll be able to copy the entire selector. :)
Nathan Cooper, 5 years ago
Hi Guilherme, that's great, thank you! :)
Guilherme Rizzo, over 5 years ago Nathan, I have good news! Just updated the app. Now you can copy the selector name! If you use Chrome, the extension will update itself. On Firefox, I'll implement auto-update functionality tomorrow. More updates to come!
Guilherme Rizzo, over 5 years ago Thanks, Alejandro!
Thomas Michael Semmler, over 5 years ago
Interesting. But I have to open up dev tools anyway, plus, if you are developing, you are probably having the devtools open all the time anyway. Great tool anyway though, there are tons of use cases.
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now