By: Patrick Hoesly – CC BY 2.0
Photon
PhotonはElectronで簡単にMac風UIを実現できるCSSフレームワーク
photonkit.com/
gulpfile.coffee
今回は、gulpでsassをコンパイルする方法にした.
まず、gitでソースをダウンロードする.
1 | git clone https://github.com/connors/photon |
そして、src以下にsassディレクトリとfontsディレクトリをコピーする.
1 2 | cp -r ../photon/sass ./src/ cp -r ../photon/fonts ./src/ |
gulpfile.coffeeは次のような感じ
ポイントは、fontsディレクトリをcssから相対的に../fontsで見つかる場所に配置すること.
1 2 3 4 5 6 7 | gulp.task 'sass', -> gulp.src 'src/fonts/*.*' .pipe(gulp.dest('./fonts')) gulp.src 'src/sass/index.scss' .pipe(sass()) .pipe(gulp.dest('./css')) .on('finish', -> gutil.log 'index.css done') |
index.scss
そして、sass/index.scssでimportすればOK
1 | @import 'photon'; |
Todolistに適用する
header
header.toolbar.toolbar-headerでくくって、h1.titleをつける.
そのしたに、div.toobar-actionsをつける.
1 2 3 4 5 6 7 | <header class="toolbar toolbar-header"> <h1 class='title'>Todo List</h1> <div class="toolbar-actions"> <div id="task_form"></div> <div id="clear"></div> </div> </header> |
divはfloatを設定する.
footer
footer.toolbar.toolbar-footerでくくる.したに固定されないのが残念.
1 | <footer id="task_count" class='toolbar toobar-footer'></footer> |
buttonとicon
buttonにクラス.btn.btn-*を追加するだけ
1 | className: 'btn btn-negative' |
iconはspanにクラス.icon.icon-*を追加するだけ.
idをつけたのは色指定するため.
1 | <span class="icon icon-trash" id="trash"></span> Clear |
list
ul.list-groupのしたにli-list-group-itemを配置.
1 2 3 4 | class MyApp.Views.TaskList extends Backbone.Marionette.CollectionView childView: MyApp.Views.TaskLi tagName: 'ul' className: 'list-group' |
1 2 3 4 5 | class MyApp.Views.TaskLi extends Backbone.Marionette.ItemView template: JST['task_li'] tagName: 'li' className: -> if @model.get('done') then 'done list-group-item' else 'list-group-item' |
頭出しに.media-object.pull-left、本文に.media-body
1 2 3 4 5 6 7 8 | <input type="checkbox" id="task<%= @id %>_done" <% if @done :%> checked="true" <% end %> class='media-object pull-left'/> <div class="task_content" id="task<%= @id %>_content" class='media-body'> <%= @content %> </div> |
できた
CSSなので簡単.
