-
Notifications
You must be signed in to change notification settings - Fork 2
/
rolltopsack.html
385 lines (339 loc) · 18.8 KB
/
rolltopsack.html
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>LearnMYOG Roll Top Stuff Sack</title>
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="images/site.webmanifest">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="Learn to Make Your Own Gear (MYOG). Sewing patterns and tutorials for outdoor adventurers."></head>
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<script defer src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script defer src="assets/js/colorswitcher.js"></script>
<script defer src="assets/js/header.js" type="text/javascript"></script>
<script defer src="assets/js/nav.js" type="text/javascript"></script>
<script defer src="assets/js/footer.js" type="text/javascript"></script>
<!-- Global site tag (gtag.js) - Google Analytics GA4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WP4C42S5VW"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-WP4C42S5VW');
</script>
<!-- Global site tag (gtag.js) - Google Analytics GA4 -->
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper" class="divided">
<!-- Banner -->
<header-template></header-template>
<!-- Nav -->
<div class="spotlight-color invert align-center">
<nav-template></nav-template>
</div>
<!-- Pattern Generator -->
<section class="wrapper style2 align-center">
<div id="main" class="inner">
<header>
<h2>Roll Top Stuff Sack Pattern Generator</h2>
<p></p>
</header>
<div class="gallery style1 small">
<article>
<a href="images\rolltopsack\roll.jpg" class="image">
<img src="images\rolltopsack\roll.jpg" title="Roll Top sack dimensions for generator input" />
</a>
</article>
<article>
<a href="images\rolltopsack\rtsample1.jpg" class="image">
<img src="images\rolltopsack\rtsample1.jpg" title="Two Roll Top bags made with this generator" />
</a>
</article>
<article>
<a href="images\rolltopsack\rtsample2.jpg" class="image">
<img src="images\rolltopsack\rtsample2.jpg" title="Two Roll Top bags made with this generator" />
</a>
</article>
</div>
<div class="index align-left">
<section>
<header>
<h3>Pattern Generator</h3>
</header>
<div class="content">
<p>Create custom-sized Roll Top Stuff Sacks effortlessly without complex calculations or 3D modeling. Simply input your desired finished 3D stuff sack dimensions, and our generator will calculate precise 2D pattern panels. Say goodbye to fabric waste and guesswork, especially if it's your first MYOG (Make Your Own Gear) project!!
</p>
<form method="post" action="#">
<div class="fields">
<!-- Set Units -->
<div class="field third">
<label>Pattern Units</label>
</div>
<div class="field third">
<input type="radio" name="units" class="dimension" id="imperial" value="0" checked>
<label for="imperial">Inches (in)</label>
</div>
<div class="field third">
<input type="radio" name="units" class="dimension" id="metric" value="1">
<label for="metric">Centimeters (cm)</label>
</div>
<!-- Set Dimensions -->
<div class="field third">
<label for="bottomLength">Bottom Length</label>
<input type="number" name="bottomLength" class="dimension" id="bottomLength" min="1" value="" />
</div>
<div class="field third">
<label for="bottomWidth">Bottom Width</label>
<input type="number" name="bottomWidth" class="dimension" id="bottomWidth" min="1" value="" />
</div>
<div class="field third">
<label for="height">Height when Rolled</label>
<input type="number" name="height" class="dimension" id="height" min="1" value="" />
</div>
</div>
<!-- Button used for tab and force change -->
<div class="actions small">
<button class="button small" type="button">Generate</button>
</div>
</form>
<span class="image right"><img src="images\rolltopsack\roll1.jpg" alt="stuff sack pattern" /></span>
<p>Our provided panel dimensions already include the seam allowances. The finished Roll Top collar measures 4.5 inches (12 cm) tall allowing ample room to close the bag. You can extend the collar height by simply adding or subtracting to Body Panel Height.</p>
<ul class="alt">
<li><strong>Body Panel Length: <span class="patternLength"></span></strong></li>
<li><strong>Body Panel Height: <span class="patternHeight"></span></strong></li>
</ul>
</p>
</div>
</section>
</div>
</div>
</section>
<!-- stuff sack instructions -->
<section id="stuffSackIstructions" class="wrapper style1 align-center">
<div class="inner">
<header>
<h2>Assembly Instructions</h2>
<p>Crafting Confidence: Start Sewing with Ease</p>
</header>
<div class="index align-left">
<section>
<header>
<h3>Materials</h3>
</header>
<div class="content">
<p>For guidance on suitable technical fabrics, recommendations, and trusted vendors, refer to our <a href="fabrics.html">Fabrics Guide</a>. Please note that this is a beginner-friendly project, and it is intended for non-fray technical fabrics for a water-resistant bag.
</p>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Materials</th>
<th>Links</th>
</tr>
</thead>
<tr>
<td>Medium-weight Coated Pack Fabric such as<br>HyperD 300, 2.2oz Hex 70, or 100D Robic Nylon</td>
<td><a href="https://ripstopbytheroll.com/collections/waterproof-nylon-fabric?rfsn=4608557.2d546b9" target="_blank"><img class="partner icon" src="/images/shared/partners/48/rbtr.png" alt="Ripstop by the Roll logo"></a></td>
</tr>
<tr>
<td>Nylon Flat Webbing, 3/4" (20mm) wide</td>
<td><a href="https://ripstopbytheroll.com/collections/webbing/products/1-nylon-webbing-black?rfsn=4608557.2d546b9" target="_blank"><img class="partner icon" src="/images/shared/partners/48/rbtr.png" alt="Ripstop by the Roll logo"></a></td>
</tr>
<tr>
<td>Side Release Buckle, 3/4" (20mm)</td>
<td><a href="https://ripstopbytheroll.com/collections/plastic-buckles/products/kross-buckle?rfsn=4608557.2d546b9" target="_blank"><img class="partner icon" src="/images/shared/partners/48/rbtr.png" alt="Ripstop by the Roll logo"></a></td>
</tr>
<tr>
<td>Grosgrain Ribbon<br>1/2"-3/4" (13-20mm) wide</td>
<td><a href="https://ripstopbytheroll.com/collections/grosgrain-ribbon/products/mil-spec-nylon-grosgrain-ribbon?rfsn=4608557.2d546b9" target="_blank"><img class="partner icon" src="/images/shared/partners/48/rbtr.png" alt="Ripstop by the Roll logo"></a></td>
</tr>
<tr>
<td>Polyester Thread such as<br>Gutermann Sew-All or Gutermann MARA 70</td>
<td><a href="https://ripstopbytheroll.com/collections/thread-tools-repair/products/gutermann-mara-70?rfsn=4608557.2d546b9" target="_blank"><img class="partner icon" src="/images/shared/partners/48/rbtr.png" alt="Ripstop by the Roll logo"></a></td>
</tr>
<tr>
<td>Machine Needles such as<br>Schmetz Universal or Microtex size 90/14</td>
<td><a href="https://ripstopbytheroll.com/collections/thread-tools-repair/products/schmetz-universal-machine-needle?rfsn=4608557.2d546b9" target="_blank"><img class="partner icon" src="/images/shared/partners/48/rbtr.png" alt="Ripstop by the Roll logo"></a></td>
</tr>
</table>
</div>
<p class="disclosure">Qualified purchases support LearnMYOG.com at no additional cost to you. See <a href="/about.html#disclosures">Disclosures</a> for more information.</p>
</div>
</section>
<section class="spotlight style1 content-align-center">
<div class="content">
<h3>Ultimate Beginner Guide</h3>
<p>From Day 1 to Gear Making Guru <br>
Detailed MYOG Guide and Essential Tools</p>
<a href="/zerotohero.html" class="button primary"><span class="icon solid fa-forward"></span> Zero to Hero Guide</a>
</div>
<div class="image">
<img src="images/index/zero2hero.jpg" alt="sewist" />
</div>
</section>
<section>
<header>
<h3>Body Panel</h3>
</header>
<div class="content">
<span class="image right">
<img src="images/rolltopsack/roll2.jpg" alt="Body panel markings"/>
</span>
<p>For durable, finished French seams, <strong><span class="sA">Based on units selected</span></strong> seam allowances are included in the pattern dimensions. Not seeing measurements? Generate pattern dimensions above.</p>
<ol>
<ol>
<li>Cut one Body Panel from your fabric.<br> <strong>Length: <span class="patternLength"></span></strong> and <strong>Height: <span class="patternHeight"></span></strong></li>
<li>On the wrong side, mark the mid point of Body Panel along the bottom edge.<br> 📌 Lightly fold the fabric panel in half to quickly find the midpoint.</li>
<li>Parallel the top edge, measure down and mark the <strong><span class="hem"></span></strong> hem line.</li>
</ol>
<p>To enhance clarity, we use light grey to represent the wrong side of the fabric and white to depict the right side in the illustrations. The <span style="color:red">red</span> dashed line illustrates the seam being sewn.</p>
</div>
</section>
<section>
<header>
<h3>Roll Top Collar</h3>
</header>
<div class="content">
<span class="image right"><img src="images/rolltopsack/rollhem.jpg" alt="Roll Top collar prep"/><img src="images/rolltopsack/rollwebbing.jpg" alt="Roll Top collar prep"/>
</span>
<ol>
<li>Fold down the top edge to the wrong side along the marked line. Finger press to crease.</li>
<li>Fold the free end into the crease, forming a 3/4" (20cm) wide double folded hem. The raw edge should now be fully enclosed within the double fold. </li>
<li>Sew the inner edge of the hem at 1/8" (3mm).</li>
<li>On the right side of Body Panel fabric, find the midpoint of the hem.</li>
<li>Cut one <strong><span class="webbingLength">long</span></strong> piece of 3/4" (20mm) webbing.</li>
<li>Center align webbing on top of hem. Clip in place at midpoint.</li>
<li>Arrange buckle hardware and fold webbing under itself on both ends. Clip to temporarily secure. 📌 Double check your hardware orientation is right side facing outwards!</li>
<li>Ensure there is atleast <strong><span class="halfTop">half</span></strong> of webbing between the buckle hardware, centered about the mid point of hem.</li>
<li>Sew the webbing to the hem by stitching two rows 1/8" (3mm) from the edges of the webbing.</li>
<li>Reinforce the webbing near the buckle hardware with a bartack or box stitch. Repeat opposite side.</li>
</ol>
<div class="items style3 medium">
<img src="images/rolltopsack/1 Hem.jpg" title="Step 1 Hem" loading="lazy" />
<img src="images/rolltopsack/1 Buckle.jpg" title="Step 1 Buckle" loading="lazy" />
<img src="images/rolltopsack/1 Webbing.jpg" title="Step 1 Webbing" loading="lazy" />
</div>
</div>
</section>
<section>
<header>
<h3>Side Seam</h3>
</header>
<div class="content">
<span class="image right"><img src="images/rolltopsack/rollside.jpg" alt="Stitch side and bottom"/></span>
<p>A French seam is a sewing technique used to encase raw fabric edges within the seam allowance, resulting in a clean and neat finish on both sides of the fabric. To create a French seam, the fabric pieces are first sewn together with wrong sides touching, using a narrow seam allowance. Then, the fabric is folded along the seam line, enclosing the raw edges, and sewn again with right sides together to create a finished seam on the outside. This technique prevents raw edges from unraveling and adds durability to the seam.</p>
<ol>
<li>Fold the Body Panel in half, right sides out (wrong sides are touching).</li>
<li>Sew the side of Body Panel with a 1/4" (6mm) seam allowance.</li>
<li>Turn the bag right sides together and crease the previous seam. Sew the same edge with a 3/8" (1cm) seam allowance.<br>
👍 Nice, you've sewn a French Seam!</li>
</ol>
<div class="items style3 medium">
<img src="images/rolltopsack/2 Side.jpg" title="Step 2 Side" loading="lazy" />
<img src="images/rolltopsack/2 French.jpg" title="Step 2 French" loading="lazy" />
</div>
</div>
</section>
<section>
<header>
<h3>Bottom Seam</h3>
</header>
<div class="content">
<ol>
<li>Cut a 4" (10cm) piece of grosgrain ribbon.</li>
<li>Turn the bag right side out and align the side seam with the mid point marked along the bottom edge of Body Panel. </li>
<li>Folded in half, slide the raw edges of grosgrain loop between the two layers of Body Panel, only about 3/8" (1cm). The loop is placed at the mid point.</li>
<li>Sew the bottom seam together with a 1/4" (6mm) seam allowance, securing the grosgrain loop as you go.</li>
<li>Turn right sides together and complete the french seam by sewing with a 3/8" (1cm) seam allowance. Reinforce the grosgrain loop as you sew across it.</li>
<li>Melt the exposed raw edges of grosgrain loop to prevent fraying.</li>
</ol>
<img src="images/rolltopsack/rollbottom.jpg" class="image fit" alt="">
<div class="items style3 medium">
<img src="images/rolltopsack/2 Bottom.jpg" title="Step 2 Bottom" loading="lazy" />
<img src="images/rolltopsack/2 Loop.jpg" title="Step 2 Loop" loading="lazy" />
</div>
</div>
</section>
<section>
<header>
<h3>Squaring the Bottom</h3>
</header>
<div class="content">
<span class="image right"></span>
<ol>
<li>Blow a little air into the stuff sack and press the sides inwards to form crisp boxed corners along the bottom seam.</li>
<li>With the bottom seam finger pressed flat and straight, draw two marks from the left side:
<ul style="margin:0;">
<li>1/2 Bottom Width = <strong><span class="halfBottomWidth">input measurements</span></strong></li>
<li>Bottom Length = <strong><span class="bottomLength">input measurements</span></strong></li>
<li>1/2 Bottom Width <strong><span class="halfBottomWidth">input measurements</span></strong> should remain.</li>
</ul>
</li>
<li>At first mark, draw a <strong><span class="bottomWidth">[Bottom Width]</span></strong> line perpendicular and square to bottom seam.</li>
<li>Repeat again at the next mark. The bottom should look like the image.</li>
<li>Stitch along the vertical lines forming the rectangular bottom.</li>
<li>Before trimming off the corners, turn your bag right side out to check for overall symmetry.</li>
<li>Trim the corners off about 3/8" (1cm) from the seam.</li>
<li>To bind the raw fabric edges with grosgrain ribbon, simply fold and align the ribbon along the raw edge, encasing it, and stitch close to the edge to secure it in place. Trim and melt any excess ribbon for a neat finish.</li>
</ol>
<img src="images/rolltopsack/rollbox.jpg" class="image fit" alt="Sew squared corners"/>
<div class="items style3 medium">
<img src="images/rolltopsack/3 Squaring.jpg" title="Step 3 Squaring" loading="lazy" />
<img src="images/rolltopsack/3 Corner.jpg" title="Step 3 Corner" loading="lazy" />
<img src="images/rolltopsack/3 Binding.jpg" title="Step 3 Binding" loading="lazy" />
<img src="images/rolltopsack/3 Bottom.jpg" title="Step 3 Bottom" loading="lazy" />
</div>
</div>
</section>
<section>
<header>
<h3>Finishing Up</h3>
</header>
<div class="content">
<span class="image right"><img src="images/rolltopsack/rtsample2.jpg" alt="two Roll Top bags"/></span>
<ol>
<li>Turn your Roll Top Stuff Sack right side out one final time.</li>
<li>To close you bag, roll down the opening tightly three to four times, then secure it by fastening the plastic buckle.</li>
</ol>
<h4>👏 Congrats on making your own custom Roll Top Storage Bag!</h4>
<p>Your next project is waiting! Time to make a <a href="zpinstructions.html">Zipper Pouch</a>!</p>
</div>
</section>
</div>
</div>
</section>
<!-- Footer -->
<footer-template></footer-template>
</div>
<!-- HTML Template Scripts -->
<script defer src="assets/js/jquery.scrollex.min.js"></script>
<script defer src="assets/js/jquery.scrolly.min.js"></script>
<script defer src="assets/js/jquery.poptrox.min.js"></script>
<script defer src="assets/js/browser.min.js"></script>
<script defer src="assets/js/breakpoints.min.js"></script>
<script defer src="assets/js/util.js"></script>
<script defer src="assets/js/main.js"></script>
<script defer>
window.addEventListener('load', function () {
const pgtitle = document.location.href.match(/[^\/]+$/)[0] //get page name e.g. map.html
try {
document.querySelector(`#nav .links a[href*="${pgtitle}"`).parentElement.classList.add("active");
console.log(pgtitle,"is a nav element. Set active.")
} catch (TypeError) {
console.log(pgtitle,"not a nav element.")
}
}, false);
</script>
<!-- MYOG Pattern Scripts -->
<script defer src="assets/js/rolltopsack.js"></script>
</body>
<!--
Story by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
</html>