Foundation Platoon Calendar - Partial Column

Simple js fidle including references to foundation 5.5 css and js used to mock platoon calendar

by Jordan King

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<div class="row">
    <div class="small-12 medium-2 columns" style="background:lightGrey;height:150px;">Left Column</div>
    <div class="small-12 medium-8 columns">
        <div class="row">
            <div class="small-2 columns calPrev">&lt;</div>
            <div class="small-8 columns calMonth">March 2015</div>
            <div class="small-2 columns calNext">&gt;</div>
        </div>
        <div class="row calRow">
            <div class="small-12 columns pCal">
                <ul class="small-block-grid-7">
                    <li class="calHead">
                        <span>SUN</span>

                    </li>
                    <li class="calHead">
                        <span>MON</span>

                    </li>
                    <li class="calHead">
                        <span>TEU</span>

                    </li>
                    <li class="calHead">
                        <span>WED</span>

                    </li>
                    <li class="calHead">
                        <span>THU</span>

                    </li>
                    <li class="calHead">
                        <span>FRI</span>

                    </li>
                    <li class="calHead">
                        <span>SAT</span>

                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftGr shift2" />
                            <dt class="shiftOr shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-29.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
 ...

CSS

.calRow {
    max-width:100%;
}
.calMonth, .calPrev, .calNext {
    text-transform:uppercase;
    font-weight:bold;
    color:gray;
    font-size:2em;
    margin:15px 0;
}
.calMonth {
    text-align:center;
}
.calPrev {
    text-align:left;
}
.calNext {
    text-align:right;
}
.pCal ul li {
    text-align:center;
    height:0;
    padding:0 0 14.28571%;
    border-left:solid 1px gray;
    border-top:solid 1px gray;
    position: relative;
}
.pCal ul li:after {
    content:'';
    display: block;
    margin-top: 100%;
}
.pCal ul li dl {
    position:relative;
    padding:0;
    margin:0;
    top:0;
    height:100%;
}

.pCal ul li dl dt {
    padding:0;
    margin:0;
}
.pCal ul li.calHead {
    font-size:1.2em;
    border:none;
    color:gray;
    height:25px;
    margin-bottom:15px;
}
.calToday {
    border-bottom:0.5em solid lightGrey;
}

.calDay {
    position:relative;
    padding:15%;
    margin:0;
    top:-100%;
}

.calLayer2, .calLayer3, .calLayer4 {
    position:relative;
    padding:0;
}
.calLayer2 {
    top:-200%;
}
.calLayer3 {
    top:-300%;
}
.calLayer4 {
    top:-400%;
}

/*  SHIFT HEIGHT / SIZE STYLES  */

.shift2 {
    height:50%
}
.shift3 {
    height:33.33%
}
.shift4 {
    height:25%
}


/* OVERLAY STYLES  */
.calX img{
    width:100%;
    padding-top:2%;
}
.calCircle img{
    width:100%;
    padding:9% 7%;
}
.calSquare img {
    width:100%;
    padding:7%;
}

/*  SHIFT COLOR STYLES  */
 
.shiftYw {
    background:yellow;
}
.shiftOr {
    background:orange
}
.shiftBl {
    background:blue
}
.shiftRd {
    background:red
}
.shiftGr {
    background:green
}
.shiftWt {
    background:white
}
.shiftBk {
    background:lightGray
}

.pCal .calDayParts {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.pCal .calDayOverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto;
    width:100%;
}
.calLayer1, .calLayer2, .calLayer3 {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}