Where the design community meets.
Indie developer Joined over 2 years ago
Glad to hear that, Chris! Hope you have a great experience.
Let me know if you need help or have any feedback :)
Hey Tekeste, thanks for posting!
Dear Designer News, creator here, happy to answer any questions and talk a little about the design process of CSS Scan :)
While working with web development, I've always found myself crushing my head to understand why the CSS was not working, looking through thousands of CSS rules on the browsers’ Dev Tools, scrolling and scrolling...
And while surfing the web, sometimes I just wanted to get 1 thing from a framework (specifically Bootstrap’s alert) or am curious about what is the amazing box-shadow, font, border-radius, etc of an element I just saw.
A browser extension that when activated on a page, enables you to instantly visualize the CSS of any element you hover over and let you copy its entire rules with a single click.
Check out the free demo on the website: https://getcssscan.com
CSS Scan is particularly useful for:
I have to say that I was feeling like “just do it”, but anyway I decided to validate the problem and solution.
The solution I had in mind was just like the extension WhatFont? but for checking CSS.
So I made an image preview of how the extension would look, and reached out Facebook and Telegram developers groups, and sent them a Typeform with a few basic questions:
The results were convinceable enough to make me start building it.
My audience was not too much defined, I just had “designers and front-enders” in mind :)
To work across any OS, I decided to build it as a browser extension.
And then coded for precisely 50 hours and 17 minutes from the first line of code to the first version - luckily I recorded all this and made a nice speed video, you can check it here: https://www.youtube.com/watch?v=OtsNNXpXcYs
CSS Scan 1.0 was launched 9 months ago, and since then I’ve made a lot of new features, bug fixes, and improvements, the most important ones:
This is a work that has taken me almost 1 year so far, so I’m excited to share with you and genuinely interested in hearing what you think about it.
I am all ears if any of you have any ideas or feedback.
SPECIAL: I’m also giving you an exclusive DN mates 25% discount limited for the first 10 sales from here. To use it, buy it from this URL: https://gum.co/cssscan/dn-mates :)
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!
That's nice to hear, Johnny! Wish you and your team the best.
Hey Nathan, I'm looking forward to implementing your first suggestion today! You'll be able to copy the entire selector. :)
Thank you, Helena! I'm glad you like it :)
That's nice to hear, Nathan! :) Any suggestions for updates?
Hey Designer News! Creator here, happy to answer any questions! :)
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.
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:
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
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!
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.