5 ms·

Open-sourcing Stylo

156 points by maccman 14y ago

pbreit 14y ago
Amazing work and so useful to dig through. Thank you and keep it coming!
Gring 14y ago
Brillant job, hat's off!
btown 14y ago
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 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.
- maccman 14y ago
  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.
- malandrew 14y ago
  Also checkout nodeify if you are using Rails: https://github.com/dkastner/nodeify https://github.com/dkastner/nodeify
techpeace 14y ago
Awesome stuff, Alex. Thanks for open-sourcing the code!
donpdonp 14y ago
What does Stylo do? I can make UI looking boxes and text but see no way to export or otherwise use what is created.
- maccman 14y ago
  At the moment, you can export selected elements by copying them and pasting their CSS into a text editor (Chrome dev).
skyhook_mockups 14y ago
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!
tferris 14y ago
OT: Another Svbtle blog in the wild—anyone likes them? (serious question, would like to hear some opinions)
- cshenoy 14y ago
  It's not really "in the wild". It's a part of the Svbtle network (http://svbtle.com/ http://svbtle.com/) started by Dustin Curtis. Check the link in the lower left corner.
- TazeTSchnitzel 14y ago
  I can't say anything about the content, but I love the minimalistic theme. I want it for my blog.
  - Void_ 14y ago
    The only problem is when you design a similar minimalistic theme, everybody will say you're copying Svbtle.
    - TazeTSchnitzel 14y ago
      Well, the criticism would be accurate.
  - mathieuh 14y ago
    Check out obtvse.
- detst 14y ago
  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.
- clutchski 14y ago
  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.
daleharvey 14y ago
This looks awesome I had the same idea to build a web based graphical design tool: http://upmock.com/earlybird http://upmock.com/earlybird (https://github.com/daleharvey/upmock-client 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
splatcollision 14y ago
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/ 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.
- gfosco 14y ago
  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.
  - splatcollision 14y ago
    Thanks, noted!
- makmanalp 14y ago
  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-Landing-Page-and-Why-Should-You-Care.aspx http://blog.hubspot.com/blog/tabid/6307/bid/7177/What-Is-a-L... http://sethgodin.typepad.com/seths_blog/2006/04/vocabulary_land.html http://sethgodin.typepad.com/seths_blog/2006/04/vocabulary_l... http://designmodo.com/landing-page-examples/ 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://postmarkapp.com/ http://basecamp.com/ http://basecamp.com/ https://kippt.com/ https://kippt.com/
dkrvt 14y ago
Very nice work. I couldn't find a way to export my quick design though, how was I supposed to do ?
sil3ntmac 14y ago
Awesome work Alex! One suggestion: CSS shadows have a spread parameter that your app is missing. Other than that, looks great!
lsdafjklsd 14y ago
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!
jacobolus 14y ago
> 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 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.

Open-sourcing Stylo

156 points by maccman 14y ago

pbreit 14y ago

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

Gring 14y ago

Brillant job, hat's off!

btown 14y ago

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 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.

maccman 14y ago
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.
malandrew 14y ago
Also checkout nodeify if you are using Rails: https://github.com/dkastner/nodeify https://github.com/dkastner/nodeify

techpeace 14y ago

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

donpdonp 14y ago

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

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

skyhook_mockups 14y ago

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!

tferris 14y ago

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

cshenoy 14y ago
It's not really "in the wild". It's a part of the Svbtle network (http://svbtle.com/ http://svbtle.com/) started by Dustin Curtis. Check the link in the lower left corner.
TazeTSchnitzel 14y ago
I can't say anything about the content, but I love the minimalistic theme. I want it for my blog.
- Void_ 14y ago
  The only problem is when you design a similar minimalistic theme, everybody will say you're copying Svbtle.
  - TazeTSchnitzel 14y ago
    Well, the criticism would be accurate.
- mathieuh 14y ago
  Check out obtvse.
detst 14y ago
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.
clutchski 14y ago
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.

daleharvey 14y ago

This looks awesome I had the same idea to build a web based graphical design tool: http://upmock.com/earlybird http://upmock.com/earlybird (https://github.com/daleharvey/upmock-client 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

splatcollision 14y ago

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/ 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.

gfosco 14y ago
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.
- splatcollision 14y ago
  Thanks, noted!
makmanalp 14y ago
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-Landing-Page-and-Why-Should-You-Care.aspx http://blog.hubspot.com/blog/tabid/6307/bid/7177/What-Is-a-L... http://sethgodin.typepad.com/seths_blog/2006/04/vocabulary_land.html http://sethgodin.typepad.com/seths_blog/2006/04/vocabulary_l... http://designmodo.com/landing-page-examples/ 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://postmarkapp.com/ http://basecamp.com/ http://basecamp.com/ https://kippt.com/ https://kippt.com/

dkrvt 14y ago

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

sil3ntmac 14y ago

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

lsdafjklsd 14y ago

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!

jacobolus 14y ago

> 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 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.