UI-list ++

Original: http://jsfiddle.net/csswizardry/Vkff3/

by Jens Grochtdreis

HTML

<ul class="ui-list user-nav">
    <li class=split>
        <a href="#" class="split-title" title="View all messages">Messages</a>
        <a href="#" class="loz" title="View unread messages">100</a>
    </li>
    <li class=split>
        <a href="#" class="ui-list-link" title="View all events">
            <span class="split-title">Events</span>
            <span class="loz informative" title="You have 4 events this month">4</span>
        </a>
    </li>
    <li class=split>
        <a href="#" class="split-title" title="View all tasks">Tasks</a>
        <a href="#" class="loz" title="View 3 incomplete tasks">3/8</a>
    </li>
    <li>No photos yet&hellip; <a href="#">Add one?</a></li>
</ul>

<p>You have <strong class="loz">3</strong> invites remaining.</p>

<div class="media island hilite">
    <img src=http://placekitten.com/100/150 alt="" class="img">
    <div class="body">
        <h3>Cats are:</h3>
        <ul class="ui-list">
            <li>Furry</li>
            <li>Small</li>
            <li>Annoying</li>
        </ul>
    </div>
</div>

<ol class="ui-list steps-list">
    <li>
        <a href="#" class="ui-list-link">Create an account</a>
    </li>
    <li>Discover <a href="#">photography</a>, <a href="#">art</a> and more&hellip;</li>
    <li>Upload photos</li>
    <li>Edit albums</li>
    <li>Share with friends</li>
</ol>

CSS

/*--- Housekeeping ---*/
/* Please use a better reset in production. */
*{
    margin:0;
    padding:0;
}
/* Clearfix */
.media:before,
.cf:before,
.media:after,
.cf:after{
    content:"";
    display:table;
}
.media:after,
.cf:after{
    clear:both;
}
.media,
.cf{
    zoom:1;
}





/*--- Shared ---*/
h1,h2,h3,h4,h5,h6,hgroup,
ul,ol,dd,
p,figure,
pre,table,fieldset,hr,
.media{
    margin-bottom:1.5rem;
}
ul,ol,dd{
    margin-left:1.5rem;
}





/*--- Elements ---*/
html{
    font:0.75em/1.5 sans-serif;
    padding:5%;
    color:#333;
    background-color:#fff;
}
a{
    text-decoration:none;
    color:#224f78;
}
    a:hover{
        text-decoration:underline;
    }





/*--- UI-list ---*/
/*
Create big ol’ blocky lists, e.g.:

<ul class-ui-list>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ul>
*/
.ui-list,
    .ui-list > li{
        border:0 solid #ccc;
    }
.ui-list{
    list-style:none;
    margin-left:0;
    border-top-width:1px;
}
    .ui-list > li{
        border-bottom-width:1px;
        padding:8px;
    }
        .ui-list-link,
        .ui-list-link.split{
            display:block;
            padding:8px;
            margin:-8px;
        }





/*--- The media object ---*/
/*
Image-like and text-content pairings, as per stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
*/
.media{
    display:block;
}
    .img{
        float:left;
        margin-right:1.5rem;
    }

    /* Reversed image location (right instead of left). */
    .img-rev{
        float:right;
        margin-left:1.5rem;
    }
        .img img{
            display:block;
        }
    .body{
        overflow:hidden;
    }
        .body > :last-child{
            margin-bottom:0;
        }





/*--- The island object ---*/
/*
Box off content, as per csswizardry.com/2011/10/the-island-object
*/
.island{
    padding:1.5rem;
    -webkit-border-radius:4px;
       -moz-border-radius:4px;
            border-radius:4px;
}
    .island > :last-child{
    ...