2011/05/18

コーディングの手間を省くHTML5 & CSS3 フレームワーク

「Perkins」は HTML5&CSS3のフレームワークです。
LESSスタイルシート」とmixinを利用してボタン・テーブル・タイポグラフィー・フォームなどのマークアップとスタイルシートがすべて用意されています。

Perkins - HTML5/CSS3 Framework

下記の用に様々な すでにデザインされたテンプレートが用意されています。また出来栄えがすばらしい。


コード用のCSSも用意済み

アイコンセットもある

使い方は、githubのダウンロードページからコンポーネントをダウンロードして、あとは指定されたクラス名をHTMLへ、指定された記述をスタイルシートへおこないます。
ダウンロードするのは1.1

CSSソース
footer {
 background: lighten(@gray, 20%);
 height: 100px;
 .bs();
 .ts();
 .tac();
}

例えば、ウェブサイトのfooter 要素のスタイルシートに「.bs」=box-shadow、「.ts」=text-shadow, 「.tac」=text-align-center とそれぞれのスタイルが適用できます。LESS スタイルシートのフレームワークの勉強の必要はありますが、非常に効率的にCSSが適用できるかもしれません。また、このフレームワークを利用しなくてもデザインだけでも参考になります。

Bookmark and Share