ITエンジニア/デザイナ向けにオープンソースを毎日紹介

ここ数年フロントエンドフレームワークが熱いです。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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2