- PhotonKit provides a design pattern for building UI for desktop application using Electron.js.
- You can find more information on PhotonKit in following URL:-
http://photonkit.com/components/
- PhotonKit provide some common component like header,footer,sidebar and content.
- In this demo, “We will learn to use PhotonKit in a demo application developed in Electron.js”.
- You can download the PhotonKit from the following URL:-
https://github.com/connors/photon
- On successful download we can unzip it for its contents.It has basically 3 directory css, fonts and template-app directory.
- The template-app directory contains code for a sample example.We can use it in our demo.
- We have created a demo application named ElectronPhotonDemo and added the css and fonts directory and content of template-app directory to the root.The project structure look like following screenshot:-
- The index.html file contains the code for rendering PhotonKit UI.The photon.css contains the styles.The content of index.html file are as follows:-
<!DOCTYPE html>
<html>
<head>
<title>Photon</title>
<link rel="stylesheet" href="css/photon.min.css">
<script src="js/menu.js" charset="utf-8"></script>
</head>
<body>
<div class="window">
<header class="toolbar toolbar-header">
<h1 class="title">Header</h1>
</header>
<div class="window-content">
<div class="pane-group">
<div class="pane-sm sidebar">sidebar</div>
<div class="pane">content</div>
</div>
</div>
<footer class="toolbar toolbar-footer">
<h1 class="title">Footer</h1>
</footer>
</div>
</body>
</html>
- We can run the application using npm start command.The following screenshot shows a terminal with start command in execution:-
- The output of demo looks like following screenshot.
- You can download the demo code from the following link:-
