CSS: mobile dashboard

In this post I'm going to show you how to stylize a dashboard for mobile devices using CSS. A dashboard is a part of a web site that contains administrative items to perform certain tasks, such as changing the default configuration, add / remove users and so on. Styling a web site for mobile devices is not so difficult as it could seem. We basically need to bear in mind that we're dealing with low-resolution devices, so our elements must be dimensioned in a way that fits this resolution. To accomplish this task, we have two methods available: we can either use fluid dimensions and add more control with CSS3 Media Queries or stick to fixed widths expressed in pixels. In this example I'll use the latter alternative, though I do believe that the former is much more powerful.

Setting up the page

The skeleton of our page is as follows:

<div id="site">

    <div id="dashboard">
 
     <h2>Dashboard</h2>
 
     <ul>
  
      <li id="panel"><a href="#">Control panel</a></li>
   <li id="stats"><a href="#">Statistics</a></li>
   <li id="files"><a href="#">Files</a></li>
   <li id="setting"><a href="#">Settings</a></li>
   <li id="mail"><a href="#">Mail</a></li>
   <li id="feed"><a href="#">Feed</a></li>
  
  </ul>
 
 </div>


</div>

As you can see, our dashboard is a simple container that wraps an unordered list. This list contains six items, each one with a different ID attribute. This choice will eventually turn out to be very useful both for styling and scripting (not used here). What we want is having a different icon above each textual description. Let's move to CSS.

Global styles

First, we need to get consistent styles. For that reason, we start stylizing the body element and the site wrapper.

body {
    
    margin: 0;
    padding: 2em 0;
    font: 12px Arial, sans-serif;
    background: #008eb9;
    color: #333;
    
}

h2 {
    
    font: 100% "Arial Black", Arial, sans-serif;
    
}

#site {
    
    width: 380px;
    margin: 0 auto;
    background: #fff;
    border: 2px solid #777;
    -moz-border-radius: 6px;
    border-radius: 6px;
    
}

The width of the main wrapper is set to 380 pixels. This allows us to cater for the needs of various mobile devices without worrying too much about their screen resolution. Now it's time to stylize the dashboard.

Stylizing the dashboard

Each list item will have its own background image. Further, the text of each link must be placed just under the icon and horizontally centered.

#dashboard {
    
    padding: 10px 0;
    width: 360px;
    margin: 0 auto;
    
}

#dashboard h2 {
    
    background: #008eb9;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.5em;
    letter-spacing:. 0.1em;
    -moz-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    margin: 0 0 10px 0;
    padding: 6px;
    text-align: center;
    
}

#dashboard ul {
    
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    
}

#dashboard ul li {
    
    float: left;
    width: 120px;
    height: 6em;
    background-position: 50% 0;
    background-repeat: no-repeat;
    
}

#dashboard ul li a {
    
    display: block;
    width: 100%;
    float: left;
    text-decoration: none;
    color: #008eb9;
    text-transform: uppercase;
    font-variant: small-caps;
    text-align: center;
    font-weight: bold;
    padding-top: 55px;
    
}




#dashboard ul #panel {
    
    background-image: url(css-mobile-dashboard/panel.png);
}

#dashboard ul #stats {
    
    background-image: url(css-mobile-dashboard/stats.png);
}

#dashboard ul #files {
    
    background-image: url(css-mobile-dashboard/files.png);
}

#dashboard ul #setting {
    
    background-image: url(css-mobile-dashboard/setting.png);
}

#dashboard ul #mail {
    
    background-image: url(css-mobile-dashboard/mail.png);
}

#dashboard ul #feed {
    
    background-image: url(css-mobile-dashboard/feed.png);
}

Each list item has been floated, so we did need to add the declaration overflow: hidden to their container just to prevent floats from making the vertical space collapse. All links have been turned into block-level elements with a certain amount of vertical padding that allows us to keep them just under each icon. Finally, the icons have been inserted as background images of each list item.

Demo

Live demo