Docs

Everything You Need to Know

Layouts

Intro

Truck Body

Let's face it, layout is tough, even for the professionals. We're developers. We need help. Differrent platforms are, different. Yeah, layout is tough. Truck takes the pain out of coming up with a layout that works across mobile devices. We provide you with a number of versatile patterns to cover your needs for the most common use cases.

Truck gives you a number of 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.

Truck layouts are based on the concept of screens. A screen is something that fills the screen of a mobile device from top to bottom, edge to edge. In truck a screen is a screen tag. It hold all the other tags that constitute a layout. When the user navigates though your app, he or she goes from one screen to another and back.

A screen is a vertical stack. It can have any of the following elements: nav, section or toolbar/footer. At a minimum a screen must have a section tag. This is the container for the important content of your app. It is a vertical, scrollable container. The nav tag create a navigation bar along the top of the screen, whereas the toolbar/footer will be at the bottom. If you create a screen without a navigation bar, be sure to provide some artifice be which the user can get out of that screen.

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

<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>
</screen>