CivicIdeas Homepage

playing with the gridster.js plugin

by Pete Fecteau

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://buttonpresser.com/CivicIdeas_BS/js/goog_trans.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<div class="standard-nav navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <div class="nav-collapse" id="main-menu">
                <ul class="nav" id="main-menu-left">
                    <li class="nav-home active"><a href="#">Home</a></li>
                    <li class="nav-ideas"><a href="#">Ideas</a></li>
                    <li class="nav-projects"><a href="#">Projects</a></li>
                    <li class="nav-discussions"><a href="#">Discussions</a></li>
                    <li class="nav-forums"><a href="#">Forums</a></li>
                    <li class="nav-meetings"><a href="#">Meetings</a></li>
                    <li class="nav-surveys"><a href="#">Surveys</a></li>
                </ul>
                <ul class="nav pull-right" id="main-menu-right">
                    <li>
                        <form class="navbar-search pull-left">
                            <input type="text" class="search-query" placeholder="Search" />
                        </form>
                    </li>
                    <li class="dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Ron Swanson <span class="caret"></span></a>
                      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <li><a href="../default">Log Out</a></li>
                        <li class="divider"></li>
                        <li><a href="#" class="open-my-profile">Edit Profile</a></li>
                 ...

SCSS

@import url('https://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/bootstrap-custom.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-nav.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-sidebar.css');
@import url('https://buttonpresser.com/CivicIdeas_BS/css/global-footer.css');
section {
    width:450px;
    float:left;
    margin:0 20px 20px 0;
    background-color:#939598;
    .header {
        background-color:#76777a;
        font-size:17.5px;
        color:#FFF;
        padding:10px;
            &:before {
                content:"";
                display:block;
                float:left;
                height:40px;
                width:40px;
                margin:-10px 10px 0 0;
                background-image:url('http://buttonpresser.com/CivicIdeas_BS/img/simple_header_sprite.png');
                background-repeat:no-repeat;
                background-color:transparent;
            }
            .close-box {
                content:"×";
                height:12px;
                width:12px;
                display: block;
                float:right;
                position: relative;
                top: -7px;
                right:-4px;
                color:#FFF;
                cursor:pointer;
                padding:0;
                line-height:16px;
                opacity:0.6;
                &:hover {opacity:0.8;}
            }
    }
    ul {
        list-style:none;
        margin:0;
        padding:10px;
        li {
            line-height:120%;
            margin-bottom:8px;
            a {
                color:#FFF;
            }
            &:last-child {
                margin:0 -10px 0 10px;
                a{
                    background-color:#76777a;
                    margin:0;
                    padding:5px 10px;
                    width:100%;
                    text-align:right;
                }
      ...

JavaScript

$('.dropdown-toggle').dropdown();
$('.carousel').carousel();
$('.collapse').collapse();

$('.header').each(function() {
  $(this).append('<div class="close-box">&times;</div>');
});
$(function(){
    $('.close-box').click(function() {
        $(this).parent().parent().fadeOut(1000);
    });
});