

Open-sourcing Stylo - maccman
http://blog.alexmaccaw.com/stylo

======
daleharvey
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

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

~~~
makmanalp
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://blog.hubspot.com/blog/tabid/6307/bid/7177/What-Is-a-Landing-
Page-and-Why-Should-You-Care.aspx)

[http://sethgodin.typepad.com/seths_blog/2006/04/vocabulary_l...](http://sethgodin.typepad.com/seths_blog/2006/04/vocabulary_land.html)

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

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

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

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

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

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

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

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

~~~
TazeTSchnitzel
Well, the criticism would be accurate.

------
donpdonp
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
At the moment, you can export selected elements by copying them and pasting
their CSS into a text editor (Chrome dev).

------
lsdafjklsd
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!

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

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

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

------
skyhook_mockups
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!

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

------
Gring
Brillant job, hat's off!

