SnipCSS

tldr; SnipCSS is a design tool for developers who are sick of CSS, where other tools are built for front-end developers to fidget with and adjust their designs to make them pixel perfect.

The goal of SnipCSS is to spend as little time on front-end development/design as possible. I think this is a different use-case than other competitors. That's why other products like CSSScan feature WYSIWYG editing, and on-screen editing of properties like fonts, shadows and borders. It's a tool built for front-end devs. So even if it does do snippets (in a completely different way which doesn't honor the original design IMO), the primary goal is to scan/see what you want from another website's design and then integrate it into your own because you're a perfectionist front-end developer.

As a backend developer I'm not interested in a tool like that. I see something on the web and say "that's very similar to what I want my website. I'm taking that." I want it to look exactly the same because it's good enough, and I'll only swap out images/icons, and remove a couple things like the fonts so the widget doesn't look completely out of place when put on my site. I also want it responsive like it was on the original site, the CSS scoped to only that widget, but to still match the original styles as much as possible. Finally, I want it automatically made into a dynamic template (with repeating items) in React/Vue/Twig so then I can inject my data directly into the template.

If I have all that I don't have to do ANY design. I hate CSS so much I made something to avoid it as much as possible. That's the goal of SnipCSS and why my product is so much different than other development tools that work with CSS.

With Version 1.4.0 I'm finally getting close to that vision. I can generate Mustache templates automatically from snippets. Next up is React/Vue. Check it out if you're a developer who needs to work with CSS and doesn't like it - you might find it useful.

https://chrome.google.com/webstore/detail/snipcss/hbdnoadcmapfbngbodpppofgagiclicf/related

Check it out - even the free version is a great dev tool:

https://chrome.google.com/webstore/detail/snipcss/hbdnoadcmapfbngbodpppofgagiclicf/related

So over the last 2 months I've been working hard to make a pro version of SnipCSS completely inside the extension. (instead of a desktop application like I made in 2020)

I think this is the right approach. Anyone who uses the extension can see the benefit, but it's strange to tell them to download an unfamiliar desktop application. With all pro features being inside the extension, it really encourages people to upgrade to unlock the features they want.

In the free version you can run desktop resolutions, but the Pro version you can run mobile and desktop resolutions to get all media query styles. You can also select multiple elements in one run, and export clean HTML code.

I have a few more small features and some website updates I need to do, but after that I plan to start working on templating exports and the automation to build a snippet directory on the website. Those will be the killer features that make it an indispensable tool for developers. Especially for backend developers like me who aren't strong at design... if I can take any design I see on the web and repurpose it to my own, export it to a React/Twig/Smarty/Vue template I can supercharge my own development. If nothing else this product is going to be extremely useful to me. So I can't wait to keep building it.