
Dynamically generate HTML/CSS for forms, icons, buttons - lambtron
http://livetools.uiparade.com/
======
glesica
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.

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

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

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

~~~
roam
No doubt for styling purposes.

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

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

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

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

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

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

~~~
ZoFreX
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>

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

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

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

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

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

------
tknew
Please put a random generator

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

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

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

------
deepuj
This is cool! A time saver!!

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

