CSSフレームワークpureの概要
CSSフレームワークといえば、Bootstrapがまず思い浮かびますが、ご存知の通り他にも沢山の種類が存在します。その中でもpureはかなりサイズが小さく、その割に必要なフレームワークはしっかり押さえていて、使いやすいフレームワークになっています。
PUREの機能概要
BASE
Normalize.cssがベースになっていますので、別にリセットの用意は必要なくブラウザの違いによる表示の差分も最小限になるようにできています。
Hiding Elements
class=”hidden”; /* display: none !important; */
Responsive Images
class=”pure-img”;/* responsive imge */
example:
<img src="/wp-content/uploads/2017/09/a0001_000375_m.jpg" alt="クリスマスの並木道" class="pure-img" />
FORMS
各種タイプのFormが予め設定されていて、「class=”pure-form”」と指定するだけでformが使用できます。細かいデザイン設定する場合は、デザイン設定用のclassを合わせて予め設定して、そちらでアレンジするだけです。
.pure-form input[type=”text”],
.pure-form input[type=”password”],
.pure-form input[type=”email”],
.pure-form input[type=”url”],
.pure-form input[type=”date”],
.pure-form input[type=”month”],
.pure-form input[type=”time”],
.pure-form input[type=”datetime”],
.pure-form input[type=”datetime-local”],
.pure-form input[type=”week”],
.pure-form input[type=”number”],
.pure-form input[type=”search”],
.pure-form input[type=”tel”],
.pure-form input[type=”color”],
.pure-form select,
.pure-form textarea
コンパクトな １ lineの入力フォームならこんな感じで簡単に記述できます。（「pure-button＊」は後程記述する）
<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"> 記憶する
</label>
<button type="submit" class="pure-button pure-button-primary">サインイン</button>
</fieldset>
</form>
ラベル付き入力BOXを表示するようなFormの場合、calssに’pure-form-stacked’を追加します。
.pure-form selectがdefaultで、2.25emに設定されていますが、高さが足りないようなので、調整が必要かもしれません。ここでは、2.7emとしています。
こんな具合に
<style type="text/css"><!--
.pure-form select {height:2.7em;}
--></style>
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form/ラベル付きアカウント入力フォーム</legend>
<label for="email">Email</label>
<input id="email" type="email" placeholder="Email">
<span class="pure-form-message"> 必須 </span>
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
<label for="state">都道府県</label>
<select id="state">
<option>愛媛県</option>
<option>高知県</option>
<option>香川県</option>
<option>徳島県</option>
</select>
<label for="remember" class="pure-checkbox">
<input id="remember" type="checkbox"> 記憶する</label>
<button type="submit" class="pure-button pure-button-primary">ログイン</button>
</fieldset>
</form>
入力BOX表示位置を揃えたい場合は、calssに’pure-form-aligned’を追加します。そして、ラベルと入力フォームを’ class=”pure-control-group” ‘で括ります。
こんな具合に
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username">
<span class="pure-form-message-inline">必須項目</span>
</div>
<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="foo">任意のラベル</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox">利用規約を確認しました
</label>
<button type="submit" class="pure-button pure-button-primary">送信</button>
</div>
</fieldset>
</form>
‘Pure Responsive Grid’を併用することで、レスポンシブデザインに対応した入力フォームとなります。
このような具合に
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>レシポンシブ 入力フォーム 用例</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"><label for="last-name">苗字</label> <input id="last-name" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="first-name">名前</label> <input id="first-name" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="email">E-Mail</label> <input id="email" class="pure-u-23-24" required="" type="email" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="city">市町村</label> <input id="city" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="state">都道府県</label><select id="state" class="pure-input-1-2">
<option>愛媛県</option>
<option>高知県</option>
<option>香川県</option>
<option>徳島県</option>
</select></div>
</div>
<label class="pure-checkbox" for="terms"> <input id="terms" type="checkbox" /> 利用規約を読みました </label> <button class="pure-button pure-button-primary" type="submit">送信</button></fieldset>
</form>
テキストベースの入力フォームのセットを’ class=”pure-group”‘で括ることで、サインアップフォームやモバイルデバイスに適した入力フォームとなります。
このような具合に
<form class="pure-form">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Username">
<input type="text" class="pure-input-1-2" placeholder="Password">
<input type="email" class="pure-input-1-2" placeholder="Email">
</fieldset>
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="A title">
<textarea class="pure-input-1-2" placeholder="Textareas work too"></textarea>
</fieldset>
<button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>
このおかげで、何本記事を書き直したことか(-_-;)