There's no simple demo.

[cpidx]

I've tried following the directions in the documentation at least 10 times and can't get this plugin to work. Is it possible to add a couple demo.html files to the project to show how to do a simple and complex implementation?

[elclanrs]

The demo is a showcase of everything that's possible. What are you trying to do? Here's the simplest example I can think of. Make sure to load Ideal Forms into your project first. Hope this helps:

HTML:

<form id="myform">
  <div><label>Username:</label><input type="text" name="user" class="required username"/></div>
  <div><label>Password:</label><input type="password" name="pass" class="required pass"/></div>
  <div><label>E-Mail:</label><input type="email" name="email" class="required email"/></div>
</form>

jQuery:

$('#myform').idealforms();

If you want to use a custom path for your images instead of the default less/themes/basic you need to recompile the project into CSS. Follow this instructions:

• Download the project
• Download a LESS compiler, for Mac you can use Less App, for Windows you can use Winless.
• Update the path to your images in less/themes/basic/basic.less
• Drag and drop the less folder into the app and check jquery.idealforms.less only, which links all other files.
• Compile the project into CSS.
• Finally import the newly created CSS file into your project.

The above can seem over-complicated if you're not familiar with CSS Preprocessors, like LESS, but it provides way more flexibility.

[cpidx]

Thanks - I figured it out now. It appears this plugin doesn't work well with Twitter Bootstrap. It's very nice though! Please let me know if you plan to offer a Twitter Bootstrap friendly version.

[elclanrs]

No, it doesn't work very well. Twitter Bootstrap for some reason opted to use global css styles in form.less, styles that are beyond a reset or normalizer, and even more problematic is that most of the values are set in pixels. Ideal Forms uses the namespace ideal just like jQuery UI uses the namespace ui for example; I don't understand why Bootstrap doesn't follow this common practice.

I don't plan to add support right away, because I'm working on other stuff that I consider more relevant, but I might add it in the future.

For now, your best option to make it work properly would be to remove all the form related stuff from Bootstrap. You can do this in two ways:

Download a custom build

• Go to http://twitter.github.com/bootstrap/customize.html
• Unckeck forms under "Base CSS".
• Download custom build

Re-compiling it yourself

• Download the Bootstrap project
• Edit less/bootstrap.less and remove the line @import "forms.less"
• Compile bootstrap.less into CSS
• Import new CSS into your project

Unless there are some other global problematic styles elsewhere this should do it.

[cpidx]

That worked great! Thank you.