Bourbonフレームワークで自分のスターターテーマを作る！｜WordBench東京 2月勉強会「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 16.02.21

WordBench東京 2月勉強会「みんなのテーマ開発」
〜自分の好きな作り方を話そう〜 16.02.21
TickleCode.
Yoshinori Kobayashi
1
Bourbonフレームワークで
自分のスターターテーマを作る！
あわよくば、公式ディレクトリに登録したい！

2
生まれは　奈良県　です
小林由憲（こばやしよしのり）
Twitter:
TickleCodeブログ:
@yoshiii514

もくもく会（自主勉強会）
を複数の運営メンバーや
アドバイザーの方々と
ともに、定期開催しています。
勉強会を開催しています)^o^(
3
【CoEdo.rb】
Ruby / Ruby on Rails
ビギナーズ勉強会
Swiftビギナーズ勉強会
WordPressもくもく
勉強会
http://wp-moku.doorkeeper.jp/
https://swift-beginners.doorkeeper.jp/
https://coedo-rails.doorkeeper.jp/
自己紹介

4
思う存分に、翻訳・プラグイン開発・テーマ制作
・Core（本体）開発を学びたかったので、新しく勉
強会を始めました！
WordPress
コントリビュート勉強会
自己紹介
第３回は、３月１８日（金）１９：００

5
wapuufall plugin を作りました！
https://github.com/TickleCode/wapuufall
わぷーが雪のように降ってくるプラグインです。
※絶賛リジェクトされ中！

6
そして！
今回は！
なになに！

7
超絶シンプルで、
速攻でカスタマイズできる。
そんなマイテーマが欲しい！
さすがだね(*^^*)／

8
だから
テーマを作りました！
おお！すてきー(^o^)

9
その名は！
おおおおーーー！きたよーーー(*^^*)／

10
Daibutsu
https://github.com/TickleCode/daibutsu

11
Daibutsu use
Bourbon
Framework
テーマを作りました

12
Bourbon バーボン　　　※ブルボンじゃないよ！
Sassベースの軽量型のフレームワーク。
Ruby on Rails,Sinatra 向けだがテーマ制作でも使える。

13
U.S. Web Design Standards
メインSCSSに、BourbonとBourbon NEAT が使われ
ている。

14
Bourbonのよいところ
・Sassで統一されている。
・IE9以上で動作可能。
・HTMLをシンプルにできる。
・コンパクトで学習コストが低い。

15
Bourbonで気になるところ
・ユーザーSassが大きくなる傾向
・コンポーネント（パーツ）が不足
・ユーザーSassが複雑になる傾向

16
Bootstrap
and
Foundation
and
Bourbon

17
GitHub Status
Bootstrap,Foundation,Bourbon Family
Framework Star
Contribu
tors
Commits First
Bootstrap 92,559 668 11,673 11/04/24
Foundation 22,551 824 11,479 11/10/09
Bourbon
Family
12,941 202 2,080 11/02/13
Bourbon Family : Bourbon + Bourbon NEAT + Bourbon Bitters + Bourbon Refills

18
GitHub commit-activity Graphs
Bootstrap,Foundation,Bourbon
Bootstrap
Foundation
Bourbon

20
Refills
Bourbon Family
mixin library,etc...
SCSSライブラリ
grid framework
レイアウトシステム
scaffold styles
カスタマイズ用のSCSS
Components and patterns
フォーム部品、ひな形パーツ

21
Bourbon
MIXINS
FUNCTIONS
ADD-ONS
CSS3などのプレフィックス補助や指定の簡略化。
以前はここにレイアウト機能があった。
今は、NEATに移動された。
ショートハンド。CSSを簡略化する関数群。
mixin library,etc...
SCSSライブラリ

<div class="news">
<div class="hot-news">
<div class="latest-news">
</div>
.news { @include outer-container; }
.hot-news, .latest-news { @include span(6); }
22
Bourbon NEAT
<div class="container">
<div class="row">
<div class="col-md-6">/* contents */</div>
<div class="col-md-6">/* contents */</div>
</div>
</div>
HTML
HTML
SCSS

23
Bourbon Bitters
scaffold styles
カスタマイズ用のSCSS
scaffold は足場の意味。
bitters install を実行するとbaseディレ
クトリが作成される。
これらの変数群（scss）を修正して、
Bourbonの基本動作をカスタマイズす
る。

24
Bourbon Contribution
About Bourbon Contribution
GitHub上での pull request
・不具合修正、リファクタリング
・既存機能の拡張
・ドキュメント修正
Bourbon もコントリビュートができます！

25
テーマを公開
Theme Daibutsu

26
Theme Daibutsu
テーマはチェック項目が多い^^;

27
Theme Daibutsu
Theme Checkプラグインで多数のエラーがでた
ので、公開の話はまた次の機会に！

ご清聴ありがとうございました。
28

Bourbonフレームワークで自分のスターターテーマを作る！｜WordBench東京 2月勉強会「みんなのテーマ開発」〜自分の好きな作り方を話そう〜 16.02.21

Recommended

Recommended

More Related Content

More from Yoshinori Kobayashi

More from Yoshinori Kobayashi (20)