bourbonフレームワークで 自分のスターターテーマを作る!|wordbench東京...
Post on 12-Jan-2017
10.935 Views
Preview:
TRANSCRIPT
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コントリビュート勉強会
自己紹介
第3回は、3月18日(金)19:00
5
wapuufall plugin を作りました!
https://github.com/TickleCode/wapuufall
わぷーが雪のように降ってくるプラグインです。
※絶賛リジェクトされ中!
10
Daibutsu
https://github.com/TickleCode/daibutsu
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
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 もコントリビュートができます!
top related