Photon · Components

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.

<header class="toolbar toolbar-header">
  <h1 class="title">Header</h1>
</header>

...

<footer class="toolbar toolbar-footer">
  <h1 class="title">Footer</h1>
</footer>

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.

<header class="toolbar toolbar-header">
  <h1 class="title">Header with actions</h1>

  <div class="toolbar-actions">
    <div class="btn-group">
      <button class="btn btn-default">
        <span class="icon icon-home"></span>
      </button>
      <button class="btn btn-default">
        <span class="icon icon-folder"></span>
      </button>
      <button class="btn btn-default active">
        <span class="icon icon-cloud"></span>
      </button>
      <button class="btn btn-default">
        <span class="icon icon-popup"></span>
      </button>
      <button class="btn btn-default">
        <span class="icon icon-shuffle"></span>
      </button>
    </div>

    <button class="btn btn-default">
      <span class="icon icon-home icon-text"></span>
      Filters
    </button>

    <button class="btn btn-default btn-dropdown pull-right">
      <span class="icon icon-megaphone"></span>
    </button>
  </div>
</header>

...

<footer class="toolbar toolbar-footer">
  <div class="toolbar-actions">
    <button class="btn btn-default">
      Cancel
    </button>

    <button class="btn btn-primary pull-right">
      Save
    </button>
  </div>
</footer>

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.

<header class="toolbar toolbar-header">
  <h1 class="title">Header the tabs</h1>
</header>

<div class="tab-group">
  <div class="tab-item">
    <span class="icon icon-cancel icon-close-tab"></span>
    Tab
  </div>
  <div class="tab-item active">
    <span class="icon icon-cancel icon-close-tab"></span>
    Tab active
  </div>
  <div class="tab-item">
    <span class="icon icon-cancel icon-close-tab"></span>
    Tab
  </div>
  <div class="tab-item tab-item-fixed">
    <span class="icon icon-plus"></span>
  </div>
</div>

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.

<nav class="nav-group">
  <h5 class="nav-group-title">Favorites</h5>
  <a class="nav-group-item active">
    <span class="icon icon-home"></span>
    connors
  </a>
  <span class="nav-group-item">
    <span class="icon icon-download"></span>
    Downloads
  </span>
  <span class="nav-group-item">
    <span class="icon icon-folder"></span>
    Documents
  </span>
  <span class="nav-group-item">
    <span class="icon icon-signal"></span>
    AirPlay
  </span>
  <span class="nav-group-item">
    <span class="icon icon-print"></span>
    Applications
  </span>
  <span class="nav-group-item">
    <span class="icon icon-cloud"></span>
    Desktop
  </span>
</nav>

Lists

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

<ul class="list-group">
  <li class="list-group-header">
    <input class="form-control" type="text" placeholder="Search for someone">
  </li>
  <li class="list-group-item">
    <img class="img-circle media-object pull-left" src="/assets/img/avatar.jpg" width="32" height="32">
    <div class="media-body">
      <strong>List item title</strong>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </li>
  <li class="list-group-item">
    <img class="img-circle media-object pull-left" src="/assets/img/avatar2.png" width="32" height="32">
    <div class="media-body">
      <strong>List item title</strong>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </li>
  ...
</ul>

Buttons

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

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-positive">Positive</button>
<button class="btn btn-negative">Negative</button>
<button class="btn btn-warning">Warning</button>

Buttons large

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

<button class="btn btn-large btn-default">Default</button>
<button class="btn btn-large btn-primary">Primary</button>
<button class="btn btn-large btn-positive">Positive</button>
<button class="btn btn-large btn-negative">Negative</button>
<button class="btn btn-large btn-warning">Warning</button>

Buttons mini

Mini buttons work great in places where space is scarce.

<button class="btn btn-mini btn-default">Default</button>
<button class="btn btn-mini btn-primary">Primary</button>
<button class="btn btn-mini btn-positive">Positive</button>
<button class="btn btn-mini btn-negative">Negative</button>
<button class="btn btn-mini btn-warning">Warning</button>

Buttons groups

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

<div class="btn-group">
  <button class="btn btn-default">
    <span class="icon icon-home"></span>
  </button>
  ...
  <button class="active btn btn-default">
    <span class="icon icon-shuffle"></span>
  </button>
</div>

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-large btn-default">
    <span class="icon icon-home"></span>
  </button>
  ...
  <button class="active btn btn-large btn-default">
    <span class="icon icon-shuffle"></span>
  </button>
</div>

<!-- Mini button group -->
<div class="btn-group">
  <button class="btn btn-mini btn-default">
    <span class="icon icon-home"></span>
  </button>
  ...
  <button class="active btn btn-mini btn-default">
    <span class="icon icon-shuffle"></span>
  </button>
