UIkit Card Testing

by Adam Jones

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/uikit.gradient.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/js/uikit.js"></script>
<div class="uk-container">
    <nav class="uk-navbar">
        <a href="#" class="uk-navbar-brand">B Maildog</a>
        <li class="uk-parent" data-uk-dropdown="{mode:'click'}">
            <a href="">Nav item - Works OK</a>
            <div class="uk-dropdown uk-dropdown-navbar">
                <ul class="uk-nav uk-nav-navbar">
                    <li ng-repeat="item in items">
                        <a href="">{{item}}</a>
                    </li>
                </ul>
            </div>
        </li>

        <div class="uk-navbar-nav uk-navbar-flip">
            <li class="uk-parent" data-uk-dropdwn>
                <!-- list element needs uk-parent -->
                <a href="">Username [portrait]</a>
                <div class="uk-dropdown uk-dropdown-navbar">
                    <ul class="uk-nav uk-nav-navbar">
                        <li><a href="">Settings</a></li>
                        <li><a href="">Logout</a></li>
                    </ul>
                </div>
            </li>
        </div>

    </nav>





    <div class="uk-grid uk-grid-collapse">

        <div class="card-container uk-width-tiny-1-2 uk-width-small-1-2 uk-width-medium-1-3 uk-width-large-1-4">
            <div class="card card-classic uk-border-rounded">
                <div class="card-header">Example Classic List</div>
                <div class="card-body uk-width-1-1 uk-height-1-1 uk-overlay">
                    This is a description, ipsum lorem yadda.
                </div>
                <div class="card-footer uk-width-1-1 uk-vertical-align">
                    <div class="uk-flex uk-flex-inline uk-width-1-1 uk-vertical-align-bottom">
                        <div class="card-date uk-width-3-5">
          ...

CSS

body { 
    font-family: 'Arial', serif;
    background-color: #587983;
    height: 100%;
}

.card:hover {
    box-shadow: 0 0 2px 1px white;
}
.card {
    margin: 15px;
    # border-color: grey;
    # border-width: 1px;
    # border-style: solid;e
}

.card-mailman {
    border-left: solid 10px #bbefab;
    border-right: solid 1px #bbefab;
    border-top: solid 1px #bbefab;
    border-bottom: solid 1px #bbefab;
    #background: #bbefab;
    #background: #f2fae3;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(100, 100, 100, 0.5);
    -moz-box-shadow: 2px 2px 2px 0px rgba(100, 100, 100, 0.5);
    box-shadow: 2px 2px 2px 0px rgba(100, 100, 100, 0.5);
}

.card-classic {
    border-left: solid 10px #99e8f2;
    #background: #99e8f2;
    #background: #ebf7fd;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(100, 100, 100, 0.5);
    -moz-box-shadow: 2px 2px 2px 0px rgba(100, 100, 100, 0.5);
    box-shadow: 2px 2px 2px 0px rgba(100, 100, 100, 0.5);
}

.card-header {
    background-color: #DDD;
    font-size: 120%;
    font-weight: bold;
    text-align: center;
    padding: 5px;
}

.card-status .card-date .card-count {
    margin: 0px;
    padding: 5px;
    text-align: center;
}

.card-footer {
    background-color: #CCC;
    color: #555;
    margin: 0px;
    padding: 5px;
}

.card-body {
    background-color: #f5f5f5;
    padding: 5px;
    min-height: 90px;
    text-align: justify;
}

JavaScript

WebFontConfig = {
    google: { families: [ 'Vollkorn::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();