CSS

The CSS files reside in the css/ folder and should be included in the template:

<?php
// include one file
style('myapp', 'style');  // adds css/style.css

// include multiple files for the same app
style('myapp', array('style', 'navigation'));  // adds css/style.css, css/navigation.css

// include vendor file (also allows vendor syntax)
vendor_style('myapp', 'style');  // adds vendor/style.css

Web Components go into the component/ folder and can be imported like this:

<?php
// include one file
component('myapp', 'tabs');  // adds component/tabs.html

// include multiple files for the same app
component('myapp', array('tabs', 'forms'));  // adds component/tabs.html, component/forms.html

Note

Keep in mind that Web Components are still very new and you might need to add polyfills using Polymer

Standard layout

To use the commonly used layout consisting of sidebar navigation and content the app-navigation and app-content ids can be used:

<div id="app">
    <div id="app-navigation">Your navigation</div>
    <div id="app-content">
        <div id="app-content-wrapper">
            Your content in here
        </div>
    </div>
</div>

For built in mobile support your content has to be wrapped inside another div with the id app-content-wrapper.

Settings Area

To create a settings area create a div with the id app-settings inside the app-navgiation div:

<div id="app">

    <div id="app-navigation">

        <!-- Your navigation here -->

        <div id="app-settings">
            <div id="app-settings-header">
                <button class="settings-button"
                        data-apps-slide-toggle="#app-settings-content"
                ></button>
            </div>
            <div id="app-settings-content">
                <!-- Your settings in here -->
            </div>
        </div>
    </div>
</div>

The data attribute data-apps-slide-toggle slides up a target area using a jQuery selector and hides the area if the user clicks outside of it.

Icons

To use icons which are shipped in core, special classes to apply the background image are supplied. All of these classes use background-position: center and background-repeat: no-repeat.

  • icon-breadcrumb:
    ../_images/breadcrumb.png
  • icon-loading:
    ../_images/loading.png
  • icon-loading-dark:
    ../_images/loading-dark.png
  • icon-loading-small:
    ../_images/loading-small.png
  • icon-add:
    ../_images/add.png
  • icon-caret:
    ../_images/caret.png
  • icon-caret-dark:
    ../_images/caret-dark.png
  • icon-checkmark:
    ../_images/checkmark.png
  • icon-checkmark-white:
    ../_images/checkmark-white.png
  • icon-clock:
    ../_images/clock.png
  • icon-close:
    ../_images/close.png
  • icon-confirm:
    ../_images/confirm.png
  • icon-delete:
    ../_images/delete.png
  • icon-download:
    ../_images/download.png
  • icon-history:
    ../_images/history.png
  • icon-info:
    ../_images/info.png
  • icon-lock:
    ../_images/lock.png
  • icon-logout:
    ../_images/logout.png
  • icon-mail:
    ../_images/mail.png
  • icon-more:
    ../_images/more.png
  • icon-password:
    ../_images/password.png
  • icon-pause:
    ../_images/pause.png
  • icon-pause-big:
    ../_images/pause-big.png
  • icon-play:
    ../_images/play.png
  • icon-play-add:
    ../_images/play-add.png
  • icon-play-big:
    ../_images/play-big.png
  • icon-play-next:
    ../_images/play-next.png
  • icon-play-previous:
    ../_images/play-previous.png
  • icon-public:
    ../_images/public.png
  • icon-rename:
    ../_images/rename.png
  • icon-search:
    ../_images/search.png
  • icon-settings:
    ../_images/settings.png
  • icon-share:
    ../_images/share.png
  • icon-shared:
    ../_images/shared.png
  • icon-sound:
    ../_images/sound.png
  • icon-sound-off:
    ../_images/sound-off.png
  • icon-star:
    ../_images/star.png
  • icon-starred:
    ../_images/starred.png
  • icon-toggle:
    ../_images/toggle.png
  • icon-triangle-e:
    ../_images/triangle-e.png
  • icon-triangle-n:
    ../_images/triangle-n.png
  • icon-triangle-s:
    ../_images/triangle-s.png
  • icon-upload:
    ../_images/upload.png
  • icon-upload-white:
    ../_images/upload-white.png
  • icon-user:
    ../_images/user.png
  • icon-view-close:
    ../_images/view-close.png
  • icon-view-next:
    ../_images/view-next.png
  • icon-view-pause:
    ../_images/view-pause.png
  • icon-view-play:
    ../_images/view-play.png
  • icon-view-previous:
    ../_images/view-previous.png
  • icon-calendar-dark:
    ../_images/calendar-dark.png
  • icon-contacts-dark:
    ../_images/contacts-dark.png
  • icon-file:
    ../_images/file.png
  • icon-files:
    ../_images/files.png
  • icon-folder:
    ../_images/folder.png
  • icon-filetype-text:
    ../_images/text.png
  • icon-filetype-folder:
    ../_images/folder1.png
  • icon-home:
    ../_images/home.png
  • icon-link:
    ../_images/link.png
  • icon-music:
    ../_images/music.png
  • icon-picture:
    ../_images/picture.png