--- layout: default title: Photon · Getting started ---
{% include nav.html %}

Getting started

Just download Photon and you'll be well on your way

What's included

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


Precompiled Photon

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

{% highlight html %} photon/ ├── css/ │ ├── photon.css │ ├── photon.min.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 {% endhighlight %}

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.*`), as well as the minified CSS. 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:

{% highlight html %} photon/ ├── sass/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── fonts/ │ └── template-app/ └── docs/ {% endhighlight %}

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.

Photon

Compiled and minified 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 cooresponding .window-content wrapper.

{% highlight html %}
...
{% endhighlight %}

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.

{% highlight html %}
...
...
...
{% endhighlight %}

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.

{% highlight html %}
...
{% endhighlight %}

Mini-sidebar layout

If a smaller sidebar is what you need, look no further.

{% highlight html %}
...
{% endhighlight %}

Common layout

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

{% highlight html %}

Header

...

Footer

{% endhighlight %}

Basic Template

{% highlight html %} Photon

Photon

Welcome to Photon

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.

{% endhighlight %}