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>




Related Posts


Fixed Position Div Isn't Staying Fixed When Scrolling on Android

My nice fixed position toolbar wasn't sticking as it should as I scrolled through on my mobile browser window...
Read Post

Simple Sticky Element

The user scrolls down the page and once the scrolling reaches the top of an element of my choosing, that element sticks to the top of the window, so it's always visible from that point on...
Read Post

Chrome displays a different height than what Chrome says the height should be.

I was changing the height of an element, but no matter where I specified the height, it wasn't displaying what I was putting in
Read Post

A Nicer Select Dropdown

Better select boxes are all over the internet, but I actually couldn't find one that I liked, and that worked for what I needed...
Read Post