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 useBourbon

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

Bootstrapand

Foundationand

Bourbon

17

GitHub Status Bootstrap,Foundation,Bourbon Family

Framework Star Contributors Commits First

Bootstrap 92,559 668 11,673 11/04/24

Foundation 22,551 824 11,479 11/10/09

BourbonFamily 12,941 202 2,080 11/02/13

Bourbon Family : Bourbon + Bourbon NEAT + Bourbon Bitters + Bourbon Refills

18

GitHub commit-activity GraphsBootstrap,Foundation,Bourbon

Bootstrap

Foundation

Bourbon

19

About 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