Co-founder here. My brother and I quit our jobs 7 months ago, and have been working on this day and night off of our savings since then.<p>The CSS Playground is a preview of our CSS styling tools, and we'll be adding some of our other components (layout, adding new elements, code export) soon. Currently, it only works in Chrome, but we're working hard to add Firefox support.
First of all: congrats on launching! 7 months is a <i>long</i> time, it has to feel good!<p>A long time ago I built "squeeze page" manager which had an editor like this (it was simpler and more focused on content management). I sunk a lot of time into it. However, I ran into the same problem I bet you guys will run into: "the design tool chasm". On one end are simple tools for publishing on the web (Weebly and Wordpress) and on the other are professional tools (Photoshop and Sublime Text 2/Textmate). In between are tools that no-one really wants.<p>Basically, don't stop at the editor. Its a feature. Take a look at Unbounce or HubSpot for "marketing tool" inspiration and Weebly and Wordpress for "publishing tool" inspiration. Or, if you want to be used by professional designers, you'll need to go in a whole different direction (which is likely the one you are on now). Of course, if you have target customers that love this as is, their feedback vastly trumps mine. But never stop talking to your target customers (steal them from the big boys with your personal touch and solve their problems)! Good luck guys!
Holy wow, great work guys! This is exactly the type of tool a lot of designers are looking for to bridge the gap between design and code (or at least get their feet wet before diving into it full-on). Hopefully this will get more visual artists using services like CSSDeck and Codepen, unless you plan on venturing into this realm yourselves to allow the community to create assets for everyone else to use - which would be fantastic.<p>Personally, because I still prefer writing from scratch, I'd use it after I thought I had a good framework coded up already just to quickly tweak it and try out some other ideas. Not sure how you plan on monetizing, but a tiered system for those of us who wouldn't use it to create from scratch would be appreciated, even though I'm not sure how you'd determine that (imports only?).
This is really nice, but I just can't get too excited over web apps. Whether it's not having direct access to my source files, relying on the service to stay up (either from server or business issues), working when offline, not having access to OS-level services, the clunkiness and slowness compared to native, or the cognitive overhead of the app being inside another app, I think I'll always prefer desktop apps.
This is so well done. Really impressive. It seems like a great tool for both designers and developers. The more I develop responsive sites, the more I realize how difficult and tedious it is. Hopefully, this takes a lot of the pain away.<p>I'm also super jealous you have a brother that you can develop a product with. My brother is a systems guy and doesn't want to create software at all.
This is way better than any Adobe application I've ever used :) no joke. I'm very impressed with the UI components that's some masterpiece over there. I demand you to release a UI framework haha.<p>Also this is probably first HN thread that everyone seem to like what they saw, no nitpicking at all. This must tell you that you guys are on the right track.
Lots of companies I know use a custom version of bootstrap as their styleguide/pattern library. I'd pay a lot for a functionality that can enable us to use our visually different bootstrap somehow to make dev ready UI.
That would be the most important differentiating feature for me. None of these do that
<a href="http://playground.webflow.com/" rel="nofollow">http://playground.webflow.com/</a>
<a href="https://www.easel.io/" rel="nofollow">https://www.easel.io/</a>
<a href="http://froont.com/" rel="nofollow">http://froont.com/</a>
<a href="http://html.adobe.com/edge/reflow/" rel="nofollow">http://html.adobe.com/edge/reflow/</a>
<a href="http://jetstrap.com/" rel="nofollow">http://jetstrap.com/</a>
<a href="http://www.divshot.com/" rel="nofollow">http://www.divshot.com/</a>
Hey guys, looks really awesome. I built Jetstrap (<a href="http://jetstrap.com/" rel="nofollow">http://jetstrap.com/</a>) which is attacking the problem in a different way for probably a different type of user, but this is really impressive. Great work!
I found the scroll bars very frustrating. They are so small that I could not drag the bar around very easily (reminds me of default scroll bars in Ubuntu these days). The contrast is so bad between the part that is dragged and its background that it took me a few seconds to actually make out which is which. The contrast of some of the text being grey on a darker grey background in the right sidebar was hard on my eyes. That part wasn't as annoying to me as the scroll bars though.<p>I do like the idea of this. The functionality seems to be there.
Incredibly well done and beautiful too - well done guys!<p>One route you may not want to get sidetracked down yet... I'd love compontents from this to use inside a CMS. Whether tools from the sidebar, or the easy WYSIWYG editor (if people could drag pre-prep'd text + photo layouts into the page, even better) -- I'd pay money for these, to build them into client sites.<p>Just a thought - everyone is inventing these standalone SaaS apps, but for all us doing custom software development - it'd be great to gain the benefit too.
This looks fantastic, if it works smoothly it solves so many problems for me. Great work, great idea.<p>Have you thought at all about price point? IMO I wouldn't try to enter the hosting space, at least not yet. That's not the value for me. I think you have a great product in the works just as a front-end development platform. If it works as described, I'd put money down for it today (customer validation, check).
This website actually crashes my macbook pro.<p>No really. I have this bug (verified by genius tech) <a href="http://oleb.net/blog/2012/05/15-inch-mbp-mid-2010-crashing-to-black-screen/" rel="nofollow">http://oleb.net/blog/2012/05/15-inch-mbp-mid-2010-crashing-t...</a> which I haven't given to them for repair yet.<p>The Product button's visual transition repeatedly crashes my box.
Otherwise, looks pretty cool :)
Congrats guys. I haven't had a chance to check out the full thing yet (reading HN on my iPad) but from a quick glance it looks incredibly thorough and well-done.<p>I think there will always be a contingent of folks who prefer to hand-code this stuff, but there is a larger contingent of folks for whom a great set of visual design tools will be incredibly valuable. So good on ya and good luck.
Amazing work with this!<p>I'm working on something similar, so I know the monumental amount of work that must of gone into this app, really impressed and looking forward to seeing your other components.<p>Here's a screenshot of mine:
<a href="http://s3.amazonaws.com/s3.selfsamegames.com/tmp/screen1.jpg" rel="nofollow">http://s3.amazonaws.com/s3.selfsamegames.com/tmp/screen1.jpg</a><p>Congrats!
Disclaimer, I'm not a designer and don't know much css. When I look at that wall of buttons I don't know how to use them to do what I want. I feel like if I knew css, I could probably code up what I want faster that pressing a bunch of buttons. Thoughts from designers/front end developers?<p>The preview tools are awesome though!
I'm both amazed and skeptical. This is some very nice work. I'm not sure if, in its current form, it would work well for all aspects of the design process. I think there are some trade offs compared to coding with text editors and dev tools.<p>I like having a tool that is super fast and responsive, and you lose some of that when it's embedded into the same page the site is being designed in. Having said that, it's easier to play with a design when you have an ui such as this. This mixes some of the advantages of photoshop with some of the advantages of designing in the browser. It's tricky to compete with the strengths of both tools and merge them into one.
I submitted this yesterday, but linked to the home page: <a href="https://news.ycombinator.com/item?id=5396626" rel="nofollow">https://news.ycombinator.com/item?id=5396626</a>
That is very impressive, congrats!<p>I'd really like to know the following: what process did you follow to create that 10min UI Tutorial video [1]?<p>Did you rehearse it and then record it all in one go? How did you memorize the script? Did you edit it with multiple takes of various scenes? Etc. Thanks so much.<p>[1] <a href="http://vimeo.com/62227334" rel="nofollow">http://vimeo.com/62227334</a>
I like the idea and it is very much a need of aspiring entrepreneurs who know little about tech. But I generally believe that it can cater to even those who know how to code good HTML and CSS to save time.
Do let me know how well does your tool cater to generating mobile / responsive websites.
Definitely love the fact that it's pre-designed. I think the FireFox support + responsive functionality is the right direction to go as those are the things I hate worrying about when doing front end work. As a Firebug user, I think this definitely fits into my toolbox.
This is awesome, bookmarked. This will help me because I've always struggled with CSS since I never sat down and actually learned it.<p>Just one thing - much of the text doesn't seem to render so smoothly. Is that intentional or is it just me...? Chrome on Windows fwiw.
This is just GREAT!
Made a tiny integrated app in under 5 min (including reading the docs). 100 times easier than using one of those odd-looking PDF classes (php dev here).<p>Start billing me, I want to retribute your effort.
Thanks for this! :)
As a UX engineer & designer, I think this looks great. I could imagine many non-engineers or non-designers using it. However, the right side seems to be too unintuitive even for me.
This is one of the first browser-based UIs for design that I'd actually use. Impressive stuff.<p>Question: Is there (or will there be) a way to edit the content of a clickable element (button, link)?
Video ain't working on Chromium / Linux (no Flash, no Java).<p>I really hate that: on a lot of sites videos plays just fine on Chromium / Linux without Flash.<p>How hard is it to create a website which serves videos in several formats depending on the client?