connors/photon

★ 10,077CSSAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((Photon))
    What it does
      UI component library
      Native look and feel
      Electron styling
    Tech Stack
      CSS and Sass
      Electron
      Jekyll docs site
    Use Cases
      Desktop app UI
      App template start
      Custom brand styles
    Audience
      Electron developers
      Desktop app builders

mindmap root((Photon)) What it does UI component library Native look and feel Electron styling Tech Stack CSS and Sass Electron Jekyll docs site Use Cases Desktop app UI App template start Custom brand styles Audience Electron developers Desktop app builders

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Drop Photon's CSS into an Electron project to get a consistent native-looking interface without writing custom component styles.

USE CASE 2

Use the included Electron app template as a working starting point for a new desktop application.

USE CASE 3

Modify Photon's Sass source files to customize component styles for a branded desktop app build.

Tech stack

CSSSassJavaScriptElectronJekyll

Getting it running

Difficulty · easy Time to first run · 30min

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Photon is a UI toolkit for building desktop applications with Electron, a framework that lets developers create desktop software using web technologies like HTML, CSS, and JavaScript. Photon's job is to supply the visual layer: a stylesheet and a set of fonts you drop into your project so your app looks polished without you having to design the components yourself. The download package includes a compiled CSS file, a set of Entypo icon fonts, and a template Electron application that gives you a working starting point. You clone the repository, pull in the CSS, and your app inherits a consistent, native-looking interface. The documentation, hosted at photonkit.com, walks through the available components and explains how to wire them into a new project. For developers who want to modify the styles rather than just consume them, the project uses Sass source files. Running the build command compiles those files down to the final photon.css. The docs site is built with Jekyll and can be run locally for contributors who want to preview documentation changes before submitting them. Photon follows semantic versioning, where the version number signals whether a release contains breaking changes, new additions, or just small fixes. The master branch is the active development branch and may be unstable, the tagged releases are the stable copies to use in production. The project is maintained by Connor Sears and released under the MIT license. Bug reports go through GitHub Issues, and a contributor guidelines document explains the expected format for reports. The README does not describe a paid tier or a hosted service, this is a standalone toolkit you run locally inside your own Electron project.

Copy-paste prompts

Prompt 1

Using Photon's CSS toolkit, add a sidebar navigation and a top toolbar to my Electron app so it resembles a native macOS application.

Prompt 2

I'm starting an Electron app from Photon's template. Walk me through adding a split-pane layout with a file list on the left and a content viewer on the right.

Prompt 3

Show me how to customize Photon's Sass variables to change the primary button color and body font for my branded Electron desktop app.

Prompt 4

Using Photon components, build a settings panel in my Electron app with grouped checkboxes, radio buttons, and a save button.

Open on GitHub → Explain another repo

← connors on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.