以前、Paperという軽量フレームワークを紹介しました。
で最近、KATHAMOというCSSフレームワークをちょっと触ってみて、これも良かったので紹介です。
尚、今回の記事のコンテンツ部分は、すべてKATHAMOフレームワークを適用させてみました。
photo by Alexander Harbich
KATHAMOとは
KATHAMOは、モバイルフレンドリーに対応した必要最低限のCSSフレームワークです。
Bootstrapがバージョン3.3.5時点でサーバにアップする必要最低限なファイルサイズが約370KB(+jQueryのサイズ)に対して、
KATHAMOは、14KBという軽量なフレームワークです。
KATHAMOは、この記事を書いた時点で、デモページが用意されていないようなので、以下で、アーカイブに入っていたデモページをまとめがてら紹介です。
ベーシックテンプレート
KATHAMO使うにあたって、必要最低限なHTMLは以下になります。以下をテキストエディターなどに貼り付けて利用します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <!-- Kathamo --> <link href="kathamo/kathamo.css" rel="stylesheet"> </head> <body></body> </html>
グリッドシステム
KATHAMOは、モバイルファーストのレスポンシブな可変グリッドシステム(Fluid Grid system)で枠組みを作成することができます。Bootstrapと同じで、最高12のカラムを作成できます。
グリットシステムは、カラムなどを設定してコンテンツを格納するためのレイアウトを作成するのに利用します。KATHAMOの場合は、カラムはすべて .container
. でラップされます。そうしなければ、カラムはすべてのビューポート幅を占めてしまいます。 KATHAMOの .container
は、自ら回り込みを解除します。
カラムの割り振りには、「 col-*-**
」といった記法を使用します。
* の部分に画面幅を表す lg、 md 、 sm を記入します。3種類の画面幅ごとにカラム数を設定できます。
- lg:ブラウザ幅が1024px以上の時
- md:ブラウザ幅が768px~1023pxまで
- sm:ブラウザ幅が768ピクセル未満
** 部分には、カラム幅を記述します。どんなに画面が大きくても最大幅は1024pxです。
<!-- `.container` はグリッド作成のためのメインラッパーです。 --> <div class="container"> <!-- カラムは、12の中から自由に割り振ることができます。 --> <div class="col-lg-3 col-md-5 col-sm-12"></div> <div class="col-lg-9 col-md-7 col-sm-12"></div> </div>
タイポグラフィー
KATHAMOのベースフォントは、 Helvetica Neue, Helvetica, sans-serif になっています。
デフォルトのフォントサイズは、 font-size: 100%
。行の高さは、 line-height: 1.75
。文字の太さは、 font-weight: 400
に設定されています。デフォルトの文字色は、 color: #333。
<small>
のフォントサイズは、 font-size: .618em
色は color: #95a5a6
になっています。
Heading 1 Small Text
目次
Heading 2 Small Text
Heading 3 Small Text
Heading 4 Small Text
Heading 5 Small Text
Heading 6 Small Text
パラグラフ
私(わたくし)はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚(はば)かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執(と)っても心持は同じ事である。よそよそしい頭文字(かしらもじ)などはとても使う気にならない。
その他のパラグラフ
メロスは激怒した。必ず、かの邪智暴虐(じゃちぼうぎゃく)の王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。きょう未明メロスは村を出発し、野を越え山越え、十里はなれた此(こ)のシラクスの市にやって来た。
引用
Simplicity is the ultimate sophistication. (シンプルさは究極の洗練である。 )
レオナルド・ダ・ヴィンチ
<!-- スタンダードな見出し --> <h1>Kathamo <small>Framework</small></h1> <h2>Kathamo <small>Framework</small></h2> <h3>Kathamo <small>Framework</small></h3> <h4>Kathamo <small>Framework</small></h4> <h5>Kathamo <small>Framework</small></h5> <h6>Kathamo <small>Framework</small></h6> <!-- ボディーテキスト --> <p>Kathamo <small>Framework</small></p> <!-- 他のスタイルのテキストタグ --> <strong>Bolded</strong> <em>Italicized</em> <a>Colored</a> <u>Underlined</u> <!-- 引用 --> <blockquote> Kathamo is an Assamese word, literary meaning "structure" or "frame"; thus the name itself suggests a framework. <cite>Debashis Barman, Kathamo Creator</cite> </blockquote>
フォームとボタン
スタンダードなHTMLタグの <label>
, <input>
, <select>
と <textarea>
を利用します。KATHAMOは、通常のフォームとは異なった独自のカスタムスタイルを利用します。インプットボックス、テキストエリア、選択ボックス、チェックボックス、ラジオボタンで適用されます。
カスタムスタイルを、加えるためにボタンのHTMLには常に data-role="button"
という属性を加えてください。 同様に<a>
タグに data-role="button"
を含めるとボタンスタイルが適用されます。
<!-- ラベル --> <label> ... </label> <!-- テキストインプットボックス --> <input name="..." type="..." placeholder="..."> <!-- 選択リスト --> <select> ... </select> <!-- エキスエリア --> <textarea name="..." placeholder="..."></textarea> <!-- チェックボックス --> <input name="..." type="checkbox"> <!-- ラジオボタン --> <input name="..." type="radio"> <!-- ボタン --> <input data-role="button" type="submit" value="Submit"> <button data-role="button" type="button">Submit</button> <a data-role="button" type="button" href="">Submit</a>
テーブル
ベーシックなテーブルを作成するには <table>
タグを利用してください。
テーブルをレスポンシブ表示するときは、 <table>
を内側にし、 .table-responsive
クラスを含めたタグでラップしてください。
<caption>
に data-prefix
属性を加えることによって、 キャプションの手前にプレフィックスを加えることができます。同様に data-position="top"
属性、もしくは data-position="bottom"
を加えることによって <caption>
の位置をトップかボトムに変更することができます。 デフォルトでは <caption>
は、トップに表示されます。
Character | Actor/Actress | Age | Movies/TV |
---|---|---|---|
Batman | Test | Test | Test |
Batman | Test | Test | Test |
Batman | Test | Test | Test |
Batman | Test | Test | Test |
Character | Actor/Actress | Age | Movies/TV |
---|---|---|---|
Batman | Test | Test | Test |
Batman | Test | Test | Test |
Batman | Test | Test | Test |
Batman | Test | Test | Test |
Character | Actor/Actress | Age | Movies/TV |
---|---|---|---|
Batman | Test | Test | Test |
Batman | Test | Test | Test |
Batman | Test | Test | Test |
Batman | Test | Test | Test |
Character | Actor/Actress | Age | Movies/TV |
---|---|---|---|
Batman | Test | Test | Test |
Batman | Test | Test | Test |
Batman | Test | Test | Test |
Batman | Test | Test | Test |
<!-- デフォルトテーブル --> <table> <caption data-prefix="Default Table : " data-position="top">...</caption> ... </table> <!-- ホバーtable --> <table class="table-hover"> <caption data-prefix="Hovered Table : " data-position="top">...</caption> ... </table> <!-- ボーダレステーブル --> <table class="table-no-border"> <caption data-prefix="Borderless Table : " data-position="top">...</caption> ... </table> <!-- ストライプテーブル --> <table class="table-striped"> <caption data-prefix="Striped Table : " data-position="top">...</caption> ... </table> <!-- レスポンシブテーブル --> <div class="responsive-table"> <table ... > ... </table> </div>
リスト
リストを利用するときはスタンダードに <li>、
<ul>
、 <dl>
タグを使います。
KATHAMOは、非順序リスト、順序リスト、定義リストに、カスタムスタイルを適用します。 .li-inline
を利用すると、インラインリストになります。<dl>
では .li-inline
は動作しません。
非順序リスト
- Lorem ipsum dolor
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit
- Lorem ipsum dolor
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit
順序リスト
- Lorem ipsum dolor
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit
- Lorem ipsum dolor
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit
定義リスト
- 定義語
- Lorem ipsum dolor
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit
- Lorem ipsum dolor
- Lorem ipsum dolor sit amet
インラインリスト
- Lorem ipsum dolor
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit
- Lorem ipsum dolor
<!-- 非順序リスト --> <ul> ... </ul> <!-- 順序リスト --> <ol> ... </ol> <!-- 定義リスト --> <dl> ... </dl> <!-- インラインリスト --> <ul class="li-inline"> ... </ul>
KATHAMOは、スタイルを取り除いたリストも手軽に使うことができます。 .li-unstyled
を利用することで、順序リストでも、非順序リストでも、リストスタイルを除外することができます。ただし、 .li-unstyled
を利用しても、 <dl>
(定義リスト)では動作しません。
スタイルされていない非順序リスト
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
スタイルされていない順序リスト
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<!-- スタイルされていない非順序リスト --> <ul class="li-unstyled"> ... </ul> <!-- スタイルされていない順序リスト --> <ol class="li-unstyled"> ... </ol>
アラート
KATHAMOは、よくあるユーザーアクションで利用されるフィードバックメッセージスタイルも提供しています。HTMLブロックに .alert
を利用するだけでアラートボックスにすることができます。
Alert Info : インフォメーション情報。
Alert Success : 処理は成功しました。
Alert Danger : パスワードが入力されていません。
.alert-info
, .alert-success
や .alert-danger
を加えることで、違うタイプのメッセージボックスを作成できます。
<!-- Alerts --> <div class="alert alert-info"> ... </div> <div class="alert alert-success"> ... </div> <div class="alert alert-danger"> ... </div>
パネル
パネルボックスを使用する場合は、HTMLのブロック要素に .panel
を追加します。 そして中に.panel-head
(パネルのタイトル)と panel-body
. (パネル本文)となる要素を記入すると利用することができます。
パネル本文 : .panelを使うとパネルっぽい表示ができる。
<!-- パネル --> <div class="panel"> <div class="panel-head"> ... </div> <div class="panel-body"> ... </div> </div>
まとめ
KATHAMOは、このように必要な機能に絞った軽量フレームワークです。
けれども、Wordpressのテーマ作成には、十分な機能があります。特に、テーブルのレスポンシブ化は、難しいので、フレームワーク側で、やってくれるのはありがたいです。
Paperは、シャドーなどを利用していましたが、KATHAMOは、完全にフラットで色調も統一されたシンプルな作りになっています。