[CSS]デスクトップ・スマートフォン用のエラスティックグリッドシステム -Columnal

豊富なレイアウトオプション、柔軟なカスタマイズ、ワイヤーフレーム用の素材など至れり尽くせり、エラスティックグリッドを採用したスタイルシートのグリッドシステムを紹介します。

サイトのキャプチャ

Columnal
A responsive CSS grid system helping desktop and mobile browsers play nicely together.

[ad#ad-2]

Columnalの特徴

  • ページの構造がどのように構築されているのかのデバッグ用CSS
  • 豊富なレイアウトオプション(サブカラム)
  • コンテンツの前後にカラムを接続可能
  • 垂直方向のスペース用のスタイル
  • グリッドのシステムのPDF
  • ワイヤーフレームのテンプレート

Columnalのデモ

グリッドはエラスティックで、サイズは1140pxです。IE6-8では固定されます。

デモのキャプチャ

デモページ

ブラウザのサイズを変更すると、それに最適なレイアウトに変更されます。
スマートフォンなどの小さいスクリーンは下記のようになります。

デモのキャプチャ

ブラウザのサイズを小さくしたキャプチャ

サブカラムのパターンもたくさんあるため、レイアウトのバリエーションも豊富に楽しめます。

デモのキャプチャ

デモページ:Sub columns

[ad#ad-2]

Columnalのデザインキット

Columnalではデザインキットも用意されています。

  • スケッチ用の素材
    PDF
  • ワイヤーフレーム用の素材
    Illustrator用(AI)、Balsamiq Mockups用(BMML)
素材のキャプチャ

スケッチ用のPDFのキャプチャ

sponsors

top of page

©2018 coliss