BlueprintCSSでクールなフォームを作ろう

CSS HTML 30分プログラム

30分プログラム、その521。久しぶりにJavascriptで何かを作りたくなったので、BlueprintCSSでフォームを作ってみた。

http://howdyworld.org/twp/
予定でTwitterのユーザ名をいれると、一番最初にポストしたつぶやきが表示されるようになるはず。

BlueprintCSSに標準でついてるプラグインを有効にするとボタンも格好良くなっていい感じ。

ソースコード

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <!-- blueprint CSSの標準のやつ -->
    <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />
    <!--[if IE]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->

    <!-- typesetの追加 -->
    <link rel="stylesheet" href="blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection" />

    <!-- ボタンの追加 -->
    <link rel="stylesheet" href="blueprint/plugins/buttons/screen.css" type="text/css" media="screen, projection" />
    <title>Twitter fist post</title>
  </head>
  <body>
    <div class="container">
      <h1>Twitter first post</h1>
      <hr />
      <!-- 追加したtypesetを使う -->
      <h2 class="alt">Show your first post on Twitter</h2>
      <hr/>

      <div class="span-20 prepend-2">
	<form id="form">
	  <p>
	    <label for="username">Your Twitter ID</label><br />
	    <input type="text" class="title" name="username" id="username" />
	  </p>

          <!-- 格好いいボタンを使う -->
	  <button type="submit" class="button positive" id="go">
	    <img src="blueprint/plugins/buttons/icons/tick.png" alt=""/> Go
	  </button>
	</form>
      </div>
    </div>
  </body>
</html>

参考