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

執筆者:

関連記事

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

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

no image

socket.ioでリアルタイムチャット

目次1 環境2 準備3 サーバー側~express4 socket.ioのイベント駆動5 サーバー側~socket.io6 クライアント側7  接続者全員にメッセージを流したいので修正8  情報 環境 …

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

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

Electron+Browserify(debowerify)+jQueryUi

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

ElectronでTrayアイコン

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