make style match guidelines doc

flowhub / the-graph

SVG custom elements for FBP graph editing and visualization. Used in noflo/noflo-ui

https://flowhub.github.io/the-graph/demo-full.html

MIT License

1.01k stars 179 forks source link

make style match guidelines doc #107

Closed forresto closed 10 years ago

forresto commented 10 years ago

Use Stylus to generate theme files with different variables.

grunt build

forresto commented 10 years ago

All the colors are now defined here: https://github.com/the-grid/the-graph/blob/master/themes/the-graph-dark.styl

So far: screen shot 2014-03-05 at 8 40 35 pm

bergie commented 10 years ago

The Flowhub site contains some shots of the original UI:

screenshot 2014-03-06 at 01 24 13

Some points from this one:

Double-bordered nodes
Subtle changes in icon color and sizing
Triangular output ports
Cleaner look for exported ports

forresto commented 10 years ago

I'm less excited about the triangle ports. The circle looks like it is on the frame, but the triangle looks like it is half-under. Seems like we should get more meaning if the shapes will be different, like port type?

forresto commented 10 years ago

half-circle ports: screen shot 2014-03-06 at 5 19 46 pm

bergie commented 10 years ago

Just for reference, how things used to be:

screenshot 2013-12-08 at 11 39 16

screenshot 2013-12-09 at 01 14 00