ChocolateChip-UI - Documentation

Docs

Everything You Need to Know

Layouts

Intro

Let's face it, layout is tough, even for the professionals. We're developers. We need help. Android and iOS have different layout systems. ChocolateChip-UI provides layouts that work reliably on both platforms.

ChocolateChip-UI gives you simple layout components and techniques that you can combine together to create a wide variety of layouts. And, if you're comfortable with CSS, you can create some CSS definitions to create your own.

Right-to-Left Languages

ChocolateChip-UI comes with great support for right-to-left languages, such as Arabic, Persian, Urdu and Hebrew. All you have to do is add dir='rtl' to the html tag. All layouts and widgets will be be switch to the direction that makes sense for right-to-left alphabets.

<html lang="en" dir='rtl'>

For examples of right to left language layouts, look for the following files in the examples forlder:

layouts/list-composite-4-rtl-ar.html
layouts/list-composite-4-rtl-he.html
multi-select-list-rtl-ar.html
navigation-list-rtl-ar.html
range-control-rtl-ar.html
select-list-rtl-ar.html
switch-rtl-ar.html

You can create your own styles for a right-to-left language easily. Just provide the html[dir=rtl] as the main part of the selector, followed by the selector you wish to override for rtl support:

p.myClass {
  padding-left: 10px;
  margin-left: 10px;
}
/* Support right-to-left languages */
html[dir=rtl] p.myClass {
  padding-left: 0 !important;
  padding-right: 10px;
  margin-left: 0 !important;
  margin-right: 10px;
}

For information about how to get the examples, please read the installation instructions.

UI-Screens

ChocolateChip-UI layouts are based on the concept of screens. A screen is something that fills the viewable area of a mobile device from top to bottom, edge to edge. For this, ChocolateChip-UI uses a ui-screen tag. It holds all the other tags that constitute a layout. When users navigate though your app, they go from one ui-screen to another and back.

A ui-screen is a vertical stack. It can have any of the following elements: nav, section or toolbar/footer. At a minimum a ui-screen must have a section tag. This is the container for the important content of your app. It is a vertical, scrollable container. A nav tag creates a navigation bar along the top of the screen. You but it inside a ui-screen, right before the section tag. To create a toolbar for a ui-screen, put a footer tag after the section tag. It will be positioned at the bottom of the ui-screen. You can create a ui-screen without a navbar. If you do, be sure to provide some artifice be which the user can get out of that ui-screen.

The most common tag for content layout is the list. This is created using unordered html lists with a class of "list":

<ui-screen id='main' class='current'>
  <nav>
    <h1>The Title</h1>
  </nav>
  <section>
    <h2>A List</h2>
    <ul class='list'>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </section>
</ui-screen>

The Basics

Remember, the basic building blocks for your app's screens are ui-screen tags with a nav and section inside. The nav will create the title/toolbar along the top of that screen, and the section tag will hold all the content you want to display. The section can hold list, as described here, or cards as described below.

Cards

It's common for data to be displayed in chunks that use a card metaphore. ChocolateChip-UI provides an API for implementing cards and makes it easy to modify and customize them to suit your needs.

Cards use the class chui-card to indicate a card. Other chui classes are used to add modular styles, such as height, width, padding, color, etc. This enables you to easily put together a series of cards with consistent styling.

<div class="chui-card chui-shadow-1 chui-height-200 chui-width-600">
  <header class='chui-padding-5'>
    <h2>Card 1</h2>
  </header>
  <section class='chui-padding-5'>
    <p><strong>div:</strong> .chui-card .chui-shadow-1 .chui-height-200;</p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste quam, ipsa, sequi voluptates debitis ipsum perferendis eaque nobis, sit et praesentium? Quidem fuga quos sint voluptate explicabo necessitatibus officia dicta.
  </section>
  <footer class='chui-padding-5'>
    <button>Click</button>
  </footer>
</div>

You can learn more about cards in their documentation.