Inputs With Class Plugin

A rails plugin for automating best practice form styling.

Ahhh. Flush with my first rails plugin. Feels good! Now it's time to see what releasing one in the wild is like...

Seems like a good occasion to thank all the reliable plugin producers out there who's work I've benefited from in the past. I hope my work might some day prove to be even partially as time saving and useful a contribution to your projects, as yours was to mine.

The following write up is from the plugin's README.

Quick Intro

1. Rails generated <input/> tags automatically get classed for their ‘type’ value.
2. Rails generated <select/> lists automatically get classed as ‘single’ or ‘multiple’.
3. Avoid name conflicts with your existing css classes by adding an optional class name prefix.
4. Generate a starter stylesheet with some crisp default styles.
5. Plays nice with any ad-hoc helper classing you do.
6. To get unclassy again just pass in :class => false
7. 25 tests confirm functionality in all relevant rails helpers.

To jump down to a more detailed intro to each of the above features click here.

Install

1. From your plugins directory.

   git clone git://github.com/leewbutler/inputs_with_class.git
   

2. Add the css file to your public/stylesheets directory.

   rake inputs_with_class_css
   

3. Call the stylesheet from the head of your erb template.

   <%= stylesheet_link_tag 'inputs_with_class.css' %>
   

Why

When a CSS developer wants to set the width of all form text fields to 200px, they might try this.

input { width: 200px; }

Unfortunately this not only makes all text inputs 200px, but also all radio buttons, checkboxes, etc, because all are represented by the same html tag <input/>. It makes perfect sense to your browser... "What? You told me to make all input tags 200px so that's EXACTLY what I did" but makes for horrible layout results. To solve the issue in modern browsers you can use attribute selectors.

input[type="text"]{ width: 200px; } 

input[type="radio"]{ width:  30px; }

Problem solved! Time to go do something super fun! But not so fast. )-: IE6 rears its ugly head and injects another fat dose of un in our fun with no support for attribute selectors. Instead the consensus among UI developers is to manually add a class named for the input-type of the form element - so you get the pattern...

<input type='text'  class='text' />
<input type='radio' class='radio'/>

It's a common practice that clutters rails helper calls with predictable classes. The inputs_with_class plugin automates this pattern along with two additional common class patterns to style our 'single' and 'multiple' select lists.

Detailed Intro

Inputs_with_class automatically applies best-practice (universal standard) css naming conventions to all rails generated form elements, thereby giving your css developer full style control of forms right out of the starting gates. Its functionality includes:

1. Rails generated select lists automatically get classed as 'single' or 'multiple'.

   <select class='multiple' multiple='multiple' size='2' >
   <select class='single'>
   

2. Rails generated <input/> tags automatically get classed for their 'type' value.

   <input class='password' type='password'/>
   <input class='checkbox' type='checkbox'/>
   <input class='button' type='button'/>
   <input class='hidden' type='hidden'/>
   <input class='submit' type='submit />
   <input class='image' type='image'/>
   <input class='radio' type='radio'/>
   <input class='file' type='file' />
   <input class='text' type='text'/>
   

3. Avoid naming conflicts with your existing css classes by adding an optional INPUTS_WITH_CLASS_PREFIX in the config block of your apps config/environments.rb.

   INPUTS_WITH_CLASS_PREFIX = 'bacon-'
   

   Gets you this....

   <input type="text"  class="bacon-text" />
   <input type="radio" class="bacon-radio" />
   

4. Generate a starter stylesheet with all related classes and some basic default styles. From the command line in your app root...

   rake inputs_with_class_css
   

5. Plays nice with any ad-hoc helper classing you do, so you get...

   class="yourclass inputswithclassclass"
   

6. When the time comes, and you suddenly decide to get unclassy again...

   :class => false
   

7. 25 tests confirm functionality in all relevant rails helpers. From the command line in your app root...

   cd vendor/plugins/inputs_with_class
   rake test
   

8. Heads up for these gotchas when you add or change your INPUTS_WITH_CLASS_PREFIX.
   1. The names in your stylesheet need to be manually changed to match.
   2. The server needs to be restarted for the prefix to register.
9. Future dev goals:
   1. Apply the pattern within the haml engine (if present) to automatically style any hand coded %input and %select tags. Git branches toward this goal are welcome. (-: