node.js

Electronで簡単にMac風UI〜Photon

投稿日:

Photon

PhotonはElectronで簡単にMac風UIを実現できるCSSフレームワーク
photonkit.com/

gulpfile.coffee

今回は、gulpでsassをコンパイルする方法にした.
まず、gitでソースをダウンロードする.

そして、src以下にsassディレクトリとfontsディレクトリをコピーする.

gulpfile.coffeeは次のような感じ

ポイントは、fontsディレクトリをcssから相対的に../fontsで見つかる場所に配置すること.

index.scss

そして、sass/index.scssでimportすればOK

Todolistに適用する

header

header.toolbar.toolbar-headerでくくって、h1.titleをつける.
そのしたに、div.toobar-actionsをつける.

divはfloatを設定する.

footer

footer.toolbar.toolbar-footerでくくる.したに固定されないのが残念.

buttonとicon

buttonにクラス.btn.btn-*を追加するだけ

iconはspanにクラス.icon.icon-*を追加するだけ.
idをつけたのは色指定するため.

list

ul.list-groupのしたにli-list-group-itemを配置.

頭出しに.media-object.pull-left、本文に.media-body

できた

CSSなので簡単.

screenshot

github.com/seventhsense/electron_todolist

-node.js
-, , ,

執筆者:

関連記事

Todolistをmarionette化

By: Jackie – CC BY 2.0 目次1 Marionette.js2 インストール3 Application4 gulpfile.coffee5 ItemView6 Coll …

no image

CentOS5.8にnodebrewでnode.jsをインストール

github.com/hokaccha/nodebrew インストールは簡単

.bashrcに追加 [crayon-599d9e913 …

Electronでsql.js

By: Dmitry Baranovskiy – CC BY 2.0 目次1 sql.js2 準備3 インストール4 main.coffee5 index.coffee6 index.ht …

Electronのアプリケーションメニューからセーブダイアログを出してファイルを保存

By: Jean-Pierre Dalbéra – CC BY 2.0 目次1 はじめに2 require3 メニュー4 gulpfile.coffee5 できた はじめに 今後は、Ele …

Electronでmaterialize

By: Vancouver Film School – CC BY 2.0 目次1 Materialize2 bower3 sass4 browserify5 できた Materializ …