ここ数年フロントエンドフレームワークが熱いです。Bootstrap、Zurb Foundationをはじめ、多種多様なフロントエンドフレームワークが登場しています。プログラマにとっては便利な反面、意外とデザイナーには好まれていないのではないでしょうか。 作法に則って記述している分には良いのですが、ちょっとでも逸脱しようとするととたんに面倒になるものが多い印象があります。その半分も機能は使われないフロントエンドフレームワークを止めて、Concise.CSSを使ってみてはいかがでしょう。

Concise.CSSの使い方

まずはConcise.CSSで作られたサイトのサンプルから。

テキストベースでもちゃんと作り込めるのが良いですね。

スクロール系のページ構成です。

ここから画面要素についてみていきます。

グリッド。

ヘッダー。

小さい文字や斜体。

引用。

住所。

文字寄せ。

背景色。

階層対応のメニュー。

縦型のメニュー。

パン屑。

多階層のリスト。

リスト。

定義リスト。

インラインのコードタグ。

キーボードタグ。

テーブル。

全体幅のテーブル。

フォーム。

ボタン。

ページネーション。

アイコングループ。

バッジ、ラベル。

プログレスバー。

閉じるボタン付き。

カラーリング。

Concise.CSSは機能をなるべく少なく、素のタグのままで使えるようになっています。また、アドオンとしてコメントやスクロールバー、ツールチップ、サークルなどの機能を利用することもできるようになっています。

よく使うものだけを厳選しているようなので、カスタマイズもしやすそうです。

Concise.CSSはCSS3/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

Concise.CSS / A better front-end framework. ConciseCSS/concise.css