Permalink
Browse files

Complete refactor with new helpers

  • Loading branch information...
1 parent fe2997f commit 7fbbdda58f88112d118dc29b586fcf177bc7d049 @activestylus committed Nov 9, 2009
Showing with 252 additions and 25 deletions.
  1. +147 −23 README.textile
  2. +4 −0 VERSION.yml
  3. +6 −2 _formtastic_base.sass
  4. +95 −0 _skintastic.sass
View
@@ -1,6 +1,17 @@
h1. Formtastic Sass Mixins
-A few simple, yet powerful macros that add flexible styling to your formtastic forms.
+A few simple, yet powerful macros that add flexible styling to your "Formtastic":http://github.com/justinfrench/formtastic forms.
+
+*Version Bump!*: Some big changes are taking place here. As of this release (0.3.2) The +formtastic mixin will be deprecated in favor of tighter, more agile helpers (see Stacked & Floated Forms below)
+
+Some improvements in this release:
+
+* All custom styling removed from core
+* Skinnable forms (example provided in _skintastic.sass)
+* New mixins for checkboxes and radio buttons (float and grid styling)
+* "Demo Rails app":http://www.github.com/active-stylus/test_formtastic_sass is available, with a jQuery-powered debugging interface
+* Much less CSS selectors = smaller footprint
+* No more Safari Hacks :)
h2. Installation
@@ -26,20 +37,138 @@ Done! Are you ready to churn out beautiful forms in SECONDS?
Let's rock...
-h2. Basic Usage
+h2. Stacked Forms
-Once you have created semantic forms with formtastic, you can use the default style like this:
+You know the flavor, labels above the inputs, everything on new lines. Why muck around with line oafter line of css when you can simply do this?
<pre>
- form.formtastic
- +formtastic
+ +stack-form
+</pre>
+
+Defaults are clearly labeled in _formtastic_base.sass, although you can override them directly in your stylesheet:
+
+<pre>
+ +stack-form(960px,"auto","10px")
+</pre>
+
+h3. Stacked Form Settings
+
+These are the arguments provided to the mixin (must be supplied in the correct order!)
+
++form-stack(!stacked_fieldset-width, !stacked_input, !stacked_padding, !stacked_button_align, !stacked_select_width)
+
+1. *!stacked_fieldset*
+Full width of the fieldset (default = 100%)
+
+2. *!stacked_input*
+"auto" : automatic widths (default)
+"full" : same width as fieldset
+"960px" : custom width
+
+3. *!stacked_padding*
+Left-hand padding on all labels and inputs (default = 0)
+
+4. *!stacked_button_align*
+"buttons-left" : float submit buttons left (default)
+"buttons-right" : float submit buttons right
+"buttons-full" : submit button matches input width
+
+5. *!stacked_select_width*
+"select-auto" : auto width (default)
+"select-full" : same as specified input width
+
+h2. Floated Forms
+
+Even more time-consuming are the typical floated column layouts on forms, labels left and inputs right. This used to take at least a good hour to look solid across browsers.
+
+No longer:
+
+<pre>
+ .formtastic
+ +float-form
+</pre>
+
+or you can be specific:
+
+<pre>
+ .formtastic
+ +float-form(600px,200px,400px)
+</pre>
+
+h3. Floated Forms Options
+
+1. *!floated_total_width*
+Total Width of form (default = 100%)
+
+2. *!floated_input_width*
+Width of inputs (default = 70%)
+
+3. *!floated_label_width*
+Width of Label (default = 20%)
+
+4. *!floated_label_padding_x*
+How far labels are spaced from inputs (default = 0)
+
+5. *!floated_button_align*
+"buttons-left" : float submit button left (default)
+"buttons-right" : float submit button right
+"buttons-full" : submit button matches input width
+
+6. *!floated_select_width*
+"select-auto" : auto width (default)
+"select-full" : same as specified input width
+
+*Note*: It is very important that you do not mix units (px,em,%) as calculations must be done
+
+h2. Checkbox & Radio Button Helpers
+
+Previously, formtastic assumed that you wanted all your checks/radios floated, but after using it in production on several projects I decided it needed to be more flexible. By default the lists are still block (stacked), but you can easily override this using a couple of handy mixins:
+
+h3. Floated Inputs
+
+Make all the checkboxes line up next to each other, inline-style and specify the spacing between them
+
+<pre>
+ +float-inputs
+ +float-inputs(10px)
+ +float-inputs(10px,1.4em)
+</pre>
+
+1st option is right margin, 2nd is line-height.
+
+As cool as that may seem at first, sometimes you dont want ALL your checkboxes to line up a certain way. Wouldn't it be great if you could pass a dom id or class to the helper and have it style ONLY those elements?
+
+I thought so:
+
+<pre>
+ +float-inputs-for("#post_category",10px,1.4em)
+ +float-inputs-for(".required",10px,1.4em)
+</pre>
+
+You can isolate however you want, using the handy classes formtastic generates to your advantage. Sweet!
+
+*Bug Alert:* Floated checkboxes tend to misbehave for some reason on IE 6 and 7 when using a floated form layout. Suggestions/patches would be welcome.
+
+h3. Grid Inputs
+
+Make all the checkboxes the same exact width, so they line up in columns.
+
+<pre>
+ +grid-inputs(100px,1.4em)
</pre>
-Finished! Wow, that was tough - go take a coffee break and come back later :D
+1st option is the width, 2nd is line-height.
-h2. Defaults
+And of course, you can also define for specific elements:
-Can be modified in formtastic_base:
+<pre>
+ +grid-inputs-for("#post_category",100px)
+ +grid-inputs-for(".required",100px)
+</pre>
+
+h2. Original Formtastic Mixin
+
+This helper will be deprecated in future versions. Please use the mixins specified above.
h3. Set width of entire fieldset
@@ -125,26 +254,21 @@ You will need to provide a margin-top value to align labels with error messages,
The value must be adjusted until label and error message line up.
-h2. Hacks
-
-Thanks to the misbehavior of legend tags, a tweak is needed for Safari when floating labels. Just set a pixel or em width on the legend's span like this
-
-<pre>
- form.formtastic
- +formtastic
- +formtastic-safari-hack(120px)
-</pre>
-
-Internet Explorer is not yet supported. Patches are welcome.
-
h2. Found a Bug?
Please direct all queries to the issue tracker:
"http://github.com/activestylus/formtastic-sass/issues":http://github.com/activestylus/formtastic-sass/issues
-h2. Caveat
+h2. Compatibility
+
+Tested and looking good on
-Overall this is still very alpha so please test across browsers before using in production.
+* Chrome Beta
+* Firefox 3+
+* Internet Explorer 6+ (except floated inputs)
+* Safari 3+
+
+h2. Caveat
-Enjoy!
+This is an active work in progress - currently only used on 3 live projects right now. Use at your own discretion.
View
@@ -0,0 +1,4 @@
+---
+:major: 0
+:minor: 3
+:patch: 2
View
@@ -147,25 +147,31 @@
// Formtastic Base (modify at your own risk!)
//--------------------------------------------------------
form.formtastic
+ // Reset form elements
ul, ol, li, fieldset, legend, input, textarea, select, p
:margin 0
:padding 0
+ // Vertical padding on hints and error messages
p, ul.errors
:padding 6px 0px
em
:font-style normal
:font-weight normal
+ // No bullet points on form lists
ol, ul
:list-style none
+ // Reset styling for * in required fields
abbr, acronym
:border 0
:font-variant normal
+ // Fonts for inputs
input, textarea, select
:font-family inherit
:font-size inherit
:font-weight inherit
:font-size 100%
ol li
+ // Fixes for IE6
:display inline-block
:width 100%
&:after
@@ -182,7 +188,6 @@ form.formtastic
:float left
:padding-left 0
:width auto
-
label
:line-height 100%
:padding-top 0
@@ -212,7 +217,6 @@ form.formtastic
:border 0
:display inline
ul.errors
- :color #cc0000
:list-style square
li
:padding 0
View
@@ -0,0 +1,95 @@
+form
+ // <li> Field wrappers
+ li
+ :padding 10px 0px
+ // <li> Check/Radio wrappers
+ li
+ :padding 0
+ //--------------------------------------------------------
+ // Fieldsets
+ //--------------------------------------------------------
+ fieldset
+ :background #eee
+ :margin-top 20px
+ // Be sure to override styling for nested fieldsets
+ li
+ fieldset
+ :padding 0
+ //--------------------------------------------------------
+ // Legend & Labels
+ //--------------------------------------------------------
+ legend, label
+ // Set color manually to override IE's stupid rules for legends
+ :color #333
+ label, .label
+ :padding-bottom 5px
+ // required * <--styling
+ abbr
+ :color #f00
+ label
+ :line-height 1.4em
+ :font-size 13px
+ legend
+ span
+ :font-size 1.4em
+ // Set lineheight for dumb IE
+ :line-height 1em
+ &.label
+ :font-size 1em
+ //--------------------------------------------------------
+ // Inputs
+ //--------------------------------------------------------
+ select
+ :padding 3px
+ input, textarea, select
+ :font-family inherit
+ :font-size 14px
+ textarea, input
+ :border 1px solid #999
+ :padding 6px 8px
+ :line-height 100%
+ //--------------------------------------------------------
+ // Date Time Styling
+ //--------------------------------------------------------
+ .date, .time, .datetime
+ li
+ :margin 0 0.3em 0 0
+ //--------------------------------------------------------
+ // Feedback (Requirements, Errors and Hints)
+ // Add horizontal margin/padding with care as it can
+ // break the layout on floats!
+ //--------------------------------------------------------
+ #errorExplanation
+ li
+ :margin-left 15px
+ form p, .errors
+ :padding 3px 0px
+ .required
+ input,textarea,select
+ :background-color #fff
+ .error
+ input,textarea,select
+ :background-color #fcc
+ :border 1px solid #f66
+ .optional
+ input,textarea,select
+ :background-color #fff
+ .errors
+ :color #a00
+ li
+ :margin-left 1.2em
+ p.inline-errors
+ :color #f00
+ p.inline-hints
+ :color #777
+ //--------------------------------------------------------
+ // Submit Buttons
+ //--------------------------------------------------------
+ .buttons
+ :padding-top 8px
+ :padding-bottom 8px
+ :margin-top 8px
+ li
+ :padding-right 0.5em
+ input
+ :border 1px solid #999

0 comments on commit 7fbbdda

Please sign in to comment.