Creating Layouts – ChocolateChip Tutorial 1

Layouts

ChocolateChip-UI provides a layout module to enable you to create the layouts you need. It uses an unordered list with the class list. This means you can use a normal ordered or unordered list inside of ChocolateChip-UI’s layout lists and they will be displayed as expected.

To create a layout is very simple. Just put an unordered list with the class ‘list’, then add content to the list items. The default list layout stacks its content vertically. Also all h3, h4 and p tags will wrap their contents when it is longer than can fit on the line. Layout lists expect the following possible containers for content:

h3 (the list item title)
h4 (the list item subtitle)
p (the list item detail or description)

List with list item titles:

<ul class='list'>
    <li>
        <h3>People</h3>
    </li>
    <li>
        <h3>Places</h3>
    </li>
    <li>
        <h3>Food</h3>
    </li>
</ul>

List with list item titles and subtitles:

<ul class='list'>
    <li>
        <h3>People</h3>
        <h4>Your Friends</h4>
    </li>
    <li>
        <h3>Places</h3>
        <h4>Interesting Destinations</h4>
    </li>
    <li>
        <h3>Food</h3>
        <h4>Restaurants</h4>
    </li>
</ul>

Here is a list with various content types:

<ul class='list'>
    <li>
        <img title='Blues' src="../images/music/Willy Moon.png" height='100px'>
        <h3>Willy Moon</h3>
        <h4>Yeah Yeah</h4>
        <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus.</p>
    </li>
    <li>
        <img title='Classical' src="../images/music/The Olms.png" height='100px'>
        <h3>The Olms</h3>
        <h4>Wanna Feel It</h4>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
</ul>

You can create a list header by putting an h2 tag right before it. Similarly, you can create a list footer by putting a p tag immediately after the list. A list header is displayed with all caps and is cut off with ellipsis if it is longer than can fit on the screen. You can set the header to display its actual capitalization by putting the class normal-case.

List with header:

<h2>
    Basic tableheader with a bunch of stuff in here
</h2>
<ul class='list'>
    <li>
        <h3>People</h3>
    </li>
    <li>
        <h3>Places</h3>
    </li>
    <li>
        <h3>Food</h3>
    </li>
</ul>

List with header using the class normal-case:

<h2 class='normal-case'>
    Basic tableheader with a bunch of stuff in here
</h2>
<ul class='list'>
    <li>
        <h3>People</h3>
    </li>
    <li>
        <h3>Places</h3>
    </li>
    <li>
        <h3>Food</h3>
    </li>
</ul>

List with footer (You can have more than one p tag after a list.):

<ul class='list'>
    <li>
        <h3>People</h3>
    </li>
    <li>
        <h3>Places</h3>
    </li>
    <li>
        <h3>Food</h3>
    </li>
</ul>
<p>A quick summary about all of the items in this list. You can put as much as you like in here and the text will simply wrap around.</p>
<p>To create a footer, just put a paragraph tag right after the list. And yes, as you can see, you can put multiple paragraphs after the list for more complex list footers.</p>

This simple technique provides a consistent way to implement layouts with little effort. However, if you need more precise layouts for placement of list item content, ChocolateChip-UI provides another layout option: comp list items.

Comp Layouts

Comp stands for composite or complex. You can designate a list as comp by adding the class comp. When a list item has this class, you can insert several list item containers to create various types of layouts. There are thee possible combinations of containers for comp layouts:

div + aside
aside + div
aside + div + aside

A div will always be used to hold the list item h3, h4 and p. Asides are always used for secondary material, such as images, counters or date-time markers. If you wanted to have a list item show an image on the side with the h3, etc. next to it, you would put the image in an aside, followed by a div with the h3, etc. When using comp layouts, if the width of the container for the h2 and h3 is shorter than their content, they will be clipped with an ellipsis. This is more likely to happen in portrait orientation. Switching to landscape orientation will usually reveal the clipped text, unless it is really long.

Here’s a basic comp layout

<ul class='list'>
    <li class='comp'>
        <aside>
            <img title='Imagine Dragons' src="../images/music/Imagine Dragons.png" height="80px">
        </aside>
        <div>
            <h3>Imagine Dragons</h3>
            <h4>Radioactive</h4>
        </div>
    </li>
</ul>

In the above example, notice that we only provided a height for the image. This will mean that all images will be the same height, though not necessarily the same width. If the images are different widths, the div with the h3 and h4 will automatically adjust its width to accommodate the image. You could also apply a width to the image instead of a height. Then all cells would be the same width, though their height would vary depending on the image height. You could also control the height or width of the images through a CSS declaration.

