CSS3 Widgets

by ethanpil

HTML

<header>
    <section class="left"></section>
    <section class="center">Demo Application</section>
    <section class="right"></section>
</header>
<main>
    <ul class="listview">
        <li class="section">Desktop</li>
        <li><a href="#">Wide-Screen Designs</a>
    
        </li>
        <li><a href="#">Fluid Web Layouts</a>
    
        </li>
        <li><a href="#">Design Software</a>
    
        </li>
        <li><a href="#">Coding Websites</a>
    
        </li>
        <li class="section">Laptop</li>
        <li><a href="#">Designing on the Go</a>
    
        </li>
        <li><a href="#">Adjusting Designs</a>
    
        </li>
        <li><a href="#">Great Resources</a>
    
        </li>
        <li class="section">Tablet PC</li>
        <li><a href="#">Responsive Web Layouts</a>
    
        </li>
        <li><a href="#">Portrait vs. Landscape views</a>
    
        </li>
        <li class="section">Mobile Device</li>
        <li><a href="#">Android and iPhone</a>
    
        </li>
        <li><a href="#">Mobile Web Browsers</a>
    
        </li>
        <li><a href="#">CSS3 and jQuery</a>
    
        </li>
    </ul>
</main>

SCSS

body {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}

header {
    
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 3em;
    background: #4679BD;
    color: white;
    
    section.left {
        float: left;
    }
    section.center {
        overflow: hidden;
        text-align: center;
    }
    section.right {
        float: right;
        text-align: right;
    }
}
main {
    position: fixed;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    top: 3.15em;
    overflow-x: hidden;
    overflow-y: auto;
}
.listview {
    list-style-type: none;
    margin: 0;
    padding: 0;
    
    li {
        padding: .33em;
        text-align: left;
        border-bottom: 1px solid #eee;
        
        &:not(.section) {
            &:after {
                content:"\2756";
                float: right;
            }            
        }
                
        img {
            max-width: 20%;
            height: auto;
            margin-right: .75em;
            vertical-align: middle;
        }
    }
}