After working on <a href="http://roughjs.com/" rel="nofollow">http://roughjs.com/</a> I thought it would be interesting to create common sketchy UI components that worked like actual controls. Web components seemed liked the obvious tech for that. So, yeah, here's wired-elements.
Looks nice, but I have a bug: The sliders don't work properly, when trying to move them they will always start back at 0. (I'm using Firefox 60).
Reminds of the Napkin look and feel for Java Swing apps. I worked on a project where we only demoed the Napkin L&F to our customers until we were feature complete.<p>The idea was to keep them focused on functionality.
This is fantastic! Very useful to get a concept into the browser and hopefully minimize clients focusing on visual design preferences too early in the process.
i started working on a react clone of wired from a few months ago - kinda dont have time to continue on it but if anyone wants to take over please do: <a href="https://github.com/sw-yx/react-wired" rel="nofollow">https://github.com/sw-yx/react-wired</a><p>also preet's designer tool is very very very usable: <a href="https://wiredjs.github.io/designer/" rel="nofollow">https://wiredjs.github.io/designer/</a> basically a free balsamiq!
I like it. The thing that I'm asking myself now is why do I like it (and other "humanized" drawings) ? I've always preferred accuracy over ambiguity, clean minimization over unnecessary clutter, shouldn't I prefer clean straight lines over something a human can draw on a sheet of paper? I'd never want to read a book written in human handwriting, so why is this appealing to me? Is it perhaps because the lack of optimization of the diagram contrasts and brings out the simplicity of the idea being conveyed? I could bring up some theories but can't say for sure.
That's brilliant! One suggestion I have is to prevent rerendering when changing states, e.g. when checking a checkbox, draw a checkmark without changing the shape of the actual box it's in, or when selecting a dropdown item, to not change the edges of the dropdown even if the label displayed in it changes. Probably a lot more work though :)
This is amazing, I love the sketched feel to it. I started an open source project in the fall, PaperCSS, that’s in the same category as wiredJS. PaperCSS is like if someone quickly drew the page with a marker, whereas this is as if someone sketched it all with a pencil. Happy to see less clean lines on the internet :)<p><a href="http://github.com/papercss/papercss" rel="nofollow">http://github.com/papercss/papercss</a>
I used Sketchy theme from Bootswatch for a game I did last week for a contest.<p><a href="https://bootswatch.com/sketchy/" rel="nofollow">https://bootswatch.com/sketchy/</a><p><a href="https://github.com/kay-is/startup-clix" rel="nofollow">https://github.com/kay-is/startup-clix</a>
Nice.<p>I still drool over the Drawing Board theme from Classic Mac OS.<p><a href="http://fileasylum.weebly.com/uploads/1/0/2/9/1029074/2682747.gif" rel="nofollow">http://fileasylum.weebly.com/uploads/1/0/2/9/1029074/2682747...</a>
I tried to build an svg and web component app about three years ago and just had a devil of a time with compatibility. Are web components a thing again? I sure hope so.
Oh wow this gave me some flashbacks to using Balsamiq.<p><a href="https://balsamiq.com/" rel="nofollow">https://balsamiq.com/</a>
What is the use-case for this? I read and agree that writing HTML or JavaScript is too costly for wireframes and this is why wireframe tools are handy, because you can cheaply sketch out plans or ideas. But this is in JS, so "drawing" with this would be costly.<p>I can see that it can be used for the fun look, but other than that, what's the point of this framework?
Nice! This would be super cool when applied to some nice diagramming libraries like Mermaid and Markdeep.<p><a href="https://github.com/knsv/mermaid" rel="nofollow">https://github.com/knsv/mermaid</a><p><a href="https://casual-effects.com/markdeep" rel="nofollow">https://casual-effects.com/markdeep</a>
This is great. By the way, if anyone is interested in a library like rough js but for iOS/tvOS apps, I made one called rough cocoa <a href="https://github.com/nickshillingford/Rough-Cocoa" rel="nofollow">https://github.com/nickshillingford/Rough-Cocoa</a>
I really like the look, very nice job on that.<p>Is there any particular reason though why you didn't follow the aria standards for the controls? None of these controls can be used by a keyboard, and a screen-reader sees them only as text.
Love it! can't wait to incorporate into my project www.stretchsketch.com currently old fashioned jquery/javascript/html/SVG. Polymer is becoming a very strong candidate when introducing a new framework.
Has someone tried these with React? An initial test didn't work for me: <a href="https://codesandbox.io/s/pp4q7kw9q7" rel="nofollow">https://codesandbox.io/s/pp4q7kw9q7</a>
This is fantastic! I’ll have to take a look at the licensing, id love to implement this on <a href="https://framestr.com" rel="nofollow">https://framestr.com</a> as an available form skin.
Reminds me of<p><a href="https://github.com/tsx/shireframe" rel="nofollow">https://github.com/tsx/shireframe</a><p>Which if author is not aware, he could use as inspiration.
<p><pre><code> The elements are drawn with enough randomness that no two renderings will be exactly the same — just like two separate hand-drawn shapes.
</code></pre>
Awesome, but why go through all that trouble if the text is going to be the same? I know typography is another degree or two of complexity, but I think that would make this particular feature complete.