シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret

シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。

MIT Licensesで、個人でも商用でも無料で利用できます。

サイトのキャプチャ

Turret
Turret -GitHub

Turretの特徴

Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークです。

レスポンシブ対応
読みやすいマークアップを使い、レスポンシブ対応のグリッドやエレメントを汎用性に優れたclassを使って実装しています。
Design First
直感的なユーザインターフェイスのために、文字の定義とカラーパレットにフォーカスしています。
No JavaScript
スクリプトは使用せず、LESSベースでネイティブのWeb要素を採用しています。
セマンティック
マークアップはモジュール式で、メンテナンス性にも優れています。

Docsでは使い方をはじめ、数多くのサンプルと実装方法が掲載されています。

サイトのキャプチャ

docs -Turret

サイトのキャプチャ

General

classはelement, behaviour, styleのいずれかに属して命名されたオブジェクト指向のCSSです。

サイトのキャプチャ

images

画像は「.responsive」を加えるだけでレスポンシブ対応になり、classを変更するだけでさまざまなスタイルで配置できます。

サイトのキャプチャ

Media Queries

レスポンシブ用のMedia Queriesは実用的な定義となっており、拡張性にも優れているので未知のデバイスにも簡単に対応できると思います。

サイトのキャプチャ

グリッドのカラム

カラムは12カラムをベースにして、2分割・3分割・4分割・6分割だけでなく、5, 7, 8, 9, 10, 11も用意されています。

サイトのキャプチャ

グリッドのバリエーション

通常のカラムだけだとレイアウトが退屈になりがちですが、オフセット・プッシュ・プルといったイレギュラーなカラムも簡単に実装できます。

サイトのキャプチャ

フォーム

フォームはシンプルな一行タイプのものから、マルチカラムのものまで美しくレイアウトできます。

サイトのキャプチャ

Elements

エレメント類も実用的なものが非常に豊富です。
ボタンのカラーは色名に依存するものではなく、カラースキームベースで設定ができ、スタイルやサイズも豊富に用意されています。

サイトのキャプチャ

Media

画像や動画、キャプション付きの画像、SVGなど、これらも全てレスポンシブ対応の実装です。

サイトのキャプチャ

Utility Classes

clearFix、固定表示、中央配置、高さ100%、カーソル変更など、ページで使う頻度の高いclassも予め用意されています。

サイトのキャプチャ

Responsive Utility Classes

デバイスサイズごとのclearFix、表示・非表示など、ユーティリティのclassはレスポンシブ用も用意されています。

サイトのキャプチャ

Mixins

Mixinも豊富に揃っており、これだけでもかなり便利です。

サイトのキャプチャ

Accessibility

アクセシビリティにおける各ロールの概要は一度目を通しておくとよいでしょう。

sponsors

top of page

©2024 coliss