Gridster.js Initial Proto

Looks snazzy

by Pete Fecteau

HTML

<script src="https://buttonpresser.com/CivicIdeas_BS/js/gridster.js"></script>
<div class="gridster">
    <ul>
        <li class="idea" data-row="1" data-col="1" data-sizex="4" data-sizey="4">
            <div class="header">Idea</div>
        </li>
        <li class="discussion" data-row="2" data-col="1" data-sizex="2" data-sizey="2">
            <div class="header">Idea</div>
        </li>
        <li class="idea" data-row="3" data-col="1" data-sizex="1" data-sizey="1">
            <div class="header">Idea</div>
        </li>
 
        <li class="idea" data-row="1" data-col="2" data-sizex="2" data-sizey="2"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="1"></li>
 
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
 
        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
 
        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
    </ul>
</div>

SCSS

@import url('https://buttonpresser.com/CivicIdeas_BS/css/bootstrap-custom.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/gridster.css');
.gridster {width:920px;}
.gridster ul {list-style:none;}
.gridster ul li {
    background-color:#53b5dd;
}
.gridster ul li .header {
    background-color:#76777a;
    font-size:17.5px;
    color:#FFF;
    padding:10px 5px;
        &:before {
            content:"";
            display:block;
            float:left;
            height:40px;
            width:40px;
            margin:-5px 5px 0 0;
            background-image:url('https://buttonpresser.com/CivicIdeas_BS/img/simple_header_sprite.png');
            background-position:-3px 6px;
            background-repeat:no-repeat;
            background-color:transparent;
            text-transform:UPPERCASE;
        }
        .close-box {
            content:"Ă—";
            height:12px;
            width:12px;
            display: block;
            float:right;
            position: relative;
            top: -7px;
            right:5px;
            color:#FFF;
            cursor:pointer;
            padding:0;
            line-height:16px;
            opacity:0.4;
            &:hover {opacity:0.8;}
        }
}
.gridster ul li.idea {
    background-color:#53b5dd;
    .header {background-color:#28a2d5;}
    .header:before {background-position:0 6px;}
    ul {
        li {
            &:last-child a{background-color:#28a2d5;}
        }
    }
}

JavaScript

$(function(){
    $(".gridster ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [140, 140]
    });
});
$('.header').each(function() {
  $(this).append('<div class="close-box">&times;</div>');
});
$(function(){
    $('.close-box').click(function() {
        $(this).parent().parent().fadeOut(1000);
    });
});