Hello, Primer

[Primer](http://primercss.io/)とは、

> The CSS toolkit and guidelines that power GitHub.

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

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

# 注意

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

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

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

# 導入

[Bower](http://bower.io/)で入れます。

```
$ 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を書いていきます。

```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エディターと勝手に思っていますが、今回は後者にしました。

![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/2191/9cf018d3-d9ba-5dae-9b5f-0bd7d7f67645.png)
https://github.com/tnantoka/primerkdown

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

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

# 感想

画像付きのコンポーネントの一覧は、[Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT](http://www.moongift.jp/2015/04/primer-github%E8%A3%BD%E3%80%82%E3%81%BF%E3%82%93%E3%81%AA%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF/) とかにあるので、そちらを見てもらうとして、ひと通り使ってみての感想をダラダラと。

## グリッド
http://primercss.io/layout/#grid

```html
<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/type/#lists
ネストしたリストもインデントなくなるので注意。

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

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

## ナビゲーション
http://primercss.io/nav/
タブの右端にテキスト置けるのいい。
パンくず…

## アラート
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化したい。