UI-list ++

by mrmartineau

HTML

<ul class="ui-list user-nav">
    <li class=split>
        <a href=/messages/ class=split-title title="View all messages">Messages</a>
        <a href=/messages/unread class=loz title="View unread messages">100</a>
    </li>
    <li class=split>
        <a href=/events/ 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=/messages/ class=split-title title="View all tasks">Tasks</a>
        <a href=/messages/unread class=loz title="View 3 incomplete tasks">3/8</a>
    </li>
    <li>No photos yet&hellip; <a href=/upload/>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=/sign-up/ class=ui-list-link>Create an account</a>
    </li>
    <li>Discover <a href=/discover/photography/>photography</a>, <a href=/discover/art/>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 ---*/
/* High-level elements */
h1,h2,h3,h4,h5,h6,hgroup,
ul,ol,dd,
p,figure,
pre,table,fieldset,hr,
/* Custom objects */
.media,.island{
    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,
        .img-rev 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;
      ...