Skip to content

Instantly share code, notes, and snippets.

@whyisjake

whyisjake/index.html

Created February 7, 2013 20:15
Show Gist options
  • Save whyisjake/4733801 to your computer and use it in GitHub Desktop.
Save whyisjake/4733801 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Jake Spurlock. Bootstrap Tabs - Ideally, what we want here is the thumbnails at the top of the page to change the content at the bottom. I would think that we could follow the same rough structure that bootstrap uses.
Raw
index.html
<div class="container">
<div class="row">
<div class="span12">
<div class="top-steps">
<h3>Step by Step</h3>
<div class="row">
<a data-toggle="tab" id="link-js-step-1" href="#js-step-1">
<div class="span3 tabs"><img src="http://guide-images.makeprojects.org/igi/s6xgE3ei3o6gCDeo" alt="Backyard Graywater&nbsp;System" class="js-target 2271 1" scale="0"><h4 class="red">Step #1</h4></div></a><a data-toggle="tab" id="link-js-step-2" href="#js-step-2"><div class="span3 tabs"><img src="http://guide-images.makeprojects.org/igi/xVNxPE5PGCSuJSmU" alt="Backyard Graywater&nbsp;System" class="js-target 2283 1" scale="0"><h4 class="red">Step #2</h4></div></a><a data-toggle="tab" id="link-js-step-3" href="#js-step-3"><div class="span3 tabs"><img src="http://guide-images.makeprojects.org/igi/rYaoVLisjyavDTvn" alt="Backyard Graywater&nbsp;System" class="js-target 2284 1" scale="0"><h4 class="red">Step #3</h4></div></a><a data-toggle="tab" id="link-js-step-4" href="#js-step-4"><div class="span3 tabs"><img src="http://guide-images.makeprojects.org/igi/vPXyxcGs1QLe2mMA" alt="Backyard Graywater&nbsp;System" class="js-target 2275 1" scale="0"><h4 class="red">Step #4</h4></div></a></div><div class="row"><a data-toggle="tab" id="link-js-step-5" href="#js-step-5"><div class="span3 tabs"><img src="http://guide-images.makeprojects.org/igi/ljFYgEyNtAaBrJl5" alt="Backyard Graywater&nbsp;System" class="js-target 2277 1" scale="0"><h4 class="red">Step #5</h4></div></a></div>
</div>
<div class="bottom-steps">
<div class="row">
<div class="span8">
<div class="tab-content">
<div class="step active tab-pane fade in" id="js-step-1&quot;"><h4 class="clear"><span class="black">Step #1:</span> Install the standpipe and underground drain pipe.</h4><img src="http://guide-images.makeprojects.org/igi/s6xgE3ei3o6gCDeo" alt="Backyard Graywater&nbsp;System" class="2271 1" scale="0"><div class="row smalls"></div><!--.row--><ol><li>My design uses a 2" ABS standpipe that runs down from the washer and connects to a gently sloping horizontal pipe buried under a garden path. At the other end, the water splits and travels a bit farther in 2 directions, then flows out through perforated pots and bark chip mulch, and into the soil beneath some water-loving plants and trees. The area to be watered was 40' away and 10' below the washer.</li><li>First I excavated the path that the underground pipe would follow, making sure that it was deep enough to allow for a downward slope of at least 1/4" per foot. I installed the standpipe behind the washer using pipe straps, and joined it to the underground pipe (as with all joints) using ABS primer and glue. Later, I buried the joint in gravel.</li></ol></div><!--.right_column--><div class="step tab-pane fade" id="js-step-2&quot;"><h4 class="clear"><span class="black">Step #2:</span> Split the line with a double-ell fitting.</h4><img src="http://guide-images.makeprojects.org/igi/xVNxPE5PGCSuJSmU" alt="Backyard Graywater&nbsp;System" class="2283 1" scale="0"><div class="row smalls"></div><!--.row--><ol><li>At the other end of the long underground pipe, I installed a double-ell fitting to split the water into 2 streams feeding different locations. To make sure the water split evenly, I held a torpedo level against the fitting to ensure it stayed level while I glued it up. To keep the fitting easily inspectable and accessible for repairs rather than buried in dirt, I enclosed it in a plastic pot .</li></ol></div><!--.right_column--><div class="step tab-pane fade" id="js-step-3&quot;"><h4 class="clear"><span class="black">Step #3:</span> Install the outlet pots.</h4><img src="http://guide-images.makeprojects.org/igi/rYaoVLisjyavDTvn" alt="Backyard Graywater&nbsp;System" class="2284 1" scale="0"><div class="row smalls"><div class="span2"><img src="http://guide-images.makeprojects.org/igi/rYaoVLisjyavDTvn" alt="Backyard Graywater&nbsp;System" class="2284 1" scale="0"></div><div class="span2"><img src="http://guide-images.makeprojects.org/igi/WSRTTtQgW1kIEgDC" alt="Backyard Graywater&nbsp;System" class="2274 2" scale="0"></div><div class="span2"><img src="http://guide-images.makeprojects.org/igi/IJBRLmdkqHGx3NcU" alt="Backyard Graywater&nbsp;System" class="2293 3" scale="0"></div></div><!--.row--><ol><li>I dug trenches for more 2" pipe to run from the split to the 2 outlets where the water enters the soil. At each, I used a perforated 5gal black plastic pot to distribute the water. I used tinsnips to cut a hole high up on the side of each pot for the pipe to enter, and drilled 1/2" to 1" perforations in the bottom and around the sides for the water to flow out. You can also nest a perforated 5gal pot below a 10gal pot used as a retaining wall.</li><li>I buried the pots in trenches dug 3'-4' long and 1'-2' deep, filled the trenches back up with medium chip bark mulch, and covered each pot with a paving stone. For more height, you can also cover with a trimmed inverted pot. The mulch helps distribute the water to the plant roots while maintaining good drainage around the outlets.</li></ol></div><!--.right_column--><div class="step tab-pane fade" id="js-step-4&quot;"><h4 class="clear"><span class="black">Step #4:</span> Bury the pipes.</h4><img src="http://guide-images.makeprojects.org/igi/vPXyxcGs1QLe2mMA" alt="Backyard Graywater&nbsp;System" class="2275 1" scale="0"><div class="row smalls"></div><!--.row--><ol><li>Finally, I buried the pipes, covering the main pipe run with paving stones and redwood bark mulch to turn it back into a path. I also put a paver over the split point, to allow for easy access later.</li><li>TIPS: It's important to keep an open space around all the pipe terminals, to let you periodically remove any solids, so they don't build up and block the flow. Similarly, it's important to have an open space around the double-ell, so the split can be inspected. Other systems I've seen have a large hole bored into the top of the double-ell to let you visually inspect the interior of the fitting for clogs and clear it out with a finger if needed.</li></ol></div><!--.right_column--><div class="step tab-pane fade" id="js-step-5&quot;"><h4 class="clear"><span class="black">Step #5:</span> Graywater Systems: A Gray Legal Area</h4><img src="http://guide-images.makeprojects.org/igi/ljFYgEyNtAaBrJl5" alt="Backyard Graywater&nbsp;System" class="2277 1" scale="0"><div class="row smalls"></div><!--.row--><ol><li><strong>CAUTION:</strong> Graywater systems are legal in California and other states, but depending on your location, you might be legally limited to certain types of systems and required to get a permit.</li><li>Obtaining a permit can be a roll of the dice, and many people don't bother because of the expense, hassle, and uncertainty. This creates a Catch-22 situation: local building inspectors are overly cautious and scrupulous because they have little familiarity with graywater recycling, so nobody builds permitted systems and the inspectors stay in the dark. The more graywater systems people build with permits, the more experience building inspectors will have with them, and the easier it will be to build them and get inspectors to sign off on them.</li></ol></div><!--.right_column--><div class="conclusion"><p>My garden loves the system, which cost less than $150 in materials, and I’ve already installed pipe and outlets for another one that will reuse the rest of our house’s graywater. Our household of 5 adults does about 6 or 7 loads of laundry per week. At roughly 40 gallons per, that’s 260 gallons saved. And it’s energy saved as well; around 20% of the energy used in California is related to water use — pumping, treating, disposing, etc.</p>
<p>As far as I know, the type of system I built was originally described (although perhaps not designed) by Art Ludwig of Santa Barbara, Calif. He calls this type of system a "branched drain to mini-leach field system" and describes it in detail in his book <em>Create an Oasis with Greywater</em>, which is available at <a href="http://www.oasisdesign.net" rel="nofollow">oasisdesign.net</a>.</p>
<p><strong>NOTE: This project first appeared in MAKE Volume 13, page 151.</strong> <a href="http://makezine.com/13">http://makezine.com/13</a></p>
<p><strong>Related Posts on Make: Online:</strong></p>
<p>Make Your Own Trash Bag Holder</p>
<p><a href="http://blog.makezine.com/archive/2009/03/make_your_own_trash_bag_holder.html" title="http://blog.makezine.com/archive/2009/03/make_your_own_trash_bag_holder.html">http://blog.makezine.com/archive/2009/03...</a></p>
<p>Flashback: Easy Backyard Graywater System</p>
<p><a href="http://blog.makezine.com/archive/2009/03/flashback_easy_backyard_graywater_s.html" title="http://blog.makezine.com/archive/2009/03/flashback_easy_backyard_graywater_s.html">http://blog.makezine.com/archive/2009/03...</a></p></div> </div>
</div>
<div class="span4">
<div class="related-projects">
<h3>Related Projects</h3>
<div class="post-372 projects type-projects status-publish hentry category-gardening-2 category-home-2 tag-office-2 related">
<div class="image">
<a href="http://localhost:8888/projects/collapsible-trash-bag-frame/" title="Collapsible Trash Bag&nbsp;Frame"><img src="http://placekitten.com/98/55" alt="Collapsible Trash Bag&nbsp;Frame" class="related-thumb hide-thumbnail" scale="0"></a>
</div>
<div class="blurb">
<h5><a href="http://localhost:8888/projects/collapsible-trash-bag-frame/">Collapsible Trash Bag&nbsp;Frame</a></h5>
<p><a href="http://localhost:8888/author/bill/" title="Posts by bill" rel="author">bill</a></p>
</div>
</div>
<div class="clearfix"></div>
<div class="post-269600 projects type-projects status-publish hentry category-arduino category-gardening-2 related">
<div class="image">
<a href="http://localhost:8888/projects/garduino-geek-gardening-2/" title="Garduino Geek&nbsp;Gardening"><img src="http://placekitten.com/98/55" alt="Garduino Geek&nbsp;Gardening" class="related-thumb hide-thumbnail" scale="0"></a>
</div>
<div class="blurb">
<h5><a href="http://localhost:8888/projects/garduino-geek-gardening-2/">Garduino Geek&nbsp;Gardening</a></h5>
<p><a href="http://localhost:8888/author/whyisjake/" title="Posts by Jake Spurlock" rel="author">Jake Spurlock</a></p>
</div>
</div>
<div class="clearfix"></div>
<div class="post-479 projects type-projects status-publish hentry category-gardening-2 category-home-2 tag-office-2 related">
<div class="image">
<a href="http://localhost:8888/projects/flower-pot-iphone-charger/" title="Flower Pot iPhone&nbsp;Charger"><img src="http://placekitten.com/98/55" alt="Flower Pot iPhone&nbsp;Charger" class="related-thumb hide-thumbnail" scale="0"></a>
</div>
<div class="blurb">
<h5><a href="http://localhost:8888/projects/flower-pot-iphone-charger/">Flower Pot iPhone&nbsp;Charger</a></h5>
<p><a href="http://localhost:8888/author/whyisjake/" title="Posts by Jake Spurlock" rel="author">Jake Spurlock</a></p>
</div>
</div>
<div class="clearfix"></div>
<div class="post-540 projects type-projects status-publish hentry category-gardening-2 category-home-2 tag-recycle-2 related">
<div class="image">
<a href="http://localhost:8888/projects/building-subirrigated-planters-from-recycled-materials/" title="Building Subirrigated Planters from Recycled&nbsp;Materials"><img src="http://placekitten.com/98/55" alt="Building Subirrigated Planters from Recycled&nbsp;Materials" class="related-thumb hide-thumbnail" scale="0"></a>
</div>
<div class="blurb">
<h5><a href="http://localhost:8888/projects/building-subirrigated-planters-from-recycled-materials/">Building Subirrigated Planters from Recycled&nbsp;Materials</a></h5>
<p><a href="http://localhost:8888/author/whyisjake/" title="Posts by Jake Spurlock" rel="author">Jake Spurlock</a></p>
</div>
</div>
<div class="clearfix"></div>
<div class="post-316 projects type-projects status-publish hentry category-arduino category-gardening-2 related">
<div class="image">
<a href="http://localhost:8888/projects/simple-plant-factory/" title="Simple Plant&nbsp;Factory"><img src="http://placekitten.com/98/55" alt="Simple Plant&nbsp;Factory" class="related-thumb hide-thumbnail" scale="0"></a>
</div>
<div class="blurb">
<h5><a href="http://localhost:8888/projects/simple-plant-factory/">Simple Plant&nbsp;Factory</a></h5>
<p><a href="http://localhost:8888/author/whyisjake/" title="Posts by Jake Spurlock" rel="author">Jake Spurlock</a></p>
</div>
</div>
<div class="clearfix"></div>
<div class="post-269724 projects type-projects status-publish hentry category-gardening-2 category-home-2 tag-recycle-2 related">
<div class="image">
<a href="http://localhost:8888/projects/gourd-lanterns-2/" title="Gourd&nbsp;Lanterns"><img src="http://placekitten.com/98/55" alt="Gourd&nbsp;Lanterns" class="related-thumb hide-thumbnail" scale="0"></a>
</div>
<div class="blurb">
<h5><a href="http://localhost:8888/projects/gourd-lanterns-2/">Gourd&nbsp;Lanterns</a></h5>
<p><a href="http://localhost:8888/author/whyisjake/" title="Posts by Jake Spurlock" rel="author">Jake Spurlock</a></p>
</div>
</div>
<div class="clearfix"></div>
<div class="post-454 projects type-projects status-publish hentry category-gardening-2 category-home-2 tag-recycle-2 related">
<div class="image">
<a href="http://localhost:8888/projects/hose-stakes-from-reused-hangers-for-drip-irrigation-systems/" title="Hose Stakes from Reused Hangers (for Drip-Irrigation&nbsp;Systems)"><img src="http://placekitten.com/98/55" alt="Hose Stakes from Reused Hangers (for Drip-Irrigation&nbsp;Systems)" class="related-thumb hide-thumbnail" scale="0"></a>
</div>
<div class="blurb">
<h5><a href="http://localhost:8888/projects/hose-stakes-from-reused-hangers-for-drip-irrigation-systems/">Hose Stakes from Reused Hangers (for Drip-Irrigation&nbsp;Systems)</a></h5>
<p><a href="http://localhost:8888/author/whyisjake/" title="Posts by Jake Spurlock" rel="author">Jake Spurlock</a></p>
</div>
</div>
<div class="clearfix"></div>
<div class="post-384 projects type-projects status-publish hentry category-fun-games category-gardening-2 tag-outdoors-2 related">
<div class="image">
<a href="http://localhost:8888/projects/ball-chain-plant-hangers/" title="Ball-Chain Plant&nbsp;Hangers"><img src="http://placekitten.com/98/55" alt="Ball-Chain Plant&nbsp;Hangers" class="related-thumb hide-thumbnail" scale="0"></a>
</div>
<div class="blurb">
<h5><a href="http://localhost:8888/projects/ball-chain-plant-hangers/">Ball-Chain Plant&nbsp;Hangers</a></h5>
<p><a href="http://localhost:8888/author/bill/" title="Posts by bill" rel="author">bill</a></p>
</div>
</div>
<div class="clearfix"></div>
<div class="clearfix"></div>
<div class="grad"></div>
</div>
</div>
</div>
</div>
</div></div>
</div>
Raw
script.js
jQuery('#link-js-step-3').click(function (e) {
e.preventDefault();
jQuery(this).tab('show');
})
Raw
style.less
.projects-masthead {
font-family: "proxima-nova", sans-serif;
}
.projects-masthead h3 {
font-size: 22px;
text-transform: uppercase;
}
.projects-masthead h3 a {
color: #ed1c24;
}
.projects-masthead h1 {
font-size: 60px;
line-height: 60px;
}
.projects-masthead h1 a {
color: #005d8f;
}
.projects-meta {
margin: 10px 0;
padding: 5px 0;
font-weight: bold;
color: #ed1c24;
border-top: 2px solid #cdcdcd;
border-bottom: 2px solid #cdcdcd;
}
.projects-meta li {
display: inline;
margin-right: 10px;
font-size: 16px;
}
.projects-meta li span {
color: #005d8f;
}
a {
color: #005d8f;
}
.parts-tools {
border-top: 7px solid #ed1c24;
border-bottom: 7px solid #ed1c24;
max-height: 600px;
padding: 10px;
background-color: #eaeaea;
background-image: -webkit-linear-gradient(top, #eaeaea, #ffffff);
background-image: -moz-linear-gradient(top, #eaeaea, #ffffff);
background-image: -o-linear-gradient(top, #eaeaea, #ffffff);
background-image: -ms-linear-gradient(top, #eaeaea, #ffffff);
background-image: linear-gradient(top, #eaeaea, #ffffff);
}
.parts-tools .top {
font-size: 18px;
margin-left: 0px;
padding-top: 0px;
text-transform: uppercase;
}
.parts-tools .top li {
display: inline;
font-weight: bold;
padding-bottom: 7px;
}
.parts-tools .top li a {
color: #868484;
}
.parts-tools .top li.active {
background-image: url('../img/active-arrow.png');
background-repeat: no-repeat;
background-position: center bottom;
}
.parts-tools .top li.active a {
color: #ed1c24;
}
.parts-tools .top li.divider {
color: #7cd5fc;
}
.parts-tools .lists {
margin-left: 0px;
font-size: 18px;
font-weight: bold;
}
.parts-tools .lists li {
color: #0776b7;
border-bottom: 1px solid #CCEFFB;
list-style-type: none;
line-height: 22px;
}
.top-steps h4 {
font-size: 22px;
position: relative;
top: -39px;
left: 1px;
background-color: #fff;
padding: 10px;
width: 198px;
opacity: .8;
}
.top-steps img {
border: 1px solid #cecece;
height: 146px;
width: 218px;
}
.bottom-steps {
font-size: 16px;
}
.bottom-steps .smalls {
margin-top: 10px;
}
.bottom-steps ol {
margin-top: 10px;
}
.bottom-steps ol li {
font-size: 18px;
margin-bottom: 10px;
}
.bottom-steps h4 {
color: #005d8f;
font-size: 28px;
line-height: 24px;
margin-bottom: 15px;
}
.related-projects {
border-top: 7px solid #ed1c24;
border-bottom: 7px solid #ed1c24;
max-height: 600px;
padding: 10px;
background-color: #eaeaea;
background-image: -webkit-linear-gradient(top, #eaeaea, #ffffff);
background-image: -moz-linear-gradient(top, #eaeaea, #ffffff);
background-image: -o-linear-gradient(top, #eaeaea, #ffffff);
background-image: -ms-linear-gradient(top, #eaeaea, #ffffff);
background-image: linear-gradient(top, #eaeaea, #ffffff);
overflow: scroll;
margin-top: 10px;
}
.related {
margin: 10px 0;
position: relative;
}
.related .image {
width: 100px;
float: left;
margin-bottom: 10px;
}
.related .image img {
border: 1px solid #cecece;
}
.related .blurb {
width: 170px;
float: left;
margin-left: 10px;
}
.related .blurb p {
font-size: 16px;
}
.related .blurb h5 {
color: #005d8f;
font-size: 16px;
}
.black {
color: #333;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment