Bootstrap Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by veloper

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container">
    <br />
    <div class="modal">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Select a Rewrite Reason...</h3>
      </div>
      <div class="modal-body">
          <div class="cats btn-group" data-toggle="buttons-radio">
              <button class="btn btn-large cat-branding">
                  <i class="icon-tag"></i> Branding
              </button> 
              <button href="#" class="btn btn-large cat-quality">
                  <i class="icon-file"></i> Quality
              </button> 
              <button href="#" class="btn btn-large cat-placement">
                  <i class="icon-screenshot"></i> Placement
              </button>
              <button href="#" class="btn btn-large cat-other">
                  <i class="icon-comment"></i> <em>Other...</em>
              </button>               
          </div>
          <ul class="reasons nav nav-tabs nav-stacked" style="display:none">
              <li class="branding"><a href="">Voice<div>This is an optional caption that can be used to give examples or more.</div></a></li>
              <li class="branding"><a href="">Styleguide Misalignment</a></li>
              <li class="branding"><a href="">Legal / Regulatory<div>Don't break the law, it's wrong.</div></a></li>
              
              <li class="quality"><a href="">Cohesiveness</a></li>
              <li class="quality"><a href="">Structure / Formatting </a></li>
              <li class="quality"><a href="">Inaccurate / Incomplete</a></li>
              <li class="quality"><a href="">Spelling / Grammer / Typos</a></li>
              <li class="quality"><a href="">Overly Complex or Simplistic</a></li>
              
              <li class="placement"><a href="">Anchor / Link Text</a></li>
              <li...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}
.btn-group {
}
.btn-group button {
    width:25%;
    display:none;
}
.btn-group button img {margin-bottom:5px}
div.comment { margin:15px 15px 0 0}
div.comment textarea {width:100%;height:22px}
ul.reasons {
  margin-top:15px
}
ul.reasons li a {padding:3px 7px}
ul.reasons li.active a {background-color:#08C; color:white; font-weight:bold;}
ul.reasons li.active a:hover {background-color:#08C; color:white}

ul.reasons li a div {color:#414141 !important; font-style: italic;font-size:.9em;display:block;}
ul.reasons li a:hover div {color:black !important; font-style: italic;font-size:.9em;display:block;}
ul.reasons li.active a div {color:white !important; display:block}

JavaScript

$(function() {
    var buttons = [];
    $('.cats button').each(function(){
        var btn = $(this);
        var cat = btn.attr('class').match(/cat\-[a-z]+/)[0].replace('cat-','');
        if(cat == 'other' || $('.reasons li.' + cat).size()) {
            buttons.push(btn.show());
        } else {
            btn.remove();    
        }
    });
    var button_ct = buttons.length;
    var button_width = Math.round(100 / button_ct);
    var remainder = 100 - button_width * button_ct;
    $(buttons).each(function(i){
        var btn = $(this);
        var cat = btn.attr('class').match(/cat\-[a-z]+/)[0].replace('cat-','');
        var width = (i == button_ct-1) ? button_width + remainder : button_width;
        btn.css({width: width + "%"});    
    });
    
    $('textarea').focus(function(){$(this).animate({height:'75px'});});
    $('textarea').blur(function(){
        if($(this).val().length <= 0) {
            $(this).animate({height:'22px'}, 100);
        }
    });
    $('.cats button').click(function(){
        var button = $(this);
        var reasons = $('.reasons');
        var textarea = $('textarea');
        var category = button.attr('class').match(/cat\-[a-z]+/)[0].replace('cat-','');
        
        $('li', reasons).removeClass('active');
        $('li:not(.' + category + ')', reasons).hide('fade');
        var shown_reasons = $('li.' + category, reasons).show(reasons.is(':visible') ? "fade" : null);
        var shown_reason_btns = $('a', shown_reasons);
        shown_reason_btns.css({"border-radius":"0"});
        shown_reason_btns.first().css({"border-radius":"5px 5px 0 0"});
        shown_reason_btns.last().css({"border-radius":"0 0 5px 5px"});
        if(shown_reason_btns.length == 1) {
            shown_reason_btns.css({"border-radius":"5px"});
        }
        
        if(category == "other") {
            reasons.slideUp();
            textarea.focus();
        } else {
            reasons.slideDown();
        }
    });
    $('.reasons...