いくつかのサービスやサイトを運営する際、オリジナルのCSSフレームワークをつくり共有すると、サービス間のブランドを統一できるなどのメリットがあります。 この記事では、CSSフレームワークをどのように管理し育てていくか、といった内容について書いていきます。

CSSフレームワークとは

そもそもCSSフレームワークの概念とはなんでしょうか? 簡単に言うと、クラスを付与するだけでレイアウトやデザインが適用されるライブラリです。

BootstrapFoundationなんかが有名だと思います。

こういった既存のCSSフレームワークを利用するメリットとして、ある程度の見た目を確保するための工数を大幅に減らせる、などがあります。 一方で、使い方によっては、いわゆる「Bootstrap臭」が出てしまうなどの問題も生じます。

CSSフレームワークをつくり育てることで、ある程度の工数を減らしつつ、ブランディングにも適したデザインとすることができます。

長く運用するサービスであれば、やっぱりオリジナルのデザインで運用したいものですよね。 以下に、この方法について書いていきます。

ディレクトリ構成

CSSフレームワークのディレクトリ構成は次のとおりです。 参考例としてSimplie CSSがありますので、あわせてご覧ください。

$ tree .
.
├── build
│   └── build.css
├── docs
│   ├── build.css
│   └── index.html
├── index.scss
├── package.json
└── scss
    └── xxx.scss

package.jsonにはビルドなどのスクリプトを定義し、scssディレクトリ下にスタイルを定義していきます。 docs/index.htmlはスタイル確認用のドキュメントで、必要であればつくる感じでいいと思います。

package.json

CSSフレームワークをつくるときの必要なスクリプトとしては、(1)SCSSのビルドと(2)*.scssの変更を検知してビルドを自動実行する、の2つです。

スクリプトの例はsimplie-css/package.jsonをご覧ください。 それぞれについて説明します。

build

*.scssbuild.cssとしてビルドします。

index.scssがエントリポイントになっており、scssディレクトリ下の*.scssをインポートしています。 また、npmをとおしてNormalize.cssなどを利用するケースを想定し、ビルド時にnode_modulesを含めるようにしています。

$ node-sass --include-path node_modules index.scss build/build.css

docs:prepare

開発者向けにスタイルをすぐに確認できるドキュメントがあれば便利ですよね。 ここではbuildで生成したbuild.cssをドキュメントディレクトリにコピーしています。

ドキュメントを用意しないのであれば、このコマンドは必要ありませんので省略してください。

$ cp build/build.css docs/build.css

※ なぜわざわざコピーするかというと、後述するGitHubのGitHub Pages機能を利用するためです

watch

nodemonはファイルの変更を検知し任意のコマンドを実行できるユーティリティです。

ここでは*.scssの変更を検知してbuilddocs:prepareを実行しています。 これにより、毎回ビルドスクリプトを実行しなくてもよくなります。

$ nodemon -e scss -x 'npm run build && npm run docs:prepare'

ワークフロー

それでは、どのような進め方でCSSフレームワークを育てていけばよいのでしょうか。 これは、次のようなフローで行ないます。

  1. サービスのスタイルを実装する
  2. フレームワークとして切り出せそうな汎用的なスタイルをフレームワーク側に移す
  3. パッケージとしてリリースする
  4. サービスのpackage.jsonのバージョンを上げる

特に、(1)のスタイル実装においては、可能な限り汎用的なスタイルとそのサービス独自のスタイルとを切り分けることを意識します。 こうすることで、便利なCSSフレームワークを育てつつ、本体のコードを少なくすることができます。

パッケージとして公開する

パッケージはnpmをとおして公開します。 公開の流れは次のとおりです。

  1. スタイルを変更する
  2. コミットする
  3. バージョンを上げる
  4. タグづけする(例:git tag v1.0.0
  5. リリースする(npm publish

GitHub Pages

GitHubでは、docsディレクトリを作成することで、そのディレクトリをGitHub Pagesとして公開することができます。 スタイルを俯瞰できるページを作成し、ドキュメントとして公開しておくと便利です。

ページを公開する方法については公式ドキュメントをご覧ください。

おわりに

CSSフレームワークをGitHubで管理することで、ブランドを統一できるだけでなく、プロジェクトに関わる誰もが簡単にスタイルを更新していくことができます。

デザインをつくっていく方法のひとつとして参考になればうれしいです。