Legacy Custom Apps Style Guide v1

There are several great ways to format the HTML of your App so that it visually complements the rest of the web app. Inline CSS and JavaScript will be stripped out, but it’s still possible to add a bit of style to your HTML.

Basics

Let’s start with the example App:

The HTML for this App would be as follows:

<h4><a href="[URL here]">Jan's Famous Cupcakes</a></h4>
<p class="muted">Customer since 05/07/2012 10:55 AM</p>
<ul>
    <li><a href="[URL here]">Administrator</a></li>
    <li>Business Plan</li>
    <li>$1,245.00 lifetime value</li>
</ul>

The following classes can be used to format text:

Collapsible Content

You can store some content in a collapsible area to save space, then expand/collapse it as needed. The example below shows two collapsible content areas. When you click the link, the content expands or collapses:

By adding the “open” class to the top toggleGroup, the default state will be open (expanded) and you can collapse the content on click. Remove the open class and the toggleGroup will be closed by default, like the Order History section above. Here’s the HTML:

<div class="toggleGroup open">
  <h4><a href="#" class="toggleBtn"><i class="icon-arrow"></i>Profile</a></h4>
  <div class="toggle indent">
    <ul class="unstyled">
      <li><strong>Jan's Famous Cupcakes</strong></li>
      <li>$1,245 lifetime value</li>
      <li>Customer since 05/07/12</li>
      <li>10 orders</li>
    </ul>
  </div>
</div>
<div class="toggleGroup">
  <h4><a href="#" class="toggleBtn"><i class="icon-cart"></i>Order History</a></h4>
  <div class="toggle indent">
    <ul class="unstyled">
      <li><span class="muted">12/14/12</span> - $195 (<a href="#">#12345</a>)</li>
      <li><span class="muted">08/10/12</span> - $74 (<a href="#">#12112</a>)</li>
      <li><span class="muted">05/07/12</span> - $112 (<a href="#">#11342</a>)</li>
    </ul>
  </div>
</div>

We suggest using the arrow icon for collapsible content, as it will rotate based on the state. The arrow faces down when the content is expanded and faces to the right when collapsed.

If you’d like to nest toggleGroups, simply add the .nested class so the arrow icon will rotate accordingly.

Icons

Simply add the .muted class to any of these icons to lighten them up a bit.