← Back to archive

Repo of the Day

connors/photon

Published: Dec 13, 2022

Open repository ↗

The fastest way to build beautiful Electron apps using simple HTML and CSS

Summary

Photon is a UI toolkit that provides CSS styles and icon fonts for building desktop applications with Electron. The repository ships a compiled photon.css stylesheet, the Entypo icon font, and a starter Electron template so engineers can assemble an interface from plain HTML and CSS rather than designing one from scratch. It is released under the MIT license.

What it is useful for

Photon is useful when an engineer wants to put together a working Electron desktop app quickly using only HTML and CSS for layout and styling. The repository includes a template-app directory with app.js, index.html, package.json, and a menu.js helper, so it acts as a scaffold for a new Electron project rather than a runtime library that you import. The included Entypo font files (eot, svg, ttf, woff) supply the icons that pair with the stylesheet. It is less appropriate for projects that need an actively maintained component library, since the README warns that the master branch is the active, unstable development branch and points users to the tagged downloads for stable copies.

How engineers can use it

The README documents two workflows. To use the toolkit itself, clone the repository with git clone https://github.com/connors/photon.git and either reference the compiled photon.css from your own Electron project or copy the template-app directory as a starting point. For local development against the example app, the documented steps are: run npm install to install Node dependencies, then npm start to launch the example. If you are editing the source Sass files, a second terminal running npm run build recompiles photon.css.

To browse the component documentation locally, the README describes installing Jekyll v2.5.x, installing the Rouge syntax highlighter with gem install rouge, running jekyll serve from the repository root, and opening http://localhost:4000 in a browser. Because the master branch is marked unstable, production users should pick a tagged release instead of the latest commit, and the full set of components and configuration options lives in the hosted docs at photonkit.com rather than in the repository itself.