Here’s another possible list item layout where the subtitle is displayed to the right of the title by putting it in a aside. By default the content in the last aside is always displayed spread horizontally and centered vertically:

<ul class='list'>
    <li class='comp' data-goto='people'>
        <div>
            <h3>People</h3>
        </div>
        <aside>
            <h4>Your Friends</h4>
        </aside>
    </li>
</ul>

There are times where you want to indicate a value on a list item. This may be the price, the weight or the number of items it will reveal. You can provide that information in a counter tag. This is just a span tag with the class counter. You put that in and aside after the list item’s div:

<ul class='list'>
    <li class='comp'>
        <div>
            <h3>People</h3>
        </div>
        <aside>
            <h4>Your Friends</h4>
            <span class='counter'>23</span>
        </aside>
    </li>
</ul>

You can also provide a date-time value using a span with the class date-time:

<ul class='list'>
    <li class='comp'>
        <div>
            <h3>Meetings</h3>
        </div>
        <aside>
            <h4>Personal</h4>
            <span class='date-time'>Monday</span>
        </aside>
    </li>
</ul>

And here’s a comp layout with an aside, div and aside:

<ul class='list'>
    <li class='comp'>
        <aside>
            <span class='icon weather'></span>
        </aside>
        <div>
            <h3>Weather</h3>
        </div>
        <aside>
            <h4>Alerts</h4>
            <span class='counter'>2</span>
        </aside>
    </li>
</ul>

Sometimes you may want to emphasize the subtitle visually over the title. You can do with with the switched class on the list items. This type of layout only expects the title and subtitle as content.

<ul class='list'>
    <li class='switched'>
        <h3>People</h3>
        <h4>Your Friends</h4>
    </li>
    <li class='switched'>
        <h3>Places</h3>
        <h4>Interesting Destinations</h4>
    </li>               
</ul>

Navigation Indicators

iOS uses navigation indicators to inform the user that tapping a list item will result in navigation to another screen. ChocolateChip-UI provides a simple way to provide this visual feedback. For simple list layouts, just put the class ‘nav’ on the list item. This will display a right pointing chevron on iOS. Please note that this will be hidden on Android and Windows Phone 8 as these are foreign to those operating systems.

<ul class='list'>
    <li class='nav'>
        <h3>People</h3>
    </li>
    <li class='nav'>
        <h3>Places</h3>
    </li>
    <li class='nav'>
        <h3>Food</h3>
    </li>
</ul>

If you have a number of items in your you list, the placement of the navigation indicator might appear vertically off. If you would prefer that it was vertically centered to the height of the list item, you can accomplish this by using a comp layout and putting a span with a class of nav in each list item. Since these are navigation items, they have the data-goto attribute indicating what article they will go to. Read the tutorial on navigation to learn how this works.

<ul class='list'>
    <li class='comp' data-goto='people'>
        <div>
            <h3>People</h3>
            <h4>Your Friends</h4>
        </div>
        <aside>
            <span class='nav'></span>
        </aside>
    </li>
    <li class='comp' data-goto='places'>
        <div>
            <h3>Places</h3>
            <h4>Interesting Destinations</h4>
        </div>
        <aside>
            <span class='nav'></span>
        </aside>
    </li>
</ul>

Sometimes you may want to indicate that a list item will reveal some greater detail about an item. You can show this with the show-detail class. For simple lists just put it on the list item:

<ul class='list'>
    <li class='show-detail'>
        <h3>People</h3>
    </li>
    <li class='show-detail'>
        <h3>Places</h3>
    </li>
    <li class='show-detail'>
        <h3>Food</h3>
    </li>
</ul>

Unlike the navigation indicator for iOS, this will be display on Android and Windows Phone 8. For comp layouts you can use a span with the class show-detail in the last aside:

<ul class='list'>
    <li class='comp' data-goto='#detail'>
        <aside>
            <img title='Imagine Dragons' src="../images/music/Imagine Dragons.png" height="80px">
        </aside>
        <div>
            <h3>Imagine Dragons</h3>
            <h4>Radioactive</h4>
        </div>
        <aside>
            <span class='show-detail'></span>
        </aside>
    </li>
</ul>

Open up the layout examples and see how they are put together and how they display in browser and on devices. If you find yourself in a situation where none of these layouts cover your needs, feel free to create a new class for any of the layout containers. Open up the CSS file and copy the style of the closest thing to what you need. Then modify the new class to suit your purposes. Remember, this is just markup and CSS. Customize it to suit your needs.