Springboard

A springboard is an ideal candidate for applying our grid layout. In the examples below we will see two types of springboards. First, we will see a springboard styled with app icons (see Figure 6–8) and secondly we will see a springboard styled with Glyphish icons (see Figure 6–9).

Figure 6–8. Springboard with app icons

Figure 6–9. Springboard with Glyphish icons

Are you up for a springboard challenge? If you are, I encourage you to create a springboard that closely resembles one of the two figures. Both examples are configured identically from a grid perspective. However, the Springboard with Glyphish icons (see Listing 6–9) is styled slightly different than the Springboard with app icons (see Listing 6–8) to adjust for its uneven icon heights.

Listing 6–8. Springboard with app icons (ch6/springboard1.html)<div class="ui-grid-a">
  <div class="ui-block-a">
    <a href="#">
      <img src="images/cloud.png">
      <span class="icon-label">App A</span>
    </a>
  </div>
  …
</div>

<style>
  /* center icons */
  .ui-grid-a { text-align: center; }

  /* set row height */
  .ui-block-a, .ui-block-b { height: 100px; }

  /* set label color and size */
  .icon-label { color: #000; display: block; font-size:12px; }

  a:link, a:visited, a:hover, a:active { text-decoration:none; }
</style>

Listing 6–9. Springboard with Glyphish icons (ch6/springboard2.html)<div class="ui-grid-a">
  <div class="ui-block-a">
    <div class="icon-springboard">
      <a href="#">
        <img src="images/45-movie-1-lg.png" alt="Now Playing">
        <span class="icon-label">Now Playing</span>
      </a>
    </div>
  </div>
  …
</div>

<style>
  /* center icons */
  .ui-grid-a { text-align: center; }

  /* set row height */
  .ui-block-a, .ui-block-b { height: 100px; position: relative; }

  /* set label size and color */
  .icon-label { color: #FFF; display: block; font-size:12px; }

  /* bottom align icons to adjust for uneven icon heights */
  .icon-springboard { position: absolute; bottom: 0; width: 100%; }

  a:link, a:visited, a:hover, a:active { text-decoration:none; }
</style>CopycopyHighlighthighlightAdd NotenoteGet Linklink