Starter CSS based on Blueprint CSS for use with CFWheels helpers

gistfile1.css

/*************************************************
	FORMS

Notes: Add this predefined values to your /config/settings.cfm file:
Then, just make sure you add #startFormTag(class="generic")# to any form you want this CSS applied to.

<cfscript>
// Form Field Defaults
set(functionName="textField,textFieldTag,textArea,textAreaTag,passwordField,passwordFieldTag,select,selectTag,fileField,fileFieldTag", 
		prependToLabel="<div class='field'>", 
		append="</div>", 
		labelPlacement="before");
		
// Checkboxes
set(functionName="checkBox,checkBoxTag",
		append="</div>", prepend="<div class='checkbox'>", labelPlacement="before", labelClass="checkboxLabel", class="checkbox"); 
set(functionName="checkBoxTagGroup", 
		isFieldset=true);

// Radios
set(functionName="radioButton,radioButtonTag",
		append="</div>", prepend="<div class='radio'>", labelPlacement="before", labelClass="radioLabel", class="radio"); 
		
// Date Time Selectors
set(functionName="dateSelectTags,dateSelect,dateTimeSelect,dateTimeSelectTags",
	 minuteStep="5", timeSeparator="", separator=""		 );
	 
// Submit Buttons
set(functionName="submitTag", value="Save Changes", class="submit");
</cfscript>

*************************************************/

/*************************************************
	Generic Form Inputs / Elements
*************************************************/
form.generic input[type="text"], form.generic textarea, form.generic select,  form.generic input[type="password"] {background: #FBFBFB; -moz-border-radius: 3px; -webkit-border-radius: 3px;	border-radius: 3px;  float:left;}
form.generic input[type="text"], form.generic input[type="password"], form.generic input.text, form.generic input.title, form.generic textarea, form.generic select {margin:0;}
form.generic input[type="text"]:focus, form.generic input.title:focus, form.generic textarea:focus, form.generic select:focus {border:1px solid  #FC0; background:white;}
form.generic input[type="radio"], form.generic input.radio {float:left; top:0;} 

form.generic input { padding:3px;}
form.generic textarea {width:390px;height:250px;padding:5px; }
form.generic textarea.half {height:100px; }
form.generic select.fullwidth {width:405px;}
form.generic fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px;	border-radius: 5px; }
form.generic legend {font-weight:bold;font-size:1.2em;}
form.generic label {font-weight:bold; float:left; width:150px; /*border-bottom:1px solid #ccc;*/}
form.generic label.error {clear:left;  margin-left:150px; padding:3px; background:none; border:none;}
 
/*************************************************
	Checkboxes & Radio Buttons
*************************************************/
form.generic input.checkbox, form.generic input[type="checkbox"] {}
form.generic div.checkbox, form.generic div.radio{width:450px; margin-left:150px;}
form.generic label.checkboxLabel, form.generic label.radioLabel { width:450px;}
form.generic button.button {margin-left:150px;}
form.generic button.nomarginleft {margin-left:0;}

/* overrides */
form.generic div.template div.checkbox  {width:0; margin-left:0;}
form.generic div.template label.checkboxLabel {width:100px;}
/*************************************************
	Form Helpers / cfwheels error handling
*************************************************/
form.generic .field {clear:both;  margin-bottom:10px;   }
form.generic .inlinefield {float:left;}
form.generic p.hint {  font-size:90%; color:#666; float:right; width:250px;  }
form.generic .fieldWithErrors input, form.generic ul.errorMessages, form.generic input.error  {border:1px solid red;}
form.generic ul.errorMessages { color: #C00; font-weight:700;     font-size: 90%;  padding:10px; }
form.generic span.errorMessage {background:none; border:none; margin-left:140px; font-weight:700;}

/*************************************************
	Collapse Fieldsets
*************************************************/
form.generic fieldset.collapsible legend:hover { cursor:pointer;}
form.generic fieldset.collapsible legend {background:url(/images/icons/menu-expanded.png) right no-repeat; padding:0 15px 0 0 ;}
form.generic fieldset.collapsed legend {background:url(/images/icons/menu-collapsed.png) right no-repeat;  padding:0 15px 0 0 ;}

form.generic .hidden {display:none;}
  
/*************************************************
	Field Tooltips/Hinting
*************************************************/
.tooltip {	background-color:#f5f5f5;	border:1px solid #fff;	padding:10px 15px;	width:280px;	display:none;	color:#222;	text-align:left;	font-size:12px;	 
		-moz-box-shadow:0 0 10px #000;	-webkit-box-shadow:0 0 10px #000; -moz-border-radius: 5px; -webkit-border-radius: 5px;	border-radius: 5px;}

Do you have a demo site for this? I'd like to see what it actually does. If not I'd be happy to set one up on henke.ws with your permission.

see the same code as scss https://gist.github.com/1031623