Dynamically generate HTML/CSS for forms, icons, buttons | Hacker News Reader

Dynamically generate HTML/CSS for forms, icons, buttons

livetools.uiparade.com

112 pointslambtron27 comments

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

That is intentional because they want you to get hooked!

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

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

Same here, I ended-up deleting the node in Firebug.

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

By 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?

No doubt for styling purposes.

I'd be curious what styling purposes require an h2 to be wrapped with a div or to use a div as a label instead of a label.

At the very, very least I would expect a generated form to be accessible, and this is not.

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

None of the interface elements in the builders work (correctly) in Opera. I certainly hope the generated html does a better job.

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

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

Isn't 'for' supposed to reference the 'id' of an input? All these examples reference 'name'.

Yes, you are correct [1] - it's a very common mistake in my experience.

[1]: https://developer.mozilla.org/en-US/docs/HTML/Element/label

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

A useful set of tools. It would be great to give the user some idea of browser compatibility, though.

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

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

I 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)

Please put a random generator

Cool looking sliders can't be moved in Opera 12.12 / Win7

Great tool! Thank you. I will be using this.

cool. it would be nice if it generated some reusable SASS mixins, not only the generated css.

This is cool! A time saver!!

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

Reply on news.ycombinator.com