Phonon Framework

Phonon

UI Examples

This live demo is light and does not show all the features of each component. Please use the docs to customize or see the available options.

Try the kitchen sink

Page containers

Page containers are used to declare several pages in index.html file.
Within these, you can build the page template.
NavigatorJS will connect pages together with slide animations.
Please, see a full example in getting started. 

				<home data-page="true"></home>
<settings data-page="true"></settings>

Header bars

Header bars are at the top of the screen and remain visible.
The title can be placed on the left or center.

				<header class="header-bar">
	<div class="pull-left">
		<h1 class="title">Title</h1>
    </div>
</header>

Header bar with actions

Buttons in a header bar are displayed on the left and right.
Use .pull-left and .pull-right to align them.

				<header class="header-bar">
	<a class="btn pull-left">Button</a>
    <div class="center">
    	<h1 class="title">Title</h1>
    </div>
    <a class="btn pull-right">Button</a>
</header>

Header bar with icons

Icons can also be used for actions.

				<header class="header-bar">
    <a class="btn pull-left icon icon-menu"></a>
    <div class="center">
    	<h1 class="title">Title</h1>
    </div>
    <a class="btn pull-right icon icon-settings"></a>
</header>

Header bar with search bar

				<header class="header-bar">
	<a class="btn pull-left icon icon-close"></a>
	<input type="text" class=" pull-left search-input" placeholder="Search">
    <a class="btn pull-right icon icon-check"></a>
</header>

Tabs

Tabs make it easy to explore and switch between different views. Tab contents can be swipeable with a horizontal finger gesture. They are located at the top or bottom of the screen. This demo requires tabs.js, but it is not included here.

Please see a full code example here.

				<header class="header-bar">
    <div class="center">
        <h1 class="title">Tabs</h1>
    </div>
</header>
<nav class="tabs header-tabs">
    <div class="tab-items">
        <a class="tab-item">Home</a>
        <a class="tab-item"><i class="icon icon-edit"></i></a>
        <a class="tab-item"><i class="icon icon-settings"></i></a>
    </div>
</nav>
<div class="content" data-tab-contents="true" data-disable-swipe="false" data-tab-default="1">
	<!-- ... -->
</div>

Popovers

Popovers allow users to take an action by selecting from a list of choices revealed upon opening a temporary, new sheet of material. They are located on the .header-bar or on the .btn-popover button. They are fired from button actions and from the title.

Please see a full code example here.

				<header class="header-bar">
	<button class="btn pull-left icon icon-menu" data-popover-id="my-popover"></button>
	<button class="btn pull-right icon icon-menu" data-popover-id="my-popover"></button>
    <h1 class="title pull-left arrow" data-popover-id="my-popover">Title</h1>
</header>
<div class="content">

	<!-- Hidden popovers in the page content -->
    <div class="popover" id="my-popover">
        <ul class="list">
            <li><a class="padded-list">Item</a></li>
            <li><a class="padded-list">Help & Feedback</a></li>
            <li><a class="padded-list">Settings</a></li>
            <li><a class="padded-list">Sign out</a></li>
        </ul>
    </div>

    <div class="popover" id="btn-popover">
        <ul class="list">
            <li><a class="padded-list">Item 1</a></li>
            <li><a class="padded-list">Item 2</a></li>
            <li><a class="padded-list">Item 3</a></li>
            <li><a class="padded-list">Item 4</a></li>
        </ul>
    </div>

	<div class="padded-full">
		<button class="btn btn-popover fit-parent primary" data-autobind="true" data-popover-id="btn-popover">Select</button>
    </div>
</div>

Typography

Titles and paragraphs.

				<div class="content padded-full">
	<h1>h1 heading</h1>
	<h2>h2 heading</h2>
	<h3>h3 heading</h3>
	<h4>h4 heading</h4>
	<h5>h5 heading</h5>
	<h6>h6 heading</h6>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
	</p>
</div>

Lists