</div>

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.

<form>
  <div class="form-group">
    <label>Email address</label>
    <input type="email" class="form-control" placeholder="Email">
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control" placeholder="Password">
  </div>
  <div class="form-group">
    <label>Description</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
  <select class="form-control">
    <option>Option one</option>
    <option>Option two</option>
    <option>Option three</option>
    <option>Option four</option>
    <option>Option five</option>
    <option>Option six</option>
    <option>Option seven</option>
    <option>Option eight</option>
  </select>
  <div class="checkbox">
    <label>
      <input type="checkbox"> This is a checkbox
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> This is a checkbox too
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="radios" checked>
      Keep your options open
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="radios">
      Be sure to remember to check for unknown unknowns
    </label>
  </div>
  <div class="form-actions">
    <button type="submit" class="btn btn-form btn-default">Cancel</button>
    <button type="submit" class="btn btn-form btn-primary">OK</button>
  </div>
</form>

Tables

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

<table class="table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Kind</th>
      <th>File Size</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>photon.css</td>
      <td>CSS</td>
      <td>28K</td>
    </tr>
    <tr>
      <td>photon.css</td>
      <td>CSS</td>
      <td>28K</td>
    </tr>
    <tr>
      <td>photon.css</td>
      <td>CSS</td>
      <td>28K</td>
    </tr>
    ...
    <tr>
      <td>photon.css</td>
      <td>CSS</td>
      <td>28K</td>
    </tr>
  </tbody>
</table>

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.

