StyleURL

Share & preview CSS tweaks instantly

3 followers

Share & preview CSS tweaks instantly

3 followers

Visit website

Chrome Extensions

•

Design resources

StyleURL is the easiest way for developers & designers to collaborate on CSS changes. Make your CSS changes in Chrome and StyleURL exports them directly. It's stored in a Gist on GitHub, so that you can share and make changes easily. StyleURL also generates links which load your CSS changes into existing webpages automatically.

Launch tags:Chrome Extensions•Design Tools•Open Source

Launch Team

CloudflareYour next app belongs on Cloudflare Workers. Deploy for free

Promoted

Pagedone

This seems like a cool concept. Few queries: How does this works? It extracts the changes and stores in github gist of the user? And then when receiver opens the url the plugin applies the changes fetching from github gist? If so Any way to change the storage source? As many projects are client works or confidential so we might not have rights to share it on github or any such open site. Any way to share by storing the changes on our own server or your paid service?

Report

8yr ago

Covy

Maker

> How does this works? It extracts the changes and stores in github gist of the user? And then when receiver opens the url the plugin applies the changes fetching from github gist? Yes, exactly that > If so Any way to change the storage source? As many projects are client works or confidential so we might not have rights to share it on github or any such open site. Any way to share by storing the changes on our own server or your paid service? Not currently, but that's a great idea. How much do you think you'd pay for that?

Report

8yr ago

Pagedone

@jarredsumner May be some 9$ a month? Or may be you can give some way that you charge one time for the plugin and my personal google drive or drop box storage is used.

Report

8yr ago

Wireframe Components Kit

@jarredsumner that's a difficult question. I'd pay a few $/month at the most. Storage is cheap plus we'd be paying for our own storage. You could also do a one time payment.

Report

8yr ago

Covy

Maker

Very excited to ship StyleURL We built StyleURL because @lucy_guo would send me quick CSS changes for stuff we’re working on over Slack and it was hard to know: - Which page does it apply to? - Which file does it go in? - What do the changes look like before and after? I also frequently play around with styles in Chrome to figure out a fix for small CSS issues, and wanted a quick way to export whatever I did out of Chrome Devtools and into the code itself. Before StyleURL, I had to remember which elements I changed, select each, then remember which styles I changed, and copy paste each style — and now I can just click Download. Fixing problems you experience yourself is fun. Please share any feedback you have, my email is jarred@jarredsumner.com and you can text me at (925) 385-8898 If you’re curious about how it works, StyleURL’s extension is open source — https://github.com/Jarred-Sumner...

Report

8yr ago

Wow! So handy and well implemented! Thanks! Would be great to have a way to include the diffs in the URL itself (ala itty.bitty.site) to save the whole gist interaction when the diffs are small enough to fit. I realize this limits the version control possibilities, but for something easy like just changing a few colors, could be nice? UX-wsie, it also took me a minute to figure out that clicking on the app button at the top added the interaction bar at the bottom of the page. It is a good bar, and when I found it I was happy, but I could see how people like me might click on the button and then not see the bar and think it is not working (almost me!). Maybe this could be made more discoverable by turning the button into a pull-down handle with "Enable bottom bar" as the choice. Finally, I wish there was a way to seamlessly share style-URLs with people who (1) can't or dont want to add the extension, or (2) don't use chrome. Maybe having the styleurl.app server act as a proxy in cases where the app is not present and the person selects "Please show me a proxied version of the site" or something like that? I understand that the proxy would cause problems with things like cookies and relative links and... well all kinds of other stuff. Hmmm maybe not possible to do well then... but maybe something better than nothing? Thanks again! Great utility!

Report

8yr ago

Covy

Maker

@josh_levine Thanks for the really helpful feedback Josh. > UX-wsie, it also took me a minute to figure out that clicking on the app button at the top added the interaction bar at the bottom of the page. It is a good bar, and when I found it I was happy, but I could see how people like me might click on the button and then not see the bar and think it is not working (almost me!). Maybe this could be made more discoverable by turning the button into a pull-down handle with "Enable bottom bar" as the choice. I can definitely see how this is confusing. The bottom bar will automatically appear when you make CSS changes from Chrome Devtools, so you usually don't have to click the button in the toolbar. That being said, we probably should have a post-install page that opens up and shows a quick onboarding video as a way to explain how to use StyleURL (along with maybe a few screenshots for those who don't want to watch a ~2 minute video) > Finally, I wish there was a way to seamlessly share style-URLs with people who (1) can't or dont want to add the extension, or (2) don't use chrome. Maybe having the styleurl.app server act as a proxy in cases where the app is not present and the person selects "Please show me a proxied version of the site" or something like that? I understand that the proxy would cause problems with things like cookies and relative links and... well all kinds of other stuff. Hmmm maybe not possible to do well then... but maybe something better than nothing? Yeah, would be great to find a good way to do this. One thing we've considered is taking two screenshots -- before applying the styles and after, and then creating a GIF from that, so people could visually see the changes without having to install anything A proxied version is an interesting idea. It's tough in practice for all the reasons you described, but there's gotta be a way to make it non-horrible _most_ of the time

Report

8yr ago

Pitch a Date

Maker

We made a special StyleURL for Product Hunt: https://www.styleurl.app/www.pro... ---------------- Hey everyone! We're really excited to share StyleURL with you. We think it'll make the iteration cycle for product development move much faster. Designers and developers often times make changes in dev tools and don't remember what changes they save. On top of that, when designers make changes, in order to show others what it looks like live, they need to implement then deploy it. This allows people to send changes instantly! We've been using it ourselves and it's much faster than slacking CSS code around (which is what we used to do for our other products) :)

Report

8yr ago

@lucy_guo Cool - this ended up a side effect of the tool Context (https://ctxt.io) I was building for sharing website pastes when I left Quora. Ended up being super useful for a segment of the users to do web dev with it: make CSS changes in dev tools and then share that version (and its new CSS) via the url. Have a bunch of tips for doing workarounds for CORS and font files if you like!

Report

8yr ago