--- layout: default title: Photon ยท Components ---
{% include nav.html %}

Components

Design patterns that serve as the basic building blocks of our application

Bars

Bars are placed at the top and bottom of core sections of your application and allow you to drag the application window around your desktop.

{% highlight html %}

Header

...

Footer

{% endhighlight %}

Bars with actions

Actions can be added to bars in the form of buttons and button-groups. These can be used give access to tools or provide additional functionality by using context menus.

{% highlight html %}

Header with actions

...
{% endhighlight %}

Bars with tabs

Tabs give the user the ability to create mutiple instances of your application's window. Clicking on the tab switches to that instance. Hovering on a tab reveals the close icon.

{% highlight html %}

Header the tabs

Tab
Tab active
Tab
{% endhighlight %}

Navs

Navs allow your users to jump between sections of your application. Users select an item in the nav list and act on it in the main part of the application's window.

{% highlight html %} {% endhighlight %}

Lists

Lists can be used for organizing data, showing collections of users, or a series of controls.

{% highlight html %}
  • List item title

    Lorem ipsum dolor sit amet.

  • List item title

    Lorem ipsum dolor sit amet.

  • ...
{% endhighlight %}

Buttons

Buttons come in many flavors and should be used for main call to actions, to submit forms, or trigger behaviors.

{% highlight html %} {% endhighlight %}

Buttons large

Large buttons are perfect for when you have a lot of space.

{% highlight html %} {% endhighlight %}

Buttons mini

Mini buttons work great in places where space is scarce.

{% highlight html %} {% endhighlight %}

Buttons groups

Connect a series of buttons together on a single line. Use these to toggle "modes" or mutually exclusive tools.

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

Forms

Forms are great when you need to collect data from a user. Use form labels to describe the input field and use simple buttons to sumbit the form.

{% highlight html %}
{% endhighlight %}

Tables

For showing tabular data, tables are your best bet. Zebra striping is optional.

{% highlight html %} ...
Name Kind File Size
photon.css CSS 28K
photon.css CSS 28K
photon.css CSS 28K
photon.css CSS 28K
{% endhighlight %}

Icons

The Entypo icon font by Daniel Bruce is included as the default icon set for Photon. There are over 200 icons to choose from.

{% highlight html %} {% endhighlight %}