GRM Theme Base

Overview

どのサイトも、
同じ土台から。

GRM Theme Baseは、GRM系のサイトを作るときの出発点になるベーステーマです。CSS Gridベースのグリッド、色や余白の共通設定、ボタン・カード・フォームなどの部品、よく使うテンプレートを、必要最小限の構成でまとめています。

GRM系のプラグインが入っていれば、グローバルメニューやパンくずリスト、ページ画像、ページネーションを自動で表示します。サイトごとに作り直す部分を減らし、デザインと中身づくりに時間を使えるようにするためのテーマです。

親テーマとして使う作りになっていて、サイトごとのデザインや専用のページは子テーマに置きます。共通部分の修正は、GRM Update Managerで親テーマを更新するだけで、すべてのサイトに届きます。

Features

• 親テーマ・子テーマに対応サイトごとのデザインは子テーマに置き、GRM Theme Baseは親テーマとしてそのまま使います。子テーマに同じ名前のテンプレート・部品（メニュー・フッター）・CSS・JSを置くだけで、その部分を差し替えられます。見本の子テーマ grm-theme-child も用意しています。
• プラグインと同じようにアップデートGRM Update Managerで、GRMのプラグインと同じように最新版に更新できます。子テーマは更新で変更されないので、サイトごとのカスタマイズはそのまま残ります。
• CSS Gridベースのグリッドクラス名ひとつで、PC・タブレット・スマホそれぞれの列数を指定できます。grow-4-t3-s2 なら、PC 4列・タブレット 3列・スマホ 2列です。
• 自動で折り返すグリッドgrow-auto は、1つの幅を280px以上に保ったまま、画面幅に合わせて列数が自動で変わります。商品や実績の一覧に向いています。
• 共通の設定コンテンツの幅・余白・文字サイズ・色・角丸を、変数としてまとめて管理しています。ここを変えるだけで、サイト全体のトーンを揃えられます。
• 部品ボタン・カード・表・お問い合わせフォーム（Contact Form 7）のスタイルと、余白や文字揃えのユーティリティクラスを揃えています。
• テンプレート一式固定ページ・投稿・カテゴリー・アーカイブ・検索結果・404・ログインページなど、よく使うテンプレートが入っています。
• 共通の動きスクロールで右下に出るページトップボタンと、クラス fade を付けた要素をふわっと表示するアニメーションを標準で備えています。
• GRMプラグインとの連携グローバルメニュー・パンくずリスト・ページ画像・ページネーションは、プラグインが有効なときだけ自動で表示されます。

Grid

実際のグリッドです。画面の幅を変えると、列数が切り替わります。

How to use

1. テーマを有効化GRM Theme Baseを有効化します。サイトごとに見た目を変える場合は、複製して別名のテーマとして使います。
2. 共通の設定を調整root.css の変数で、コンテンツの幅・色・文字サイズなどをサイトに合わせて変更します。
3. グリッドで組むページや投稿で、並べたい要素を grow-* クラスの付いた要素で囲むだけで、レスポンシブなグリッドになります。
4. GRMプラグインを追加必要に応じてGRM Base KitなどのGRM系プラグインを有効化すると、メニューやパンくずリストが自動で表示されます。

Spec