Bootstrap Grid Visualized

Bootstrap Grid Visualized.markdown

Bootstrap Grid Visualized

A Pen by Anton Vynogradenko on CodePen.

License.

index.html

html
  body
    #to-clone.floating-name.hidden <!-- used to clone with jQuery-->
    .container
      .spacer
      .row
        .col-sm-4
        .col-sm-8.green
      .spacer.text-center
      .row
        .col-sm-4
          .row 
            .col-sm-1
            .col-sm-1
        .col-sm-4.green

script.js

$(() => {
  var $floatingNameDiv = $('#to-clone')
    .clone()
    .removeAttr('id')
    .removeClass('hidden')
    .addClass('floating-name');  
  var regexToGetColNum = /col-\w\w-(\d\d?)/;
  
  $('[class^="col-"]').each((index, el) => {
    var $el = $(el);
    var colNum = $el.attr('class').match(regexToGetColNum)[1];
    var $nameDiv = $floatingNameDiv.clone().append(colNum);
    $el.append(' ');
    $el.append($nameDiv);
    
    var hasChildren = ($el.find('[class^="col-"]').length > 0);

    if (hasChildren) {
      $el.addClass('bg-pink-faded');    
    } else {
      $el.addClass('bg-pink');    
    }

  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$bg-color: lighten(grey, 40%);
$col-color: lightpink;

.bg-pink {
  background-color: $col-color;
}

.bg-pink-faded {
  background-color: rgba($col-color, 0.5);
}

 .container {
  background: $bg-color;
} 

.spacer {
  height: 30px;
  margin-left: -15px;
  margin-right: -15px;
  background: $bg-color;
}

[class^="col-"] {
  border: 1px solid $bg-color;
}

.floating-name {
  position: absolute;
  left:0px;
  top: 10%;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 50%;
  margin-right: 50%;
  z-index: 100;
  font-size: 12px;
}

.pink { background-color: lightpink;}
.green {background-color: mediumaquamarine;}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />