OOCSSをbuildする

ちょいーんっす!あたーんっす!

みなさん、OOCSSって知ってますか?僕は知らないです。嘘です。

@stubbornellaが、4,5年前に言い出したオブジェクト指向なCSSの考え方みたいなもんです。CSSでこんなもの表現できた!とかそうゆうTips系の話題は事欠かないのですが、CSSの設計についての話はそれ以前には(今もそうですが)あまりなかったので、個人的にはとても衝撃的でした。

まぁそんなOOCSSですが、ここ一年は目立った更新はありませんでした。と思ってたら最近、GitHubのレポジトリ見たらなんかすごく変わってる!

新しくなったドキュメントを読みたいのですが、Readmeを読むと、どうやらSassやらHandlebarsやら使っててbuildしなきゃいけないっぽいす。んで仮想環境をVagrantで提供してるとのこと。

なんと!俺はただCSSのドキュメントを読みたいだけなのに、めんどくせ(๑・ิω・ิ๑)yー~

と言っててもしょうがないのでがんばってみる。

事前インストール

  • Git (多分入ってると思うけど…)
  • VirtualBox (現状、4.2.14やめて、4.2.12を選択しとく)
  • Vagrant (gemでインスコしたことある人はアンスコしとく)

OOCSSをbuild

OOCSSをForkする(フォークボタン押すだけね!)

git clone https://github.com/{user_name}/oocss.git

Cloning into 'oocss'...
remote: Counting objects: 1800, done.
remote: Compressing objects: 100% (1261/1261), done.
remote: Total 1800 (delta 580), reused 1626 (delta 445)
Receiving objects: 100% (1800/1800), 1.53 MiB | 121.00 KiB/s, done.
Resolving deltas: 100% (580/580), done.

ForkしたのをCloneしてくる

cd oocss/oocss

Vagrantfileのある場所に移動する

$ vagrant up

Bringing machine 'default' up with 'virtualbox' provider...
[default] Box 'stubbornella' was not found. Fetching box from specified URL for
the provider 'virtualbox'. Note that if the URL does not have
a box for this provider, you should interrupt Vagrant now and add
the box yourself. Otherwise Vagrant will attempt to download the
full box prior to discovering this error.
Downloading or copying the box...
Extracting box...te: 206k/s, Estimated time remaining: 0:00:01))
Successfully added box 'stubbornella' with provider 'virtualbox'!
[default] Importing base box 'stubbornella'...

vagrant upで起動させる

$ vagrant ssh

vagrant sshで中に入る

[email protected]:/vagrant$ make build

##################################################
Clean the project
##################################################
Removing the build directory
cleaning compass files...
Remove Node modules
##################################################
Clean project                               ✔ Done
##################################################

##################################################
Building OOCSS...
##################################################


##################################################
Building CSS Files with Sass...

##################################################
Building Documentation...
##################################################

Build done at : Fri Jun 28 2013 20:36:15 GMT+0200 (CEST)

##################################################
##################################################

OOCSS Build                                 ✔ Done
##################################################

makeする

http://localhost:8080/docs/library.html にアクセスしてドキュメントみる。わーい見れた!

ほらね、簡単でしょ?

$ vagrant halt
ちなみにvagrant haltでVMを停止させることができます。