シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret
Post on:2015年2月10日
sponsors
シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。
MIT Licensesで、個人でも商用でも無料で利用できます。
Turretの特徴
Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークです。
- レスポンシブ対応
- 読みやすいマークアップを使い、レスポンシブ対応のグリッドやエレメントを汎用性に優れたclassを使って実装しています。
- Design First
- 直感的なユーザインターフェイスのために、文字の定義とカラーパレットにフォーカスしています。
- No JavaScript
- スクリプトは使用せず、LESSベースでネイティブのWeb要素を採用しています。
- セマンティック
- マークアップはモジュール式で、メンテナンス性にも優れています。
Docsでは使い方をはじめ、数多くのサンプルと実装方法が掲載されています。
classはelement, behaviour, styleのいずれかに属して命名されたオブジェクト指向のCSSです。
画像は「.responsive」を加えるだけでレスポンシブ対応になり、classを変更するだけでさまざまなスタイルで配置できます。
レスポンシブ用のMedia Queriesは実用的な定義となっており、拡張性にも優れているので未知のデバイスにも簡単に対応できると思います。
カラムは12カラムをベースにして、2分割・3分割・4分割・6分割だけでなく、5, 7, 8, 9, 10, 11も用意されています。
通常のカラムだけだとレイアウトが退屈になりがちですが、オフセット・プッシュ・プルといったイレギュラーなカラムも簡単に実装できます。
フォームはシンプルな一行タイプのものから、マルチカラムのものまで美しくレイアウトできます。
エレメント類も実用的なものが非常に豊富です。
ボタンのカラーは色名に依存するものではなく、カラースキームベースで設定ができ、スタイルやサイズも豊富に用意されています。
画像や動画、キャプション付きの画像、SVGなど、これらも全てレスポンシブ対応の実装です。
clearFix、固定表示、中央配置、高さ100%、カーソル変更など、ページで使う頻度の高いclassも予め用意されています。
デバイスサイズごとのclearFix、表示・非表示など、ユーティリティのclassはレスポンシブ用も用意されています。
Mixinも豊富に揃っており、これだけでもかなり便利です。
アクセシビリティにおける各ロールの概要は一度目を通しておくとよいでしょう。
sponsors
