Style Forms With Blueprint, A CSS Framework

blueprintcss logo

This tutorial is a continuation of my previous two posts on blueprint. It’s not necessary to read the second post but you should the first which covers making layouts with blueprint.

Let’s start off then by setting up Blueprint, since we are only talking about the form.css file that’s the only one we need to include, this file is in the “src” folder.

<html>
<head>
<title></title>

<!--blueprint files being -->
<link rel="stylesheet" href="blueprint/src/forms.css" media="screen, projection" />
<!-- blueprint files end-->

</head>
<body>

</body>
</html>

Include the next snippets of code inside the &ltbody> tag

Form Communcation

Let’s talk about my three favorite classes first, you can tell from the following code that I like to use these to send messages to the user.

Notice: (class=”notice” ) is perfect for letting people know of events, updates, or that a script is executing.

<div class="notice">
sending email, please wait...
</div>

Will render

sending email, please wait…

Success: (class=”success”) is what I use after a script has executed successfully.

<div class="success">
Email sent, we'll contact you soon.
</div>

Will render

Email sent, we’ll get to you soon.

Error: (class=”error”) you could use this class to let the user know something went wrong.

<div class="error">
We failed to send the email, please try again later or call us at (000)111-2233
</div>

Will render

We failed to send the email, please try again later or call us at (000)111-2233

Styling Inputs and Making a Form

Now that you know what you can use to communicate with your user let’s make a form using <label>,<fieldset>, <legend>, <textarea>, <input> and of course <form>

The classe we’ll be using are “text” and “title” and they only apply to input fields of type text.

<fieldset><legend>Contact Us</legend>
 <form>
  <label>Name</label><br/>
  <input type="text" class="title" name="name"/><br/>
  <label>Email</label><br/>
  <input type="text" class="text" name="email"/><br/>
  <label>Address</label><br/>
  <input type="text" class="text" name="address"/><br/>
  <label>Message</label><br/>
  <textarea name="message"></textarea><br/>
  <input type="submit" value="send" />
 </form>
</fieldset>

The differences between the classes “title” and “text” are that “title” is bigger as you’ll see in the result for this code below. Update: unfortunately, my theme’s layout is interfering with this code so I moved it here: Blueprint CSS form example.

You may change the textarea size with CSS, you can also shorten the input fields using “span” classes. I am done with this tutorial, enjoy making forms with blueprint and leave a comment if you got any questions.

Tagged as: blueprint, framework