<span class="icon icon-note"></span>
<span class="icon icon-note-beamed"></span>
<span class="icon icon-music"></span>
<span class="icon icon-search"></span>
<span class="icon icon-flashlight"></span>
<span class="icon icon-mail"></span>
<span class="icon icon-heart"></span>
<span class="icon icon-heart-empty"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star-empty"></span>
<span class="icon icon-user"></span>
<span class="icon icon-users"></span>
<span class="icon icon-user-add"></span>
<span class="icon icon-video"></span>
<span class="icon icon-picture"></span>
<span class="icon icon-camera"></span>
<span class="icon icon-layout"></span>
<span class="icon icon-menu"></span>
<span class="icon icon-check"></span>
<span class="icon icon-cancel"></span>
<span class="icon icon-cancel-circled"></span>
<span class="icon icon-cancel-squared"></span>
<span class="icon icon-plus"></span>
<span class="icon icon-plus-circled"></span>
<span class="icon icon-plus-squared"></span>
<span class="icon icon-minus"></span>
<span class="icon icon-minus-circled"></span>
<span class="icon icon-minus-squared"></span>
<span class="icon icon-help"></span>
<span class="icon icon-help-circled"></span>
<span class="icon icon-info"></span>
<span class="icon icon-info-circled"></span>
<span class="icon icon-back"></span>
<span class="icon icon-home"></span>
<span class="icon icon-link"></span>
<span class="icon icon-attach"></span>
<span class="icon icon-lock"></span>
<span class="icon icon-lock-open"></span>
<span class="icon icon-eye"></span>
<span class="icon icon-tag"></span>
<span class="icon icon-bookmark"></span>
<span class="icon icon-bookmarks"></span>
<span class="icon icon-flag"></span>
<span class="icon icon-thumbs-up"></span>
<span class="icon icon-thumbs-down"></span>
<span class="icon icon-download"></span>
<span class="icon icon-upload"></span>
<span class="icon icon-upload-cloud"></span>
<span class="icon icon-reply"></span>
<span class="icon icon-reply-all"></span>
<span class="icon icon-forward"></span>
<span class="icon icon-quote"></span>
<span class="icon icon-code"></span>
<span class="icon icon-export"></span>
<span class="icon icon-pencil"></span>
<span class="icon icon-feather"></span>
<span class="icon icon-print"></span>
<span class="icon icon-retweet"></span>
<span class="icon icon-keyboard"></span>
<span class="icon icon-comment"></span>
<span class="icon icon-chat"></span>
<span class="icon icon-bell"></span>
<span class="icon icon-attention"></span>
<span class="icon icon-alert"></span>
<span class="icon icon-vcard"></span>
<span class="icon icon-address"></span>
<span class="icon icon-location"></span>
<span class="icon icon-map"></span>
<span class="icon icon-direction"></span>
<span class="icon icon-compass"></span>
<span class="icon icon-cup"></span>
<span class="icon icon-trash"></span>
<span class="icon icon-doc"></span>
<span class="icon icon-docs"></span>
<span class="icon icon-doc-landscape"></span>
<span class="icon icon-doc-text"></span>
<span class="icon icon-doc-text-inv"></span>
<span class="icon icon-newspaper"></span>
<span class="icon icon-book-open"></span>
<span class="icon icon-book"></span>
<span class="icon icon-folder"></span>
<span class="icon icon-archive"></span>
<span class="icon icon-box"></span>
<span class="icon icon-rss"></span>
<span class="icon icon-phone"></span>
<span class="icon icon-cog"></span>
<span class="icon icon-tools"></span>
<span class="icon icon-share"></span>
<span class="icon icon-shareable"></span>
<span class="icon icon-basket"></span>
<span class="icon icon-bag"></span>
<span class="icon icon-calendar"></span>
<span class="icon icon-login"></span>
<span class="icon icon-logout"></span>
<span class="icon icon-mic"></span>
<span class="icon icon-mute"></span>
<span class="icon icon-sound"></span>
<span class="icon icon-volume"></span>
<span class="icon icon-clock"></span>
<span class="icon icon-hourglass"></span>
<span class="icon icon-lamp"></span>
<span class="icon icon-light-down"></span>
<span class="icon icon-light-up"></span>
<span class="icon icon-adjust"></span>
<span class="icon icon-block"></span>
<span class="icon icon-resize-full"></span>
<span class="icon icon-resize-small"></span>
<span class="icon icon-popup"></span>
<span class="icon icon-publish"></span>
<span class="icon icon-window"></span>
<span class="icon icon-arrow-combo"></span>
<span class="icon icon-down-circled"></span>
<span class="icon icon-left-circled"></span>
<span class="icon icon-right-circled"></span>
<span class="icon icon-up-circled"></span>
<span class="icon icon-down-open"></span>
<span class="icon icon-left-open"></span>
<span class="icon icon-right-open"></span>
<span class="icon icon-up-open"></span>
<span class="icon icon-down-open-mini"></span>
<span class="icon icon-left-open-mini"></span>
<span class="icon icon-right-open-mini"></span>
<span class="icon icon-up-open-mini"></span>
<span class="icon icon-down-open-big"></span>
<span class="icon icon-left-open-big"></span>
<span class="icon icon-right-open-big"></span>
<span class="icon icon-up-open-big"></span>
<span class="icon icon-down"></span>
<span class="icon icon-left"></span>
<span class="icon icon-right"></span>
<span class="icon icon-up"></span>
<span class="icon icon-down-dir"></span>
<span class="icon icon-left-dir"></span>
<span class="icon icon-right-dir"></span>
<span class="icon icon-up-dir"></span>
<span class="icon icon-down-bold"></span>
<span class="icon icon-left-bold"></span>
<span class="icon icon-right-bold"></span>
<span class="icon icon-up-bold"></span>
<span class="icon icon-down-thin"></span>
<span class="icon icon-left-thin"></span>
<span class="icon icon-right-thin"></span>
<span class="icon icon-up-thin"></span>
<span class="icon icon-ccw"></span>
<span class="icon icon-cw"></span>
<span class="icon icon-arrows-ccw"></span>
<span class="icon icon-level-down"></span>
<span class="icon icon-level-up"></span>
<span class="icon icon-shuffle"></span>
<span class="icon icon-loop"></span>
<span class="icon icon-switch"></span>
<span class="icon icon-play"></span>
<span class="icon icon-stop"></span>
<span class="icon icon-pause"></span>
<span class="icon icon-record"></span>
<span class="icon icon-to-end"></span>
<span class="icon icon-to-start"></span>
<span class="icon icon-fast-forward"></span>
<span class="icon icon-fast-backward"></span>
<span class="icon icon-progress-0"></span>
<span class="icon icon-progress-1"></span>
<span class="icon icon-progress-2"></span>
<span class="icon icon-progress-3"></span>
<span class="icon icon-target"></span>
<span class="icon icon-palette"></span>
<span class="icon icon-list"></span>
<span class="icon icon-list-add"></span>
<span class="icon icon-signal"></span>
<span class="icon icon-trophy"></span>
<span class="icon icon-battery"></span>
<span class="icon icon-back-in-time"></span>
<span class="icon icon-monitor"></span>
<span class="icon icon-mobile"></span>
<span class="icon icon-network"></span>
<span class="icon icon-cd"></span>
<span class="icon icon-inbox"></span>
<span class="icon icon-install"></span>
<span class="icon icon-globe"></span>
<span class="icon icon-cloud"></span>
<span class="icon icon-cloud-thunder"></span>
<span class="icon icon-flash"></span>
<span class="icon icon-moon"></span>
<span class="icon icon-flight"></span>
<span class="icon icon-paper-plane"></span>
<span class="icon icon-leaf"></span>
<span class="icon icon-lifebuoy"></span>
<span class="icon icon-mouse"></span>
<span class="icon icon-briefcase"></span>
<span class="icon icon-suitcase"></span>
<span class="icon icon-dot"></span>
<span class="icon icon-dot-2"></span>
<span class="icon icon-dot-3"></span>
<span class="icon icon-brush"></span>
<span class="icon icon-magnet"></span>
<span class="icon icon-infinity"></span>
<span class="icon icon-erase"></span>
<span class="icon icon-chart-pie"></span>
<span class="icon icon-chart-line"></span>
<span class="icon icon-chart-bar"></span>
<span class="icon icon-chart-area"></span>
<span class="icon icon-tape"></span>
<span class="icon icon-graduation-cap"></span>
<span class="icon icon-language"></span>
<span class="icon icon-ticket"></span>
<span class="icon icon-water"></span>
<span class="icon icon-droplet"></span>
<span class="icon icon-air"></span>
<span class="icon icon-credit-card"></span>
<span class="icon icon-floppy"></span>
<span class="icon icon-clipboard"></span>
<span class="icon icon-megaphone"></span>
<span class="icon icon-database"></span>
<span class="icon icon-drive"></span>
<span class="icon icon-bucket"></span>
<span class="icon icon-thermometer"></span>
<span class="icon icon-key"></span>
<span class="icon icon-flow-cascade"></span>
<span class="icon icon-flow-branch"></span>
<span class="icon icon-flow-tree"></span>
<span class="icon icon-flow-line"></span>
<span class="icon icon-flow-parallel"></span>
<span class="icon icon-rocket"></span>
<span class="icon icon-gauge"></span>
<span class="icon icon-traffic-cone"></span>
<span class="icon icon-cc"></span>
<span class="icon icon-cc-by"></span>
<span class="icon icon-cc-nc"></span>
<span class="icon icon-cc-nc-eu"></span>
<span class="icon icon-cc-nc-jp"></span>
<span class="icon icon-cc-sa"></span>
<span class="icon icon-cc-nd"></span>
<span class="icon icon-cc-pd"></span>
<span class="icon icon-cc-zero"></span>
<span class="icon icon-cc-share"></span>
<span class="icon icon-cc-remix"></span>
<span class="icon icon-github"></span>
<span class="icon icon-github-circled"></span>
<span class="icon icon-flickr"></span>
<span class="icon icon-flickr-circled"></span>
<span class="icon icon-vimeo"></span>
<span class="icon icon-vimeo-circled"></span>
<span class="icon icon-twitter"></span>
<span class="icon icon-twitter-circled"></span>
<span class="icon icon-facebook"></span>
<span class="icon icon-facebook-circled"></span>
<span class="icon icon-facebook-squared"></span>
<span class="icon icon-gplus"></span>
<span class="icon icon-gplus-circled"></span>
<span class="icon icon-pinterest"></span>
<span class="icon icon-pinterest-circled"></span>
<span class="icon icon-tumblr"></span>
<span class="icon icon-tumblr-circled"></span>
<span class="icon icon-linkedin"></span>
<span class="icon icon-linkedin-circled"></span>
<span class="icon icon-dribbble"></span>
<span class="icon icon-dribbble-circled"></span>
<span class="icon icon-stumbleupon"></span>
<span class="icon icon-stumbleupon-circled"></span>
<span class="icon icon-lastfm"></span>
<span class="icon icon-lastfm-circled"></span>
<span class="icon icon-rdio"></span>
<span class="icon icon-rdio-circled"></span>
<span class="icon icon-spotify"></span>
<span class="icon icon-spotify-circled"></span>
<span class="icon icon-qq"></span>
<span class="icon icon-instagram"></span>
<span class="icon icon-dropbox"></span>
<span class="icon icon-evernote"></span>
<span class="icon icon-flattr"></span>
<span class="icon icon-skype"></span>
<span class="icon icon-skype-circled"></span>
<span class="icon icon-renren"></span>
<span class="icon icon-sina-weibo"></span>
<span class="icon icon-paypal"></span>
<span class="icon icon-picasa"></span>
<span class="icon icon-soundcloud"></span>
<span class="icon icon-mixi"></span>
<span class="icon icon-behance"></span>
<span class="icon icon-google-circles"></span>
<span class="icon icon-vkontakte"></span>
<span class="icon icon-smashing"></span>
<span class="icon icon-sweden"></span>
<span class="icon icon-db-shape"></span>
<span class="icon icon-logo-db"></span>