わずか14KB、レスポンシブ対応軽量CSSフレームワーク「KATHAMO」の使い方

以前、Paperという軽量フレームワークを紹介しました。

で最近、KATHAMOというCSSフレームワークをちょっと触ってみて、これも良かったので紹介です。

尚、今回の記事のコンテンツ部分は、すべてKATHAMOフレームワークを適用させてみました。

photo by Alexander Harbich

KATHAMOとは

KATHAMOページ

KATHAMOは、モバイルフレンドリーに対応した必要最低限のCSSフレームワークです。

Bootstrapがバージョン3.3.5時点でサーバにアップする必要最低限なファイルサイズが約370KB(+jQueryのサイズ)に対して、
Bootstrapでサーバーにアップするファイル

KATHAMOは、14KBという軽量なフレームワークです。
KATHAMOでサーバにアップするファイル

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のカラムを作成できます。

1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1

グリットシステムは、カラムなどを設定してコンテンツを格納するためのレイアウトを作成するのに利用します。KATHAMOの場合は、カラムはすべて .container. でラップされます。そうしなければ、カラムはすべてのビューポート幅を占めてしまいます。 KATHAMOの .container は、自ら回り込みを解除します。

カラムの割り振りには、「 col-*-** 」といった記法を使用します。

 * の部分に画面幅を表す lg、 mdsm を記入します。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" を含めるとボタンスタイルが適用されます。

Send a copy to yourself.

<!-- ラベル -->
<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> は、トップに表示されます。

テーブルのキャプション
CharacterActor/ActressAgeMovies/TV
BatmanTestTestTest
BatmanTestTestTest
BatmanTestTestTest
BatmanTestTestTest
 .table-hover を追加すると行をマウスホバー時に行選択エフェクトが付加
CharacterActor/ActressAgeMovies/TV
BatmanTestTestTest
BatmanTestTestTest
BatmanTestTestTest
BatmanTestTestTest
 .table-no-border を利用すると、全てのボーダーが取り除かれる
CharacterActor/ActressAgeMovies/TV
BatmanTestTestTest
BatmanTestTestTest
BatmanTestTestTest
BatmanTestTestTest
 .table-striped を利用すると、行ごとにゼブラストライプされる
CharacterActor/ActressAgeMovies/TV
BatmanTestTestTest
BatmanTestTestTest
BatmanTestTestTest
BatmanTestTestTest
<!-- デフォルトテーブル -->
<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

順序リスト

  1. Lorem ipsum dolor
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit
  4. Lorem ipsum dolor
  5. Lorem ipsum dolor sit amet
  6. 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.

スタイルされていない順序リスト

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  5. 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は、完全にフラットで色調も統一されたシンプルな作りになっています。