ドキュメント

01. プロジェクト構造

クリーンなGridyセットアップのための推奨フォルダ構造。

    /assets
      /img
      /js
      /css
        style.css
    

02. グリッド変数

style.cssで、システムをカスタマイズするためにまずグリッド変数を定義します。 これがない場合、Gridyはデフォルト値を使用します。

    :root{
      --pl:32px;
      --pr:32px;
      --gp:32px;
      --mw:960px;
    }
    

これらは以下を制御します:
• --pl / --pr → ページパディング左/右
• --gp → グリッドギャップ
• --mw → コンテナの最大幅

04. グリッドカラム

Gridyは12カラムシステムを使用しています。例は1カラムから全幅まで順序付けされています。

レイアウト構造は3つのレイヤーで構成されています:
.con はメインコンテナの幅とページパディングを設定し、
.grd は12カラムグリッドシステムを定義し、
.c-* は各要素が占めるカラム数を制御します。

05. カラム開始

s-*クラスを使用して要素を水平方向にオフセットします。

06. フレックスユーティリティ

整列と配分のためにフレックスヘルパークラスを使用します。

07. テキスト整列

水平方向のテキスト整列のためのユーティリティクラス。

08. スペーシング

マージンとパディングのユーティリティはベースラインリズムに従います。 スペーシングクラスは、レイアウトのバランスのために一貫した垂直方向の増分を使用します。

マージン上部

09. 画像システム

高速なレイアウト構成のための固定高さ画像ユーティリティ。 一貫した画像ブロックを作成するために、.imgを高さユーティリティと組み合わせて使用します。

10. レスポンシブシステム

900px以下では、Gridyは自動的に4カラムに切り替わります。 すべてのカラムクラスが全幅になります。