ボタンやフォームを作成するときに、いろいろデザインのことで悩んだりしませんか？
CSSを一から書いて綺麗なデザインを作るのは、結構ホネで何回も修正したりして大変だなとよく思います。
綺麗なフォームを作成するにはどうしたらいいか？
そこで便利なテンプレートを使うことにしました。
このサイトはwordpressで作ってるけど、本当にhtmlで直接作ったりphpのサイトでフォームのデザインに迷った時はPureを使うと本当に早くサイトを仕上げることができます。
あわせて読みたい
Pure
Pure is a ridiculously tiny CSS library you can use to start any web project.
YahooのAPIを使うんですが、パーツごとにクラスが設定されているので、シンプルなデザインでボタンやフォームを作るときに困ったときとかcssをいちいち書いてる暇がない場合とかすごく重宝します。
僕は、レイアウトでシンプルなデザインを速攻で使いたい人とかはこういうAPIを使うのがいいんじゃないかなと思う。
使い方は簡単で以下のようなコードを書けばあとはルールに従って書けばすぐに綺麗なデザインがすっきりできます。
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
差し込むコードはこれだけですぐに利用することが可能です。
フォームを作る場合は以下
<form class="pure-form">
<fieldset>
<legend>A compact inline form</legend>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<label for="remember">
<input id="remember" type="checkbox"> Remember me
</label>
<button type="submit" class="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
解説
fieldsetは四角いボックスでlegendは下線のCSSがつくplaceholderは、薄く表示したい文字を印字みたいな感じで表現してくれる。
灰色の薄い線なのでレイアウトがしやすくすごく便利です。