Feature Grid Styling

by Trever Shick

HTML

<table width="100%">
    <tr>
        <th></th>
        <th>ID</th>
        <th class="col-4">Name</th>
        <th>% Complete</th>
        <th>Status</th>
    </tr>
    <tr>
        <td class="drag"></td>
        <td><a href="#" class="feature-link">MF01</a>
        </td>
        <td>The name of the feature 01 is here.</td>
        <td>
            <div class="container">
                <div class="bar">
                    <div style="width:80%" class="meter onTrack"></div>
                    <div class="percent">80%</div>
                </div>
            </div>
        </td>
        <td>On Track</td>
    </tr>
    <tr class="notdraggable">
        <td class="drag"></td>
        <td><a href="#" class="feature-link">MF02</a>
        </td>
        <td>This is yet another feature.</td>
        <td>
            <div class="container">
                <div class="bar">
                    <div style="width:20%" class="meter late"></div>
                    <div class="percent">20%</div>
                </div>
            </div>
        </td>
        <td>Late</td>
    </tr>
</table>

<br/>
<hr/>
<br/>

<div class="container">
    <div class="bar">
        <div style="width:0%" class="meter notStarted"></div>
        <div class="percent">0% / Not Started</div>
    </div>
</div>


<div class="container">
    <div class="bar">
        <div style="width:80%" class="meter onTrack"></div>
        <div class="percent">80% / On Track</div>
    </div>
</div>
<div class="container">
    <div class="bar">
        <div style="width:30%" class="meter risk"></div>
        <div class="percent">30% / At Risk</div>
    </div>
</div>
<div class="container">
    <div class="bar">
        <div style="width:20%" class="meter late"></div>
        <div class="percent">20% / Late</div>
    </div>
</div>
<div class="container">
    <div class="bar">
        <div style="width:100%" class="meter complete"></div>
        <div class="percent">100% / Complete</div>
    </div>
</div>

CSS

@import url("http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic");

/*********** DEFAULT BODY STYLING **********/
 body {
    font-family:"Noto Sans";
    font-size: 12px;
    line-height: 1.0;
    border-spacing: 0px;
}
a.feature-link {
    color: #337EC6;
    /* $blue_link */
    text-decoration: none;
}
/********** DEFAULT TABLE STYLING **********/
 table {
    font-size: 12px;
    line-height: 1.4;
    border-spacing: 0px;
}
tr {
    height: 32px;
}
td {
    padding: 4px;
    vertical-align: top;
    border-bottom: 1px solid #D6D6D6;
    /* $grey3 */
}
th {
    font-weight: normal;
    color: #000;
    /* black */
    border-bottom: 2px solid #D6D6D6;
    /* $grey3 */
    vertical-align: bottom;
    text-align: left;
    padding: 4px;
}

/***** COMMENT (Do NOT use this code as reference to production *****/
.container {
    width: 100px;
    float: left;
    height: 20px;
}
.bar {
    font-size: 12px;
    line-height: 1.0;
    width: 100px;
    background: #E6E6E6;
    /* $grey2 */
    position: absolute;
    float: left;
    height: 20px;
    border-radius: 2px;
}
.bar:hover {
    cursor: pointer;
}
.meter {
    float: left;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    text-decoration: none;
    position: absolute;
    height: 20px;
}
.percent {
    text-transform: uppercase;
    font-family:"ProximaNovaSemiBold", sans-serif;
    color: #444;
    /* $grey8 */
    font-size: .8em;
    /* 13px */
    text-align: center;
    height: 20px;
    float: left;
    position: absolute;
    width: 100px;
    padding: 4px 0px;
}
.notStarted {
    background: #E6E6E6;
    /* $grey2 */
}
.onTrack {
    background: #8DC63F;
    /* $lime */
}
.risk {
    background: #FAD200;
    /* $yellow */
}
.late {
    background: #F66349;
    /* $red_med */
}
.complete {
    background: #C0C0C0;
    /* $grey4 */
    width: 100%;
    border-radius: 2px;
}