A SASS Stylesheet For Great Forms

Forms have always a bit of a pain in the ass to get formatted correctly. One of my largest pet peeves has been making sure that the text given on the label lines up with the text within a textbox. Since padding, margins, font size, and line-heights all play a role in this, any time a change in any of these would throw off the form alignments once again. This probably isn’t too big of a deal if you only have one site, but if you manage many websites, having to work on this over and over gets a bit old. With SASS and the use of variables, you can get around this issue by calculating the padding and margins around form fields from the line heights and font sizes. The form will automatically recalculate the margins and padding if any of the variables change.

This SASS code has quite a bit of other standardization strategies for keeping form upkeep easy. It’s not all the way there, I think over time I’ll continue to upgrade this code to make it as robust as possible.

Just give your form the class of ‘frm-stnd’, and include the stylesheet.

SCSS:

//Variables: 
    $label-width: 200px;
    $label-margin-right: 10px;
    $form-font-size: 12px;
    $form-line-height: 18px;
    $form-font-size-note: 10px;
    $form-row-margin-bottom: 3px;
    $form-font: Verdana;
    $form-input-bg: #f3fafd;
    $form-input-border-color: #c3d7fd;

//Ideally you don't have to edit anything below: ------------------------------ 

    $form-input-padding: $form-line-height - $form-font-size;
    $form-li-height: $form-input-padding + $form-input-padding + $form-font-size;

    .required-symbol{
        color: red;
        padding-left: 3px;
    }
    .frm-stnd label {
        font-weight: normal;
        font-family: $form-font;   
        margin: 0 $label-margin-right 0 0;
        padding: 0;
        font-size: $form-font-size;
        line-height: $form-line-height;
        display: inline-block;
        width: $label-width;
        text-align: right;
    }
    .frm-stnd input[type=\"text\"], 
    .frm-stnd select, 
    .frm-stnd textarea, 
    .frm-stnd input[type=\"password\"] {
        border: 1px solid $form-input-border-color;
        background: $form-input-bg;
        font-family: $form-font;
        line-height: $form-line-height;
        font-size: $form-font-size;
        padding: $form-input-padding;
        margin: 0;
        margin-bottom: $form-row-margin-bottom;
    }
    .frm-stnd input[type=\"radio\"], 
    .frm-stnd input[type=\"checkbox\"] {
        vertical-align: middle;
        background: none;
        padding: 0;
        border: 0;
        height: $form-line-height;
        margin-top: $form-input-padding:
        margin-right: 0;
        margin-bottom: $form-input-padding; 
        margin-left: $label-width+$label-margin-right+5px;        
    }
    .frm-stnd input[type=\"checkbox\"] + label, 
    .frm-stnd input[type=\"radio\"] + label {
        text-align: left;
        padding: $form-input-padding 5px;                                                            
              //padding - This is to match the padding at the top of normal labels
        width: auto;
    }
    .frm-stnd .input-grouping{        
        //Used when there are more than one input boxes on a line.  
        //Use this class on the container div.
        display:        inline-block;
    }
    .frm-stnd li{
        margin-bottom: $form-row-margin-bottom;
        position: relative;
    }
    .frm-stnd .btn, input[type=\"submit\"]{
        margin-left: $label-width+$label-margin-right+5px;
    }
    .frm-stnd .cancel, .frm-stnd .back{
        margin-top: 0;
        padding-top: 0;
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }
    .frm-stnd .note{
        display: inline-block;
        font-size: $form-font-size-note;
        font-style: italic;   
    }

    @media (max-width: $collapse-width) {
        .frm-stnd label{
            clear: right;
            text-align: left;
            width: 100%;
        }
        .frm-stnd input[type=\"radio\"], 
        .frm-stnd input[type=\"checkbox\"]{
            margin-left: 0;
            position: absolute;
        }
        input[type=\"checkbox\"] + label, 
        input[type=\"radio\"] + label{
            margin: 0 20px;
        }
        .frm-stnd .btn-primary{
            margin-left:     0;
        }
    }

HTML:

<form class=\"frm-stnd\">
     <ul>
          <li>
               <label for=\"field-1\">Field 1</label>
               <input type=\"text\" name=\"field-1\" />
          </li>
          <li>
               <input type=\"submit\" class=\"btn btn-submit\" value=\"Submit\" />
          </li>
     </ul>
</form>