PHP Classes

File: bootstrap/js/gridline.js

Recommend this page to a friend!
  Classes of Minh Tien   Noblesse CMS   bootstrap/js/gridline.js   Download  
File: bootstrap/js/gridline.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Noblesse CMS
Content management system with custom plugins
Author: By
Last change:
Date: 8 years ago
Size: 6,988 bytes
 

Contents

Class file image Download
/** * Gridline * * Designed to generate CSS on the fly that sets up a responsive grid system of any size * for use with Twitter Bootstrap 3. */ // Make a style sheet element and append it after other style sheets in the `<head>` section. function gMakeSheet(mediaAttribute) { var style = document.createElement("style"); if(mediaAttribute !== undefined && mediaAttribute !== null) { style.setAttribute("media", mediaAttribute); } style.appendChild(document.createTextNode("")); document.head.appendChild(style); return style.sheet; } // Add rules to any number of sheets. function gAddStyleToSheet(s, selector, rules, index) { if(s == 'all' || s === null) { s = [sheet, smSheet, mdSheet, lgSheet]; } else { if(s.cssRules !== undefined) { s = [s]; } } for(var i in s) { if(s[i].insertRule) { s[i].insertRule(selector + "{" + rules + "}", index); } else { s[i].addRule(selector, rules, index); } } } // Mobile first (or "xs") var sheet = gMakeSheet(); var xsSheet = sheet; var smSheet = gMakeSheet('only screen and (min-width: 768px)'); var mdSheet = gMakeSheet('only screen and (min-width: 992px)'); var lgSheet = gMakeSheet('only screen and (min-width: 1200px)'); // Twitter Bootstrap default gutter gAddStyleToSheet(null, "[class*='col-']", "padding-left:15px;padding-right:15px;"); // For flush rows (text edge to edge) gAddStyleToSheet(null, ".flush-row [class*='col-']:first-of-type", "padding-left:0 !important;"); gAddStyleToSheet(null, ".flush-row [class*='col-']:last-of-type", "padding-right:0 !important;"); /** * The same classes are used and the grid size can be adjusted via data attributes. * Gutter width can as well. * * Example: * <div class="row" data-columns="16" data-gutter-width="10"> * <div class="col-md-6"></div> * <div class="col-md-6"></div> * <div class="col-md-6"></div> * </div> * * The JavaScript will detect elements wrapped in these data attributes and adjust only the columns within that element. * Do all this on DOM ready. */ $(document).ready(function() { var columnSets = {}; $(".row[data-columns]").each(function() { var cols = $(this).data('columns'); $(this).addClass('cols-' + cols); if(columnSets['cols-' + cols] === undefined) { columnSets['cols-' + cols] = ''; for(var c=1; c <= cols; c++) { var widthP = (c / cols) * 100; gAddStyleToSheet(lgSheet, ".cols-" + cols + " .col-lg-" + c, "width: " + widthP + "%; float:left;"); gAddStyleToSheet(mdSheet, ".cols-" + cols + " .col-md-" + c, "width: " + widthP + "%; float:left;"); gAddStyleToSheet(smSheet, ".cols-" + cols + " .col-sm-" + c, "width: " + widthP + "%; float:left;"); gAddStyleToSheet(xsSheet, ".cols-" + cols + " .col-xs-" + c, "width: " + widthP + "%; float:left;"); gAddStyleToSheet(lgSheet, ".cols-" + cols + " .col-lg-push-" + c, "left: " + widthP + "%;"); gAddStyleToSheet(mdSheet, ".cols-" + cols + " .col-md-push-" + c, "left: " + widthP + "%;"); gAddStyleToSheet(smSheet, ".cols-" + cols + " .col-sm-push-" + c, "left: " + widthP + "%;"); gAddStyleToSheet(xsSheet, ".cols-" + cols + " .col-xs-push-" + c, "left: " + widthP + "%;"); gAddStyleToSheet(lgSheet, ".cols-" + cols + " .col-lg-pull-" + c, "right: " + widthP + "%;"); gAddStyleToSheet(mdSheet, ".cols-" + cols + " .col-md-pull-" + c, "right: " + widthP + "%;"); gAddStyleToSheet(smSheet, ".cols-" + cols + " .col-sm-pull-" + c, "right: " + widthP + "%;"); gAddStyleToSheet(xsSheet, ".cols-" + cols + " .col-xs-pull-" + c, "right: " + widthP + "%;"); } } }); var gutterSets = {}; $(".row[data-gutter-width]").each(function() { var gutterWidth = $(this).data('gutter-width'); $(this).addClass('gutter-width-' + gutterWidth); var gutterScaling = $(this).data('gutter-scaling'); gutterScaling = (gutterScaling === undefined) ? true:gutterScaling; gutterScaling = (gutterScaling == 'no' || gutterScaling == 'false' || gutterScaling == '0' || gutterScaling === 0) ? false:true; if(gutterScaling) { $(this).addClass('gutter-scaled-width-' + gutterWidth); } var flushRow = $(this).data('flush-row'); flushRow = (flushRow == 'yes' || flushRow == 'true' || flushRow == '1' || flushRow === 1) ? true:false; if(flushRow) { $(this).addClass('flush-row'); } if(gutterSets['gutter-width-' + gutterWidth] === undefined) { gutterSets['gutter-width-' + gutterWidth] = ''; var halfGutter = Math.floor(gutterWidth / 2); gAddStyleToSheet(lgSheet, ".gutter-width-" + gutterWidth + " [class*='col-lg-']", "position: relative; min-height: 1px; padding-left: " + halfGutter + "px; padding-right: " + halfGutter + "px;"); gAddStyleToSheet(mdSheet, ".gutter-width-" + gutterWidth + " [class*='col-md-']", "position: relative; min-height: 1px; padding-left: " + halfGutter + "px; padding-right: " + halfGutter + "px;"); gAddStyleToSheet(smSheet, ".gutter-width-" + gutterWidth + " [class*='col-sm-']", "position: relative; min-height: 1px; padding-left: " + halfGutter + "px; padding-right: " + halfGutter + "px;"); gAddStyleToSheet(xsSheet, ".gutter-width-" + gutterWidth + " [class*='col-xs-']", "position: relative; min-height: 1px; padding-left: " + halfGutter + "px; padding-right: " + halfGutter + "px;"); // Gutters should be smaller on smaller devices to be more proportionate...though this can be disabled with the `gutter-scaling` data attribute. var quarterGutter = Math.floor(gutterWidth / 4); gAddStyleToSheet(xsSheet, ".gutter-scaled-width-" + gutterWidth + " [class*='col-xs-']", "position: relative; min-height: 1px; padding-left: " + quarterGutter + "px !important; padding-right: " + quarterGutter + "px !important;"); gAddStyleToSheet(smSheet, ".gutter-scaled-width-" + gutterWidth + " [class*='col-sm-']", "position: relative; min-height: 1px; padding-left: " + quarterGutter + "px !important; padding-right: " + quarterGutter + "px !important;"); // These are still going to be normal size... gAddStyleToSheet(mdSheet, ".gutter-scaled-width-" + gutterWidth + " [class*='col-md-']", "position: relative; min-height: 1px; padding-left: " + halfGutter + "px !important; padding-right: " + halfGutter + "px !important;"); gAddStyleToSheet(lgSheet, ".gutter-scaled-width-" + gutterWidth + " [class*='col-lg-']", "position: relative; min-height: 1px; padding-left: " + halfGutter + "px !important; padding-right: " + halfGutter + "px !important;"); } }); });