Lists present multiple line items in a vertical arrangement as a single continuous element. 

				<div class="content">
    <ul class="list">
        <li class="divider">Basic</li>
        <li class="padded-list">Item</li>
        <li class="padded-list">Item</li>
        <li><a href="#item" class="padded-list">Link</a></li>
        <li><a href="#item" class="padded-list">Link</a></li>
        <li><a href="#item" class="padded-list">Link</a></li>
    </ul>
</div>

List with left action

				<div class="content">
    <ul class="list">
        <li class="divider">Left action</li>
        <li>
            <a href="#action" class="pull-left icon icon-edit"></a>
            <span class="padded-list">Item</span>
        </li>
        <li>
            <a href="#action" class="pull-left">Text</a>
            <span class="padded-list">Item</span>
        </li>
        <li>
            <a href="#action" class="pull-left icon icon-edit"></a>
            <a href="#item" class="padded-list">Link</a>
        </li>
        <li>
            <a href="#action" class="pull-left">Text</a>
            <a href="#item" class="padded-list">Link</a>
        </li>
    </ul>
</div>

List with right action

				<div class="content">
    <ul class="list">
        <li class="divider">Right action</li>
        <li>
            <a href="#action" class="pull-right icon icon-edit"></a>
            <span class="padded-list">Item</span>
        </li>
        <li>
            <a href="#action" class="pull-right">Text</a>
            <span class="padded-list">Item</span>
        </li>
        <li>
            <a href="#action" class="pull-right icon icon-edit"></a>
            <a href="#item" class="padded-list">Link</a>
        </li>
        <li>
            <a href="#action" class="pull-right">Text</a>
            <a href="#item" class="padded-list">Link</a>
        </li>
    </ul>
</div>

List with left and right actions

				<div class="content">
    <ul class="list">
        <li class="divider">Left and right actions</li>
        <li class="item-expanded">
            <a href="#action" class="pull-right icon icon-edit"></a>
            <a href="#action" class="pull-left icon icon-edit"></a>
            <div class="item-content">
                <span class="title">Item</span>
                <span class="body">Small text</span>
            </div>
        </li>
        <li class="item-expanded">
            <a href="#action" class="pull-right">Text</a>
            <a href="#action" class="pull-left">Text</a>
            <div class="item-content">
                <span class="title">Item</span>
                <span class="body">Small text</span>
            </div>
        </li>
        <li class="item-expanded">
            <a href="#action" class="pull-right icon icon-edit"></a>
            <a href="#action" class="pull-left icon icon-edit"></a>
            <a href="#item">
                <div class="item-content">
                    <span class="title">Link</span>
                    <span class="body">Small text</span>
                </div>
            </a>
        </li>
        <li class="item-expanded">
            <a href="#action" class="pull-right">Text</a>
            <a href="#action" class="pull-left">Text</a>
            <a href="#item">
                <div class="item-content">
                    <span class="title">Link</span>
                    <span class="body">Small text</span>
                </div>
            </a>
        </li>
    </ul>
</div>

Accordion Lists

				<div class="content">
	<ul class="list">
		<li>
			<i class="pull-right icon icon-expand-more"></i>
			<a href="#link1" class="padded-list">Link 1</a>
			<div class="accordion-content">
				Element 1
			</div>
		</li>
		<li>
			<i class="pull-right icon icon-expand-more"></i>
			<a href="#link2" class="padded-list">Link 2</a>
			<div class="accordion-content">
				Element 2
			</div>
		</li>
		<li>
			<i class="pull-right icon icon-expand-more"></i>
			<a href="#link3" class="padded-list">Link 3</a>
			<div class="accordion-content">
				Element 3
			</div>
		</li>
	</ul>
</div>

