Grid Panels

by tonytlwu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="proto-holder">
  <div class="settings">

    <div>
      <p>How many items per row do you want for each device size?</p>
      <div class="form-group">
        <label for="exampleInputName2">Small phones <small>(&lt; 360px)</small></label>
        <select class="form-control" id="sm-devcices">
          <option value="sm-grid-1">One</option>
          <option value="sm-grid-2" selected>Two (Recommended)</option>
          <option value="sm-grid-3">Three</option>
        </select>
      </div>
      <div class="form-group">
        <label for="exampleInputName2">Large phones/small tablets <small>(&gt;= 360px)</small></label>
        <select class="form-control" id="md-devcices">
          <option value="md-grid-2">Two</option>
          <option value="md-grid-3" selected>Three (Recommended)</option>
          <option value="md-grid-4">Four</option>
        </select>
      </div>
      <div class="form-group">
        <label for="exampleInputName2">Large tablets <small>(&gt;= 768px)</small></label>
        <select class="form-control" id="lg-devcices">
          <option value="lg-grid-3">Three</option>
          <option value="lg-grid-4" selected>Four (Recommended)</option>
          <option value="lg-grid-5">Five</option>
        </select>
      </div>
      <p>How much space should each image occupy?</p>
      <div class="form-group">
        <label for="exampleInputName2">Width</label>
        <select class="form-control" id="width-panels">
          <option value="image-100">100%</option>
          <option value="image-90" selected>90%</option>
          <option value="image-80">80%</option>
          <option value="image-70">70%</option>
          <option value="image-60">60%</option>
        </select>
      </div>
    </div>

  </div>
  <div class="output">

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12">
 ...

CSS

html, body {
  height: 100%;
}

.proto-holder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}

.settings {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #f2f6f7;
  overflow: auto;
  width: 30%;
  padding: 15px;
  height: 100%;
}

.output {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 70%;
  height: 100%;
  overflow: auto;
}

.form-inline {
  margin-top: 15px;
}

img {
  max-width: 100%;
  height: auto;
}

@media screen and (min-width: 640px) {
  .container-fluid {
    padding: 0 12.5%;
  }
}

/* STATIC GRID CSS */

.grid-holder ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.grid-holder .grid-panel-holder {
  margin-bottom: 15px;
}

.grid-panel {
  height: 100%;
  overflow: hidden;
}

.image-100 {
  width: 100%;
}

.image-90 {
  width: 90%;
}

.image-80 {
  width: 80%;
}

.image-70 {
  width: 70%;
}

.image-60 {
  width: 60%;
}

.grid-panel-body {
  -ms-word-break: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  padding: 5px 10px 10px;
  text-align: center;
}

.grid-panel-image {
  margin: 0 auto;
}

.grid-panel-body .grid-panel-title {
  margin-bottom: 4px;
}

.grid-holder.sm-grid-1 .grid-panel-holder {
  width: 100%;
}

.grid-holder.sm-grid-2 .grid-panel-holder {
  width: 50%;
}

.grid-holder.sm-grid-3 .grid-panel-holder {
  width: 33.33%;
}

@media screen and (min-width: 360px) {
  .grid-holder.md-grid-2 .grid-panel-holder {
    width: 50%;
  }
  .grid-holder.md-grid-3 .grid-panel-holder {
    width: 33.33%;
  }
  .grid-holder.md-grid-4 .grid-panel-holder {
    width: 25%;
  }
}

@media screen and (min-width: 768px) {
  .grid-holder.lg-grid-3 .grid-panel-holder {
    width: 33.33%;
  }
  .grid-holder.lg-grid-4 .grid-panel-holder {
    width: 25%;
  }
  .grid-holder.lg-grid-5 .grid-panel-holder {
    width: 20%;
  }
}

JavaScript

// TECH SPEC HERE: https://docs.google.com/document/d/17QgO46jIQPRzxPz0W2IKhEH6-t3EDGfIH1ApLC3GeMo/edit

function init() {
  var widthPanels = $('#width-panels').val();
  var smDevices = $('#sm-devcices').val();
  var mdDevices = $('#md-devcices').val();
  var lgDevices = $('#lg-devcices').val();

  $('.grid-panel-image').addClass(widthPanels);
  $('.grid-holder').addClass(smDevices + " " + mdDevices + " " + lgDevices);
}

function changeColumns(small, medium, large) {
  $('.grid-holder').attr('class', 'grid-holder');
  $('.grid-holder').addClass(small + " " + medium + " " + large);
}

$('#width-panels').on('change', function() {
  var value = $(this).val();
  $('.grid-panel-image').attr('class', 'grid-panel-image');
  $('.grid-panel-image').addClass(value);
});

$('#sm-devcices, #md-devcices, #lg-devcices').on('change', function() {
  var smDevices = $('#sm-devcices').val();
  var mdDevices = $('#md-devcices').val();
  var lgDevices = $('#lg-devcices').val();

  changeColumns(smDevices, mdDevices, lgDevices);
});

init();