GG StyleGuide

GrowGroupデザインシステムに基づいて作成したスタイルガイドです。

1カラム、2カラム、アーカイブ、シングルページのHTMLコーディング用テンプレートも用意されています。 SCSS & Pug を利用しています。

なお、最終的に WordPress の子テーマとしての利用を前提として作成しています。

要望・改善点等は issues へお願いします。

必要なモジュール/ソフト

必要なモジュール/ソフトは下記の通りです。

Homebrew、もしくはその他の方法でインストールすること。

node >= 16.14.0
git
editorconfig (各IDE, テキストエディタのプラグイン/パッケージ)

インストール

git clone https://github.com/growgroup/gg-styleguide.git

もしくは Download ボタンからダウンロードし、プロジェクトルートディレクトリへ展開してください。

ディレクトリの用意ができたら下記のコマンドを入力してください。

npm install

実行

基本的に、npm run scriptにてタスクを実行します。詳細は、package.json を確認してください。

開発サーバー (デフォルト：local:3000)

npm start

公開時

npm run build

ディレクトリ構成

基本的に、app ディレクトリ内の静的ファイルを Gulp で操作後、 dist ディレクトリ内に展開します。

.
├── README.md
├── app
│   ├── assets
│   │   ├── fonts
│   │   ├── images
│   │   ├── js
│   │   └── scss
│   │       ├── foundation
│   │       ├── layout
│   │       ├── object
│   │       │    ├── components
│   │       │    ├── project
│   │       │    └── utility
│   │       └── style.scss
│   ├── inc
│   │   ├── foundation
│   │   ├── layout
│   │   ├── mixins
│   │   └── _settings.pug
│   ├── onecolumn
│   ├── twocolumns
│   ├── archive-onecolumn
│   ├── archive-twocolumns
│   ├── format
│   │   ├── layout
│   │   ├── components
│   │   └── index.pug
│   └── robots.txt
├── build
├── config
├── node_modules
├── webpack.config.babel.js
├── server.js
└── package.json

作業の進め方

Pug

_settings.pug の編集

app/inc/_settings.pug ファイルの値を変更することで、自動的に変数に値がセットされ、HTMLにコンパイル時に反映されます。

    // --------------------------
        // 1. サイト情報
        // --------------------------

        // サイトのルートパスを設定
        // "" でドメイン直下からパスを開始
        root: "",
        site: {
          title: "株式会社 サンプル",
          titleSeparator: " | ",
          description: "説明文",
          keywords: "キーワード",
          viewport: "width=device-width,initial-scale=1",
          favicon: "",
          "apple-touch-icon": "",
          ogp: {
            locale: "ja_JP",
            type: "website",
            title: "株式会社 サンプル",
            description: "説明文",
            url: "",
            site_name: "株式会社 サンプル",
            image: "/assets/images/ogp.png"
          },
        },

注意点

a,link,script,img タグなど、パスを記述するタグについては、mixin をそれぞれ利用してください。

+a("/about/")
+link("/assets/css/style.css")(rel="stylesheet")
+script("/assets/js/scripts.js")
+img("img-demo01.jpg", "alt属性の値")

Sass

本テンプレートでは SCSS を採用しています。また CSSのコーディングルールとしてFLOCSSにて統一しています。

https://github.com/hiloki/flocss

Function & mixin

JavaScript

ESLint について

JavaScript の構文チェッカーとして ESLint を採用しています。

http://eslint.org/