Primerとは、

The CSS toolkit and guidelines that power GitHub.

とのことです。
つまりGitHubによるCSSフレームワークとコーディング規約のセット。
ここ3年ぐらいBootstrap一筋でしたが、ついに浮気する時が来たようです。

※ ちなみにBootstrapの元々の開発者の一人である、@mdoさんという、色んな所でお名前を聞く人が作られているようです。

注意

JSは付いてません

PrimerはあくまでCSSなので、bootstrap.jsのようなものはありません。
GitHub社内には、Cremaというフレームワークがあるようですが、オープンソース化されていないようです。
なので、タブの切替やアラートの非表示化などは自前で実装する必要があります。

（デフォルトでは）レスポンシブではありません

.containerが980pxに固定されているだけなので、そこを100%とかに変えれば対応できます。
https://github.com/primer/primer/blob/master/docs/docs.scss がいろいろ参考になります。

導入

Bowerで入れます。

$ node -v
v0.10.35 # 古い…

$ npm install -g bower

$ bower -v
1.4.1

$ mkdir primer-example
$ cd primer-example

# bower.json
{
  "name": "primer-example",
  "dependencies": {
    "primer-css": "~2.0.3"
  }
}

$ bower install
:
:
:
primer-css#2.0.3 bower_components/primer-css
├── octicons#2.2.2
└── primer-markdown#2.1.7

octicons#2.2.2 bower_components/octicons

primer-markdown#2.1.7 bower_components/primer-markdown

ご覧の通り、

https://github.com/primer/markdown
.markdown-bodyの中身をGitHubっぽくしてくれるCSS。
https://github.com/github/octicons
GitHub製アイコン。

も一緒に入るので、適宜読み込みます。
（docs.cssにはどちらも含まれています。）

あとはこんな感じでHTMLを書いていきます。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>primer-example</title>
  <link rel="stylesheet" href="bower_components/primer-css/css/primer.css">
  <link rel="stylesheet" href="bower_components/octicons/octicons/octicons.css">
  <link rel="stylesheet" href="bower_components/primer-markdown/dist/user-content.css">
</head>
<body>
  <div class="container">
      <div class="columns">
        <div class="one-half column">
          .one-half
        </div>
        <div class="one-half column">
          .one-half
        </div>
      </div>
  </div>
</body>
</html>

作ったもの

最近のhello, worldといえば、TODOリストかMarkdownエディターと勝手に思っていますが、今回は後者にしました。

https://github.com/tnantoka/primerkdown

レスポンシブ対応とかしたかったので、結局docs.cssをそのまま拝借して、変えたいとこだけstyle.cssで上書きしています。

保存処理など、細部は作っていません。

感想

画像付きのコンポーネントの一覧は、Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT とかにあるので、そちらを見てもらうとして、ひと通り使ってみての感想をダラダラと。

グリッド

<div class="container">
  <div class="columns">
    <div class="one-fifth column">
      1 / 5
    </div>
    <div class="four-fifths column">
      4 / 5
    </div>
  </div>

のように分数で指定する。
Bootstrapより柔軟にできそうな予感。（1/5単位で分けたいことわりとある）
ただ、クラス名に慣れそうな気がしない…。

単純な構成しか試してないけど、ネストしても動いた。

ボタン

http://primercss.io/buttons/
With countsとかHidden text buttonとか便利そう。
初期のBootstrapのようにグラデーションがかかってるので、デザインセンスないとカスタマイズきつそう。（今のBootstrapは単色なので、まだ何とかなる感ある。）

フォーム

http://primercss.io/forms/
だいぶシンプル。
.form-horizontalみたいなのは用意されてない。
GitHubっぽいFormが一瞬で作れる。

アラート

http://primercss.io/alerts/
ほぼBootstarpと一緒。

.flash-with-iconと.flash-closeを一緒に使うと崩れるので、https://github.com/tnantoka/primerkdown/blob/gh-pages/index.html#L32 みたいにdiv.flash-closeを使うと行ける。

何もない時に出すやつ

http://primercss.io/blankslate/
悪名高き.wellよりはオシャレに使えそう。

アバター

http://primercss.io/avatars/
Parent-child avatars 面白い。（GitHub以外での需要は不明。）

ステータス

http://primercss.io/states/
紫がGitHubという感じ。

ツールチップ

http://primercss.io/tooltips/
アイコンに表示したいときはconflictするので、何かでwrapしてね。

ユーティリティ

http://primercss.io/utilities/
Truncation、Muted link、Flex tableあたり、地味だけど便利だと思う。

今後

個人で作るアプリはPrimerを使っていく予定。
仕事ではBootstrapだろうなぁ。
あと関係ないけど、入門Reactもうすぐ読み終わるので、https://github.com/tnantoka/primerkdown はReact化したい。

Hello, Primer

注意