Yahoo Pure Email Example

by Rowan Hamilton

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/yui/3.18.0/yui/yui-min.js"></script>
<title>Email &ndash; Layout Examples &ndash; Pure</title>


<body>
<div id="layout" class="content pure-g">
    <div id="nav" class="pure-u">
        <a href="#" class="nav-menu-button">Menu</a>

        <div class="nav-inner">
            <button class="primary-button pure-button">Compose</button>

            <div class="pure-menu">
                <ul class="pure-menu-list">
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Inbox <span class="email-count">(2)</span></a></li>
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Important</a></li>
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sent</a></li>
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Drafts</a></li>
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Trash</a></li>
                    <li class="pure-menu-heading">Labels</li>
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link"><span class="email-label-personal"></span>Personal</a></li>
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link"><span class="email-label-work"></span>Work</a></li>
                    <li class="pure-menu-item"><a href="#" class="pure-menu-link"><span class="email-label-travel"></span>Travel</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div id="list" class="pure-u-1">
        <div class="email-item email-item-selected pure-g">
            <div class="pure-u">
                <img class="email-avatar" alt="Tilo Mitra&#x27;s avatar" height="64" width="64" src="img/common/tilo-avatar.png">
            </div>

            <div class="pure-u-3-4">
                <h5 class="email-name">Tilo...

CSS

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
    color: #333;
}



a {
    text-decoration: none;
    color: #1b98f8;
}


/*
 * -- HELPER STYLES --
 * Over-riding some of the .pure-button styles to make my buttons look unique
 */
.primary-button,
.secondary-button {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-radius: 20px;
}
.primary-button {
    color: #fff;
    background: #1b98f8;
    margin: 1em 0;
}
.secondary-button {
    background: #fff;
    border: 1px solid #ddd;
    color: #666;
    padding: 0.5em 2em;
    font-size: 80%;
}

/*
 * -- LAYOUT STYLES --
 * This layout consists of three main elements, `#nav` (navigation bar), `#list` (email list), and `#main` (email content). All 3 elements are within `#layout`
 */
#layout, #nav, #list, #main {
    margin: 0;
    padding: 0;
}

/* Make the navigation 100% width on phones */
#nav {
    width: 100%;
    height: 40px;
    position: relative;
    background: rgb(37, 42, 58);
    text-align: center;
}
/* Show the "Menu" button on phones */
#nav .nav-menu-button {
    display: block;
    top: 0.5em;
    right: 0.5em;
    position: absolute;
}

/* When "Menu" is clicked, the navbar should be 80% height */
#nav.active {
    height: 80%;
}
/* Don't show the navigation items... */
.nav-inner {
    display: none;
}

/* ...until the "Menu" button is clicked */
#nav.active .nav-inner {
    display: block;
    padding: 2em 0;
}


/*
 * -- NAV BAR STYLES --
 * Styling the default .pure-menu to look a little more unique.
 */
#nav .pure-menu {
    background: transparent;
    border: none;
    text-align: left;
}
    #nav .pure-menu-link:hover,
    #nav .pure-menu-link:focus {
        background: rgb(55, 60, 90);
    }
    #nav .pure-menu-link {
        color: #fff;
        margin-left: 0.5em;
    }
    #nav .pure-menu-heading {
        border-bottom: none;
        font-size:110%;
        color: rgb(75, 113, 151);
   ...

JavaScript

YUI().use('node-base', 'node-event-delegate', function (Y) {

        var menuButton = Y.one('.nav-menu-button'),
            nav        = Y.one('#nav');

        // Setting the active class name expands the menu vertically on small screens.
        menuButton.on('click', function (e) {
            nav.toggleClass('active');
        });

        // Your application code goes here...

    });