Buttons

				<div class="content padded-full">
	<button class="btn">Button 1</button>
	<button class="btn primary">Button 2</button>
	<button class="btn positive">Button 3</button>
	<button class="btn negative">Button 4</button>

	<button class="btn btn-flat">Button 5</button>
	<button class="btn btn-flat primary">Button 6</button>
	<button class="btn btn-flat positive">Button 7</button>
	<button class="btn btn-flat negative">Button 8</button>


	<button class="btn">
		<i class="icon icon-edit"></i>
		Button 9
	</button>
	<button class="btn primary">
		<i class="icon icon-edit"></i>
		Button 10
	</button>
	<button class="btn positive">
		<i class="icon icon-edit"></i>
		Button 11
	</button>
	<button class="btn negative">
		<i class="icon icon-edit"></i>
		Button 12
	</button>

	<button class="btn btn-flat">
		<i class="icon icon-edit"></i>
		Button 13
	</button>
	<button class="btn btn-flat primary">
		<i class="icon icon-edit"></i>
		Button 14
	</button>
	<button class="btn btn-flat positive">
		<i class="icon icon-edit"></i>
		Button 15
	</button>
	<button class="btn btn-flat negative">
		<i class="icon icon-edit"></i>
		Button 16
	</button>
</div>

Block buttons

				<div class="content padded-full">
	<button class="btn fit-parent">Button</button>
	<button class="btn fit-parent primary">Button</button>
	<button class="btn fit-parent positive">Button</button>
	<button class="btn fit-parent negative">Button</button>

	<button class="btn btn-flat fit-parent">Button</button>
	<button class="btn btn-flat fit-parent primary">Button</button>
	<button class="btn btn-flat fit-parent positive">Button</button>
	<button class="btn btn-flat fit-parent negative">Button</button>
</div>

Preloaders

				<div class="content padded-full">

    <div class="circle-progress active">
        <div class="spinner"></div>
    </div>

    <div class="padded-bottom"></div>

    <div class="progress active">
        <div class="determinate" style="width: 65%;"></div>
    </div>
</div>

Floating actions

The promoted action, implemented as a floating action button.
They disappear when the user scrolls the page down, but reappear as soon as a scroll up is detected.

Please, see it in action in the docs.

				<div class="content">
	<!-- Content goes here-->
</div>

<button class="floating-action padded-full icon icon-edit active primary"></button>

Forms

Please see a full code example here.

				<div class="content padded-full">

    <input type="text" placeholder="Full name">

    <div class="input-wrapper">
        <input class="with-label" type="email" id="input-1">
        <label class="floating-label" for="input-1">First Name</label>
    </div>

    <ul class="list">
        <li class="">
            <label class="checkbox">
                <input type="checkbox" class="">
                Checkbox1
                <span></span>
            </label>
        </li>
        <li class="">
            <label class="checkbox">
                <input type="checkbox" class="">
                Checkbox2
                <span></span>
            </label>
        </li>
    </ul>
    <ul class="list">
        <li class="padded-for-list">
            <label class="radio">
                <input type="radio" name="test">
                Radio1
                <span></span>
            </label>
        </li>
        <li class="padded-for-list">
            <label class="radio">
                <input type="radio" name="test">
                Radio2
                <span></span>
            </label>
        </li>
    </ul>


    <button class="btn fit-parent primary">Submit</button>
</div>

Panels

Please see a full code example here.

				<div class="content padded-full">
	<button class="btn primary" data-panel-id="action-sheet">Open Panel</button>

    <!-- The Panel is missing in the <body> tag, please see the docs.-->
</div>

Full Panels

Please see a full code example here.

				<div class="content padded-full">
	<button class="btn btn-flat primary" data-panel-id="full-panel-example">Open Full Panel</button>

    <!-- The Panel is missing in the <body> tag, please see the docs.-->
</div>

Side Panels

Side Panels can be toggle with buttons. Drag and drop gestures are supported.

Also, they can be exposed from the left or the right on tablet.

Please see a full example here.

				<header class="header-bar">
	<button class="btn pull-left icon icon-menu" data-side-panel-id="side-home"></button>
    <div class="center">
    	<h1 class="title">Side Panels</h1>
    </div>
</header>

<!-- The Side Panel is missing in the <body> tag, please see the docs.-->

Dialogs

Dialog windows provide contextual feedback messages for typical user actions.

