6 ms·
Dynamically generate HTML/CSS for forms, icons, buttons
- tech-no-logical 14y agoNone of the interface elements in the builders work (correctly) in Opera. I certainly hope the generated html does a better job.
- glesica 14y agoI spent about 60 seconds trying to figure out how to clear the modal that comes up after clicking on "Button Builder". The "X" to close the dialog is so thin that I literally couldn't see it. That isn't good design. Once I figured it out, neat tool.
- suyash 14y agoThat is intentional because they want you to get hooked!
- stagas 14y agoSarcasm aside, are there any metrics whether a blocking automated popup actually increases any kind of conversion? Because from my experience it causes confusion and it hides the content you are trying to see. It's just annoying. I usually close the tab immediately instead of closing the popup, I don't expect any useful content from anyone that tries to force me into signing up to their lovely newsletter or something this way. It just shows you're stupid and don't give a shit about your users' experience.
- suyash 14y agoI mostly agree with you, but I'm not sure if there is data to prove. I would be interested in running such an A/B test myself.
- Joe8Bit 14y agoSame here, I ended-up deleting the node in Firebug.
- IgorPartola 14y agoNo Firebug on the iPad. Had to figure it out the hard way. Edit: most good *Box implementations let you click/tap on the grey overlay. It is a much larger target and that is what I try before looking for the X. This implementation does not have that feature.
- polyvisual 14y agoA useful set of tools. It would be great to give the user some idea of browser compatibility, though.
- jmickey 14y agoWould be fantastic, if instead of having to provide individual colour shades for the button border, shadow, etc, I could just provide one overall colour and all other ones are derived from that. Apart from that - a very useful tool indeed!
- suyash 14y agoI don't see the need for this tool, instead I like jsfiddle much better where you can edit the source directly instead using these controls. Generated CSS is not the best either.
- newsmaster 14y agoGreat tool! Thank you. I will be using this.
- zalew 14y agocool. it would be nice if it generated some reusable SASS mixins, not only the generated css.
- deepuj 14y agoThis is cool! A time saver!!
- hpaavola 14y agoBy default the form builder gives you HTML like this: <form class="form-container"> <div class="form-title"><h2>Sign up</h2></div> <div class="form-title">Name</div> <input class="form-field" type="text" name="firstname" /><br /> <div class="form-title">Email</div> <input class="form-field" type="text" name="email" /><br /> <div class="submit-container"> <input class="submit-button" type="submit" value="Submit" /> </div> </form> Why wrap the h2 in div? Why labels are divs? Why the button is wrapped in div? Br elements?
- obituary_latte 14y agoIs it really dynamic if you have to enter a bunch of stuff to create the elements? I was expecting from the title some kind of tool that would create the form on the fly. I guess I should have read more gooder.
- jQueryIsAwesome 14y agoSelecting the colors one by one is really annoying; I would recommend something like the CSS gradient generation tool[0] where you can easily change the HUE, saturation and lightness of all the colors at once. Presets like theirs would be nice too. [0]http://www.colorzilla.com/gradient-editor/ http://www.colorzilla.com/gradient-editor/
- didgeoridoo 14y agoYikes. These generated forms are a semantic markup and accessibility nightmare. No legend or labels to be found. If you find yourself writing forms like this, please please seek out some resources[0] on how to approach them properly. [0]http://www.gethifi.com/blog/html-forms-the-right-ways http://www.gethifi.com/blog/html-forms-the-right-ways
- jasonkostempski 14y agoIsn't 'for' supposed to reference the 'id' of an input? All these examples reference 'name'.
- ZoFreX 14y agoYes, you are correct [1] - it's a very common mistake in my experience. [1]: https://developer.mozilla.org/en-US/docs/HTML/Element/label https://developer.mozilla.org/en-US/docs/HTML/Element/label
- codegeek 14y agoI like it. Useful tool. Btw, I noticed that if I change the Text color to white, the text color button itself changes completely to white and i cannot see it anymore (IE8)
- manishsharan 14y agoThis is a great tool ; however my advice to any programmer who found this useful is to learn a CSS pre-processor like LESS or SASS+Compass (my preference). I am programmer and I used to love WYSIWYG tools for building /styling buttons and forms; my favourite tool was Stylizer. However, once I began to get some level of understanding of SASS/Compass, I rarely use those tools. If and when I do use WYSIWYG tool, I copy a over the generated CSS as a SASS mixin.
- nosecreek 14y agoNice tool. It would be good if you also allowed for manually entering certain values. For example, I might want to set the font-size to 16px because that is the font-size used by the rest of my stylesheet. With just the slider I don't really know how the text on my button will look next to the rest of my page.
- tknew 14y agoPlease put a random generator
- BetterLateThan 14y agoCool looking sliders can't be moved in Opera 12.12 / Win7