Blueprint forms

Blueprint Forms

This tutorial will be a bit different than the other ones. On the compass reference, there's not (or a only little) example of the markup that goes along with the style. Maybe it assumes you already know blueprint, which may be a correct assumption in some case. The fact is, I don't know blueprint but I want to learn it to get the most of compass. So this tutorial will teach you how to do the correct markup for forms to use the compass form mixins.

The markup

There is 2 kinds of form : forms and inline forms. The first example will be a regular contact form that we see everywhere.

Here it goes :

<form>
  <fieldset>
    <legend>Contact Us</legend>
    <p>
      <label>Full name</label><br />
      <input type="text" />
    </p>

    <p>
      <label>Email</label><br />
      <input type="email" />
    </p>

    <p>
      <label>Message</label><br />
      <textarea></textarea>
    </p>
  </fieldset>
</form>

This is pretty simple huh !? All these elements will be styled with blueprint, you just have to know how to markup it.

The next example is an inline login form.

<form class="inline">
  <fieldset>
    <legend>Login</legend>
    <p>
      <label>Username</label>
      <input type="text" />
      <label>Password</label>
      <input type="password" />
      <input type="submit" value="Login" />
    </p>
  </fieldset>
</form>

It's pretty much the same as the previous example but with a single "p" element.

The style

There is not so much to do since all the forms style as nice defaults.

@import "blueprint/reset";
@import "blueprint";

@include blueprint-typography();

#container {
  @include container;
}

form {
  @include blueprint-form;
}

form.inline {
  @include blueprint-inline-form;
}

That's it. Notice that i didn't include a body class this time, i applied blueprint-typography globally. I figured out I didn't need nesting and this can simplify this tutorial. Anyway, here is the docs about those mixins : Blueprint Forms