-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathbootstrap-flexible-grid.js
135 lines (118 loc) · 7.31 KB
/
bootstrap-flexible-grid.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
/**
*
* 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.push('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 + "%;");
gAddStyleToSheet(lgSheet, ".cols-" + cols + " > .col-lg-offset-" + c, "margin-left: " + widthP + "%;");
gAddStyleToSheet(lgSheet, ".cols-" + cols + " > .col-md-offset-" + c, "margin-left: " + widthP + "%;");
gAddStyleToSheet(lgSheet, ".cols-" + cols + " > .col-sm-offset-" + c, "margin-left: " + widthP + "%;");
gAddStyleToSheet(lgSheet, ".cols-" + cols + " > .col-xs-offset-" + c, "margin-left: " + 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.push('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;");
}
});
});