Skip to content
This repository has been archived by the owner. It is now read-only.

Commit 82da7dd

Browse files
justinhartmanjustinhartman
committed
Grid template completed.
1 parent dde596b commit 82da7dd

File tree

3 files changed

+150
-120
lines changed

3 files changed

+150
-120
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
########################
2626
# Add any files or folders below that you would like ignored.
2727
bootstrap/examples/
28+
tests/
2829

2930

3031
######################

‎_generator.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,10 @@ generator.applyToOutputNode = function(outputFolderNode, inputFolderNode) {
6464
}
6565
};
6666

67-
addVendorScript(vendorScriptMap.bootstrap);
68-
addVendorScript(vendorScriptMap.jquery);
67+
if (config.base !== 'grid') {
68+
addVendorScript(vendorScriptMap.bootstrap);
69+
addVendorScript(vendorScriptMap.jquery);
70+
}
6971

7072
if (config.base === 'starter' || config.base === 'jumbotron') {
7173
addVendorScript(vendorScriptMap.popper);

‎templates/grid/index.html‎

Lines changed: 145 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,162 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
3+
4+
<head>
45
<meta charset="utf-8">
6+
<title>Grid Template for Bootstrap</title>
7+
58
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
69
<meta name="description" content="">
710
<meta name="author" content="">
8-
<link rel="icon" href="../../../../favicon.ico">
9-
10-
<title>Grid Template for Bootstrap</title>
11+
<link rel="icon" href="favicon.ico">
12+
<link rel="manifest" href="manifest.json"> <!-- For Android Devices -->
13+
<meta name="msapplication-config" content="browserconfig.xml"> <!-- For Windows and Microsoft Mobile -->
14+
<link rel="apple-touch-icon" href="img/favicons/apple-touch-icon.png"> <!-- For Apple iOS -->
15+
<link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="#563d7c"> <!-- For Safari -->
16+
<!-- @if @ieTags -->
17+
<!-- @stylesheet browser-upgrade -->
18+
<!-- @end if -->
1119

1220
<!-- Bootstrap core CSS -->
13-
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
21+
<!-- @stylesheet bootstrap.min -->
1422

15-
<!-- Custom styles for this template -->
16-
<link href="grid.css" rel="stylesheet">
17-
</head>
23+
<!-- Add custom styles here -->
24+
<!-- @stylesheet styles -->
1825

19-
<body>
26+
<!-- Custom styles for this template -->
27+
<!-- @stylesheet grid -->
28+
</head>
29+
30+
<body>
31+
<!-- @if @ieTags -->
32+
<!--[if lte IE 9]>
33+
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
34+
<![endif]-->
35+
<!-- @end if -->
2036
<div class="container">
2137

22-
<h1>Bootstrap grid examples</h1>
23-
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
24-
25-
<h2>Five grid tiers</h2>
26-
<p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
27-
28-
<div class="row">
29-
<div class="col-4">.col-4</div>
30-
<div class="col-4">.col-4</div>
31-
<div class="col-4">.col-4</div>
32-
</div>
33-
34-
<div class="row">
35-
<div class="col-sm-4">.col-sm-4</div>
36-
<div class="col-sm-4">.col-sm-4</div>
37-
<div class="col-sm-4">.col-sm-4</div>
38-
</div>
39-
40-
<div class="row">
41-
<div class="col-md-4">.col-md-4</div>
42-
<div class="col-md-4">.col-md-4</div>
43-
<div class="col-md-4">.col-md-4</div>
44-
</div>
45-
46-
<div class="row">
47-
<div class="col-lg-4">.col-lg-4</div>
48-
<div class="col-lg-4">.col-lg-4</div>
49-
<div class="col-lg-4">.col-lg-4</div>
50-
</div>
51-
52-
<div class="row">
53-
<div class="col-xl-4">.col-xl-4</div>
54-
<div class="col-xl-4">.col-xl-4</div>
55-
<div class="col-xl-4">.col-xl-4</div>
56-
</div>
57-
58-
<h2>Three equal columns</h2>
59-
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
60-
<div class="row">
61-
<div class="col-md-4">.col-md-4</div>
62-
<div class="col-md-4">.col-md-4</div>
63-
<div class="col-md-4">.col-md-4</div>
64-
</div>
65-
66-
<h2>Three unequal columns</h2>
67-
<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
68-
<div class="row">
69-
<div class="col-md-3">.col-md-3</div>
70-
<div class="col-md-6">.col-md-6</div>
71-
<div class="col-md-3">.col-md-3</div>
72-
</div>
73-
74-
<h2>Two columns</h2>
75-
<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
76-
<div class="row">
77-
<div class="col-md-8">.col-md-8</div>
78-
<div class="col-md-4">.col-md-4</div>
79-
</div>
80-
81-
<h2>Full width, single column</h2>
82-
<p class="text-warning">No grid classes are necessary for full-width elements.</p>
83-
84-
<hr>
85-
86-
<h2>Two columns with two nested columns</h2>
87-
<p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
88-
<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
89-
<div class="row">
90-
<div class="col-md-8">
91-
.col-md-8
92-
<div class="row">
93-
<div class="col-md-6">.col-md-6</div>
38+
<h1>Bootstrap grid examples</h1>
39+
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
40+
41+
<h2>Five grid tiers</h2>
42+
<p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
43+
44+
<div class="row">
45+
<div class="col-4">.col-4</div>
46+
<div class="col-4">.col-4</div>
47+
<div class="col-4">.col-4</div>
48+
</div>
49+
50+
<div class="row">
51+
<div class="col-sm-4">.col-sm-4</div>
52+
<div class="col-sm-4">.col-sm-4</div>
53+
<div class="col-sm-4">.col-sm-4</div>
54+
</div>
55+
56+
<div class="row">
57+
<div class="col-md-4">.col-md-4</div>
58+
<div class="col-md-4">.col-md-4</div>
59+
<div class="col-md-4">.col-md-4</div>
60+
</div>
61+
62+
<div class="row">
63+
<div class="col-lg-4">.col-lg-4</div>
64+
<div class="col-lg-4">.col-lg-4</div>
65+
<div class="col-lg-4">.col-lg-4</div>
66+
</div>
67+
68+
<div class="row">
69+
<div class="col-xl-4">.col-xl-4</div>
70+
<div class="col-xl-4">.col-xl-4</div>
71+
<div class="col-xl-4">.col-xl-4</div>
72+
</div>
73+
74+
<h2>Three equal columns</h2>
75+
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
76+
<div class="row">
77+
<div class="col-md-4">.col-md-4</div>
78+
<div class="col-md-4">.col-md-4</div>
79+
<div class="col-md-4">.col-md-4</div>
80+
</div>
81+
82+
<h2>Three unequal columns</h2>
83+
<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter
84+
the viewport.</p>
85+
<div class="row">
86+
<div class="col-md-3">.col-md-3</div>
9487
<div class="col-md-6">.col-md-6</div>
95-
</div>
88+
<div class="col-md-3">.col-md-3</div>
89+
</div>
90+
91+
<h2>Two columns</h2>
92+
<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
93+
<div class="row">
94+
<div class="col-md-8">.col-md-8</div>
95+
<div class="col-md-4">.col-md-4</div>
96+
</div>
97+
98+
<h2>Full width, single column</h2>
99+
<p class="text-warning">No grid classes are necessary for full-width elements.</p>
100+
101+
<hr>
102+
103+
<h2>Two columns with two nested columns</h2>
104+
<p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger
105+
column.</p>
106+
<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
107+
<div class="row">
108+
<div class="col-md-8">
109+
.col-md-8
110+
<div class="row">
111+
<div class="col-md-6">.col-md-6</div>
112+
<div class="col-md-6">.col-md-6</div>
113+
</div>
114+
</div>
115+
<div class="col-md-4">.col-md-4</div>
116+
</div>
117+
118+
<hr>
119+
120+
<h2>Mixed: mobile and desktop</h2>
121+
<p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
122+
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
123+
<div class="row">
124+
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
125+
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
126+
</div>
127+
<div class="row">
128+
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
129+
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
130+
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
131+
</div>
132+
<div class="row">
133+
<div class="col-6">.col-6</div>
134+
<div class="col-6">.col-6</div>
135+
</div>
136+
137+
<hr>
138+
139+
<h2>Mixed: mobile, tablet, and desktop</h2>
140+
<p></p>
141+
<div class="row">
142+
<div class="col-12 col-sm-6 col-lg-8">.col-12 .col-sm-6 .col-lg-8</div>
143+
<div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
144+
</div>
145+
<div class="row">
146+
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
147+
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
148+
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
96149
</div>
97-
<div class="col-md-4">.col-md-4</div>
98-
</div>
99-
100-
<hr>
101-
102-
<h2>Mixed: mobile and desktop</h2>
103-
<p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
104-
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
105-
<div class="row">
106-
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
107-
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
108-
</div>
109-
<div class="row">
110-
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
111-
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
112-
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
113-
</div>
114-
<div class="row">
115-
<div class="col-6">.col-6</div>
116-
<div class="col-6">.col-6</div>
117-
</div>
118-
119-
<hr>
120-
121-
<h2>Mixed: mobile, tablet, and desktop</h2>
122-
<p></p>
123-
<div class="row">
124-
<div class="col-12 col-sm-6 col-lg-8">.col-12 .col-sm-6 .col-lg-8</div>
125-
<div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
126-
</div>
127-
<div class="row">
128-
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
129-
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
130-
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
131-
</div>
132150

133151
</div> <!-- /container -->
134-
</body>
152+
<!-- @if @googleAnalytics -->
153+
<!-- @if @googleAnalyticsSiteID --><!-- Google Analytics --><!-- @else --><!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. --><!-- @end if-->
154+
<script>
155+
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
156+
ga('create', '<!-- @googleAnalyticsSiteID | UA-XXXXX-X -->', 'auto'); ga('send', 'pageview')
157+
</script>
158+
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
159+
<!-- @end if -->
160+
</body>
161+
135162
</html>

0 commit comments

Comments
 (0)