Less Framework is a cross-device CSS grid system based on using inline media queries.

iPhone、iPad、PC、Androidベースのスマートフォンやタブレットデバイスなど、インターネットを利用するデバイスの多様化が進んでいる。スクリーンサイズの異なるデバイスで動作するブラウザ向けにそれぞれ最適化されたWebデザインを提供するテクニックのひとつに、CSS3で策定が進められているメディアクエリを使う方法がある。このテクニックをベースにして開発されたCSSフレームワークのひとつにLess Framework 3がある。

Less Framework 3は、言ってしまえばデバイスのスクリーンサイズや表示領域サイズに応じて幅を変更するシンプルなフレームワークだ。Less Framework 3のサイトにアクセスしてブラウザの幅を変更してみればどういった動きをするものか理解できる。ブラウザの幅に応じて段階的に表示領域の幅が切り替わることを確認できる。

Less Framework 3を使った表示例 - 5列

Less Framework 3を使った表示例 - 13列

Less Framework 3を使った表示例 3列 - iPhone 3GS

Less Framework 3を使った表示例 8列 - iPad

Less Framework 3が面白いのは、その幅の切り替えが黄金比になっている点にある。Less Framework 3のホームページではわかりやすいように帯が表示されている。この帯はブラウザの幅やデバイスに応じて3本、5本、8本、13本と切り替わる。この数列はフィボナッチ数列になっており、つまり黄金比で切り替わるようになっている。

Less Framework 3のデザインの考え方はプログレッシブエンハンスメントに則っている。基本となるデザインをレイアウトしたら、あとはメディアクエリを判断基準としてレイアウトを追加している。メディアクエリに対応していないブラウザではデフォルトのデザインが表示されるだけだ。Less Framework 3が独特なのは、幅の切り替えが黄金比になっていること。黄金比になっているため、基本レイアウトからほかの幅のレイアウトに変更するときに座りがよくなるようなデザインを実施しやすくなるのだという。

Less Framework 3のもうひとつの特徴は、フレームワークそのものはきわめてシンプルな作りになっている点にある。ほかのフレームワークのように使うのではなく、シンプルなLess Framework 3はそのままベースに取り込んで、カスタマイズして使えるようになっている。