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

執筆者:

関連記事

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

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

デスクトップアプリを作成できるフレームワークをWindowsで触ってみた~Electron

By: Adam Jenkins – CC BY 2.0 目次1 Electron2 前提3 electronのインストール4 Hello World5 パッケージング6 DevTool7 …

Electronでsqlite3を使ったアプリ

By: fdecomite – CC BY 2.0 目次1 環境2 electronでnpmモジュールを使うには3 jqueryをレンダラプロセスで使う4 slqite3の使い方5 ipc …

Ubuntu12.04にnode6.9をインストール~nodebrew

By: Kazuyoshi Kato – CC BY 2.0 目次1 nodebrew自身のアップデート2 nodebrewでnode6.9をインストール3 yarnのインストール nod …

Electron+Browserify(debowerify)+jQueryUi

By: Wilson Hui – CC BY 2.0 目次1 bower install2 browserify(debowerify)3 require4 jQueryUIをMarion …