Please see a full code example here.

				<div class="content padded-full">

    <button class="btn fit-parent padded-bottom" data-dialog-id="simple-alert">Simple Dialog</button>
    <button class="btn fit-parent padded-bottom" data-dialog-id="simple-confirm">Simple Confirm</button>
    <button class="btn fit-parent padded-bottom" data-dialog-id="simple-prompt">Simple Prompt</button>
    <button class="btn fit-parent" data-dialog-id="simple-indicator">Simple Indicator</button>
</div>

Notifications

Please see a full example here.

				<div class="content">

        <div class="padded-full">
            <button class="btn fit-parent btn-primary" id="show-notif-btn">Show a notification</button>
        </div>
    </div>

Grid

				<div class="content">
    <div class="padded-full">

        <div class="padded-full">
           <div class="row text-center">
                <div class="tablet-4 large-6 column" style="background-color:#ccc;">phone-12 tablet-4 large-6</div>
                <div class="tablet-4 large-2 column" style="background-color:#ddd;">phone-12 tablet-4 large-2</div>
                <div class="tablet-4 large-4 column" style="background-color:#eee;">phone-12 tablet-4 large-4</div>
            </div>

            <div class="padded-bottom"></div>

            <div class="row text-center">
                <div class="phone-6 tablet-2 column" style="background-color:#ccc;">phone-6 tablet-2</div>
                <div class="phone-4 tablet-4 column" style="background-color:#ddd;">phone-4 tablet-4</div>
                <div class="phone-2 tablet-6 column" style="background-color:#eee;">phone-2 tablet-6</div>
            </div>

            <div class="padded-bottom"></div>

            <div class="row text-center">
                <div class="tablet-6 column" style="background-color:#ccc;">phone-12 tablet-6</div>
                <div class="tablet-6 column" style="background-color:#ddd;">phone-12 tablet-6</div>
            </div>

            <div class="padded-bottom"></div>

            <div class="row text-center">
                <div class="phone-4 tablet-6 column" style="background-color:#ccc;">
                    <div class="padded-full">
                        phone-4 tablet-6 padded</div>
                    </div>
                <div class="phone-8 tablet-6 column" style="background-color:#ddd;">
                    <div class="padded-full">
                        phone-8 tablet-6 padded
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Tables

				<div class="content padded-full">
    <table class="table">
        <tr>
            <thead>
                <th>Features</th>
                <th>Standard</th>
                <th>Premium</th>
            </thead>
        </tr>
        <tbody>
            <tr>
                <td>Feature 1</td>
                <td>&#x2715;</td>
                <td>&#10003;</td>
            </tr>
            <tr>
                <td>Feature 2</td>
                <td>Limited</td>
                <td>Unlimited</td>
            </tr>
            <tr>
                <td>Feature 3</td>
                <td>&#x2715;</td>
                <td>&#10003;</td>
            </tr>
        </tbody>
    </table>

Material design icons

20 Material Design icons!

				<div class="content padded-full">
	<i class="icon icon-home with-circle"></i>
	<i class="icon icon-info-outline with-circle"></i>
	<i class="icon icon-settings with-circle"></i>
	<i class="icon icon-add with-circle"></i>
	<i class="icon icon-edit with-circle"></i>
	<i class="icon icon-arrow-back with-circle"></i>
	<i class="icon icon-arrow-forward with-circle"></i>
	<i class="icon icon-check with-circle"></i>
	<i class="icon icon-chevron-left with-circle"></i>
	<i class="icon icon-chevron-right with-circle"></i>
	<i class="icon icon-close with-circle"></i>
	<i class="icon icon-expand-more with-circle"></i>
	<i class="icon icon-expand-less with-circle"></i>
	<i class="icon icon-menu with-circle"></i>
	<i class="icon icon-more-horiz with-circle"></i>
	<i class="icon icon-more-vert with-circle"></i>
	<i class="icon icon-sync with-circle"></i>
	<i class="icon icon-sync-problem with-circle"></i>
	<i class="icon icon-star with-circle"></i>
	<i class="icon icon-star-outline with-circle"></i>
</div>