Help us understand the problem. What is going on with this article?

Hello, Primer

More than 3 years have passed since last update.

Primerとは、

The CSS toolkit and guidelines that power GitHub.

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

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

注意

JSは付いてません

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

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

.container980pxに固定されているだけなので、そこを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

ご覧の通り、

も一緒に入るので、適宜読み込みます。
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エディターと勝手に思っていますが、今回は後者にしました。

screenshot.png
https://github.com/tnantoka/primerkdown

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

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

感想

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

グリッド

http://primercss.io/layout/#grid

<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化したい。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした