Photon

What's included

Photon is downloadable in two forms, within which you'll find the following directories and files, logically grouping common and compiled resources.

Precompiled Photon

Once downloaded, unzip the compressed folder to see the structure of (the compiled) photon. You'll see something like this:

photon/
├── css/
│   ├── photon.css
├── fonts/
│   ├── photon-entypo.eot
│   ├── photon-entypo.svg
│   ├── photon-entypo.ttf
│   └── photon-entypo.woff
└── template-app/
    ├── js/
    │   └── menu.js
    ├── app.js
    ├── index.html
    └── package.json

This is the most basic form of Photon: precompiled files for quick drop-in usage in nearly any Electron project. We provide compiled CSS (`photon.*`). We also include the Entypo fonts and a template Electron application for you to quickly get started.

Photon source code

The Photon source code download includes the precompiled CSS, and font assets, along with source Sass, and documentation. More specifically, it includes the following and more:

photon/
├── sass/
├── fonts/
├── dist/
│    ├── css/
│    ├── fonts/
│    └── template-app/
└── docs/

The sass/ and fonts/ are the source code for our CSS and icon fonts (respectively). The dist/ folder includes everything listed in the precompiled download section above. The docs/ folder includes the source code for our documentation, and examples/ of Photon usage. Beyond that, any other included file provides support for packages, license information, and development.

Compiled CSS and fonts. No docs or original source files are included.

Download

Source code

If you haven't already, download the source code for Photon.

Download

Application layout

Every Photon application has the same basic structure that consists of a main .window element and corresponding .window-content wrapper.

<div class="window">
  <div class="window-content">
    ...
  </div>
</div>

Paned layout

Divide up your applications content any way you want using .pane-group and .pane elements. Add as many panes as you need. They'll layout out evenly across the application.

<div class="window">
  <div class="window-content">
    <div class="pane-group">
      <div class="pane">...</div>
      <div class="pane">...</div>
      <div class="pane">...</div>
    </div>
  </div>
</div>

Sidebar layout

Sidebars are useful for housing navigation or other supplemental information in your application. The optional .sidebar class sets the pane's background color to gray.

<div class="window">
  <div class="window-content">
    <div class="pane-group">
      <div class="pane-sm sidebar">...</div>
      <div class="pane">...</div>
    </div>
  </div>
</div>

Common layout

Many applications follow the same simple layout with a header, content, and footer structure. That's super easy to build in Photon.

<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">...</div>
      <div class="pane">...</div>
    </div>
  </div>
  <footer class="toolbar toolbar-footer">
    <h1 class="title">Footer</h1>
  </footer>
</div>

Basic Template

<!DOCTYPE html>
<html>
  <head>
    <title>Photon</title>

    <!-- Stylesheets -->
    <link rel="stylesheet" href="photon.css">

    <!-- Electron Javascript -->
    <script src="app.js" charset="utf-8"></script>
  </head>

  <body>
    <!-- Wrap your entire app inside .window -->
    <div class="window">
      <!-- .toolbar-header sits at the top of your app -->
      <header class="toolbar toolbar-header">
        <h1 class="title">Photon</h1>
      </header>

      <!-- Your app's content goes inside .window-content -->
      <div class="window-content">
        <div class="padded-more">
          <h1>Welcome to Photon</h1>
          <p>
            Thanks for downloading Photon. This is an example HTML page that's linked up to compiled Photon CSS, has the proper meta tags
            and the HTML structure.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

Getting started