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
-, , ,

執筆者:

関連記事

gulpでelectronをlivereloadしながらcoffeeとsassで開発する環境

By: Nrico – CC BY 2.0 目次1 package.json2 gulpfile.coffee3 bower + browserify4 ストップウォッチ package. …

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

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

Electron + CoffeeScript + Backbone.js + EcoでTodolistをつくってみた

By: Purple Slog – CC BY 2.0 目次1 はじめに2 gulpの準備3 Hello electron4 Hello Backbone.js & eco5 Ba …

Electronでsql.js

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

ElectronでTrayアイコン

By: Cooks & Kitchens – CC BY 2.0 目次1 Tray2 main.coffee3 できた Tray github.com/atom/electron