Open-sourcing Stylo | Hacker News Reader

Open-sourcing Stylo

blog.alexmaccaw.com

156 pointsmaccman28 comments

This looks awesome

I had the same idea to build a web based graphical design tool: http://upmock.com/earlybird (https://github.com/daleharvey/upmock-client)

It works as a nice demo, but would take a lot of time that I dont have to make it reach really useful quality.

I am hoping a web based tool for graphically designing user interfaces at high fidelity comes around soon, this looks great, and certainly a better start than mine. but its still early days, I would love to see some momentum around contributing to it

Nice work. Thanks for sharing the source, I'll have to look and see if there's anything useful there :)

For designers looking for something like this that's more finished and ready for use in web design production workflows, and supported, please give my bootstrapped web application Edit Room a serious look: http://www.edit-room.com/

Not only can you create semantic HTML structures and style them with professional design production tools, you can also animate your main blocks of content with visual keyframes and Edit Room generates CSS Animations. Works with both WebKit and Gecko browser engines.

The layout engine is responsive by default, with layout units defined as percentages... Key commands... undo/redo... constant autosave... Webfonts with Typekit integration... and more.

Sorry for this: You really need to have a graphics designer give your site an update. It's so painful to the eyes that I can't even bring myself to sign up.

Thanks, noted!

Hey man, not to be a buzzkill but your landing page needs a ton of work ... As is, only your slogan box fits in my browser window, and I have to scroll tons and tons while reading oversized text. When you make everything so big, you inherently de-value the emphasis that large text gives. You also have a TON of text, and I can't survey the page to see what I'm interested in. I'm forced to read through everything. Take a look at these resources:

http://blog.hubspot.com/blog/tabid/6307/bid/7177/What-Is-a-L...

http://sethgodin.typepad.com/seths_blog/2006/04/vocabulary_l...

http://designmodo.com/landing-page-examples/

Edit: I'm glad I didn't come off as a dick. Here are some homepages I like:

http://postmarkapp.com/

http://basecamp.com/

https://kippt.com/

Cool thanks very much for the feedback - this is exactly what I'm looking for!

Very inspiring! Maybe I'm just stupid, but I don't see what license you're using anywhere... MIT perhaps? If so, I'll definitely be using your color picker and context menu code.

For others who might be interested (as I am) in using Common.js modules in the browser, browserify ( https://github.com/substack/node-browserify ) does the same thing for Node.js as the sprockets-commonjs used in this project: compiles those modules into a single file for the client. It's especially effective there because you can use the same node_modules on the browser and the server, so you get effortless sharing of code.

You're correct - neglected to included a license (fixed now). It's under the MIT. Yes, I'll be releasing an improved version of the color picker separately.

Also checkout nodeify if you are using Rails:

https://github.com/dkastner/nodeify

> As a self-taught programmer, color theory is one of those things I hadn't had the chance to be immersed in yet, and learning about HSL and HSV was fascinating.

For what it’s worth, HSL and HSV (just like the RGB they’re trivially derived from) are both terrible color spaces to be interacting with, as humans. Here’s my fuller explanation why: http://en.wikipedia.org/wiki/HSL_and_HSV#Disadvantages. That they’ve been enshrined places like the CSS spec and most software color pickers is yet another example of programmer convenience winning over human-friendly design.

OT: Another Svbtle blog in the wild—anyone likes them? (serious question, would like to hear some opinions)

It's not really "in the wild". It's a part of the Svbtle network (http://svbtle.com/) started by Dustin Curtis. Check the link in the lower left corner.

I can't say anything about the content, but I love the minimalistic theme. I want it for my blog.

The only problem is when you design a similar minimalistic theme, everybody will say you're copying Svbtle.

Well, the criticism would be accurate.

Check out obtvse.

I believe Alex's blog was an original part of the "Svbtle network". I don't see any particular improvements over his old blog, which I believe is still up. He seems to have very good design skills so I would rather see something original but I can't say I really care much either way.

I'm annoyed that I can't resize the page freely on my tablet. That font at that size is really hard to read.

Kindle Fire using silk

I don't like the "kudos" widget. It's not clear you're "giving kudos" just by hovering over a widget and there's no way to retract a vote. Kind of cheesy to me.

What does Stylo do? I can make UI looking boxes and text but see no way to export or otherwise use what is created.

At the moment, you can export selected elements by copying them and pasting their CSS into a text editor (Chrome dev).

I love your work on sprockets, and this project is an excellent example of how to use it. I currently develop Backbone apps using the Ruby static site generator middleman which uses regular sprockets. So I have to namespace my app, but would rather use commonJS. Thanks for the awesome codebase!

Awesome work Alex! One suggestion: CSS shadows have a spread parameter that your app is missing. Other than that, looks great!

Very nice work. I couldn't find a way to export my quick design though, how was I supposed to do ?

Amazing work and so useful to dig through. Thank you and keep it coming!

wow the app is really nice from a UX point of view. Looks like you nailed the fundamentals of manipulating the objects well.

Also the design is slick.

great work!

Awesome stuff, Alex. Thanks for open-sourcing the code!

Brillant job, hat's off!

Reply on news.ycombinator.com