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

執筆者:

関連記事

GoogleHomeとRaspberryPi3で赤外線リモコンを操作する〜ADRSIR

By: Fujitaka Daidoji – CC BY 2.0 目次1 ADRSIR2 IFTTTとfirebase3 node.js4 pm2 ADRSIR ADRSIRは、ラズベリー …

Electronでsqlite3を使ったアプリ

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

Gulp+WebpackでElectronのライブリロード

By: erokism – CC BY 2.0 目次1 electron-connect2 package.json3 .babelrc4 webpack.config.coffee5 g …

ElectronでTrayアイコン

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

no image

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

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

.bashrcに追加 [crayon-5c154a4f2 …