Skip to content

Instantly share code, notes, and snippets.

@barnettjw

barnettjw/Ready-to-Launch.markdown

Last active December 25, 2015 05:49
Show Gist options
  • Save barnettjw/6927396 to your computer and use it in GitHub Desktop.
Save barnettjw/6927396 to your computer and use it in GitHub Desktop.
Download ZIP
Ready to Launch
Raw
index.html
<div id = "container">
<div class = "header">
<h1>Ready to Launch</h1>
<div>A checklist of launching your next website</div>
</div>
<form>
<div class = "pad-header"></div>
<div class = "pad">
<div class = "page">
<fieldset class = "list">
<ul class = "pad-container">
<li>
<h2 class = "top"><span class = "exp-complete complete"></span><a href="#" class="toggle_exp"><span class = "exp-icon"></span>Experience Related</a></h2>
<ul class = "exp">
<li>
<input id="exp1" name="exp1" type="checkbox" />
<label for = "exp1">Images have appropriate alt text</label>
<span class = "exp1-na">N/A</span>
<div class = "exp1-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="exp1-comment-textbox" maxlength="250"></textarea>
<span class="exp1-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="exp2" name="exp2" type="checkbox" />
<label for = "exp2">No Instances of "click here" for links</label>
<span class = "exp2-na">N/A</span>
<div class = "exp2-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="exp2-comment-textbox" maxlength="250"></textarea>
<span class="exp2-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="exp3" name="exp3" type="checkbox" />
<label for = "exp3">All delete actions require confirmation</label>
<span class = "exp3-na">N/A</span>
<div class = "exp3-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="exp3-comment-textbox" maxlength="250"></textarea>
<span class="exp3-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="exp4" name="exp4" type="checkbox" />
<label for = "exp4">Touch targets are a minimum of 45 pixels wide</label>
<span class = "exp4-na">N/A</span>
<div class = "exp4-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="exp4-comment-textbox" maxlength="250"></textarea>
<span class="exp4-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
</ul>
<h2><span class = "content-complete complete"></span><a href="#" class="toggle_content"><span class = "content-icon"></span>Content</a></h2>
<ul class = "content">
<li>
<input id="content1" name="content1" type="checkbox" />
<label for = "content1">Site content has been proofread for typos</label>
<span class = "content1-na">N/A</span>
<div class = "content1-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="comment1-comment-textbox" maxlength="250"></textarea>
<span class="comment1-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="content2" name="content2" type="checkbox" />
<label for = "content2">There is no test copy remaining on the site</label>
<span class = "content2-na">N/A</span>
<div class = "content2-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="content2-comment-textbox" maxlength="250"></textarea>
<span class="content2-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="content3" name="content3" type="checkbox" />
<label for = "content3">Phone numbers & addresses have been verified</label>
<span class = "content3-na">N/A</span>
<div class = "content3-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="content3-comment-textbox" maxlength="250"></textarea>
<span class="content3-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
</ul>
<h2><span class = "brand-complete complete"></span><a href="#" class="toggle_brand"><span class = "brand-icon"></span>Branding</a></h2>
<ul class = "brand">
<li>
<input id="brand1" name="brand1" type="checkbox" />
<label for = "brand1">The site has a working favicon</label>
<span class = "brand1-na">N/A</span>
<div class = "brand1-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="brand1-comment-textbox" maxlength="250"></textarea>
<span class="brand1-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="brand2" name="brand2" type="checkbox" />
<label for = "brand2">The footer section has legal info</label>
<span class = "brand2-na">N/A</span>
<div class = "brand2-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="brand2-comment-textbox" maxlength="250"></textarea>
<span class="brand2-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="brand3" name="brand3" type="checkbox" />
<label for = "brand3">Title includes domain at the end (e.g. - domain.com)</label>
<span class = "brand3-na">N/A</span>
<div class = "brand3-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="rand3-comment-textbox" maxlength="250"></textarea>
<span class="brand3-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
</ul>
<h2><span class = "seo-complete complete"></span><a href="#" class="toggle_seo"><span class = "seo-icon"></span>SEO</a></h2>
<ul class ="seo">
<li>
<input id="seo1" name="seo1" type="checkbox" />
<label for = "seo1">Setup on traffic analysis package</label>
<span class = "seo1-na">N/A</span>
<div class = "seo1-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="seo1-comment-textbox" maxlength="250"></textarea>
<span class="seo1-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="seo2" name="seo2" type="checkbox" />
<label for = "seo2">Up-to-date sitemap submitted to Google</label>
<span class = "seo2-na">N/A</span>
<div class = "seo2-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="seo2-comment-textbox" maxlength="250"></textarea>
<span class="seo2-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="seo3" name="seo3" type="checkbox" />
<label for = "seo3">H1 & Meta title attributes are descriptive and SEO friendly</label>
<span class = "seo3-na">N/A</span>
<div class = "seo3-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="seo3-comment-textbox" maxlength="250"></textarea>
<span class="seo3-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="seo4" name="seo4" type="checkbox" />
<label for = "seo4">Meta descriptions attributes are SEO friendly</label>
<span class = "seo4-na">N/A</span>
<div class = "seo4-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="seo4-comment-textbox" maxlength="250"></textarea>
<span class="seo4-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
</ul>
<h2><span class = "val-complete complete"></span><a href="#" class="toggle_val"><span class = "val-icon"></span>Validation</a></h2>
<ul class = "val">
<li>
<input id="val1" name="val1" type="checkbox" />
<label for = "val1">W3C Markup validated</label>
<span class = "val1-na">N/A</span>
<div class = "val1-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="val1-comment-textbox" maxlength="250"></textarea>
<span class="val1-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="val2" name="val2" type="checkbox" />
<label for = "val2">CSS files linted</label>
<span class = "val2-na">N/A</span>
<div class = "val2-comment">
<span class = "icon-comment"></span>
<div class = "comment-box"> <label>Comments:</label> <textarea></textarea> </div>
</div>
</li>
<li>
<input id="val3" name="val3" type="checkbox" />
<label for = "val3">No broken links found</label>
<span class = "val3-na">N/A</span>
<div class = "val3-comment">
<span class = "icon-comment"></span>
<div class = "comment-box"> <label>Comments:</label> <textarea></textarea> </div>
</div>
</li>
<li>
<input id="val4" name="val4" type="checkbox" />
<label for = "val4">JavaScript is error-free</label>
<span class = "val4-na">N/A</span>
<div class = "val4-comment">
<span class = "icon-comment"></span>
<div class = "comment-box"> <label>Comments:</label> <textarea></textarea> </div>
</div>
</li>
</ul>
<h2><span class = "testing-complete complete"></span><a href="#" class="toggle_testing"><span class = "testing-icon"></span>Cross Browser Testing</a></h2>
<ul class = "testing">
<li>
<input id="testing1" name="testing1" type="checkbox" />
<label for = "testing1">Chrome (on Windows & OS X)</label>
<span class = "testing1-na">N/A</span>
<div class = "testing1-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="testing1-comment-textbox" maxlength="250"></textarea>
<span class="testing1-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="testing2" name="testing2" type="checkbox" />
<label for = "testing2">Firefox (on Windows & OS X)</label>
<span class = "testing2-na">N/A</span>
<div class = "testing2-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="testing2-comment-textbox" maxlength="250"></textarea>
<span class="testing2-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="testing3" name="testing3" type="checkbox" />
<label for = "testing3">Safari (on OS X)</label>
<span class = "testing3-na">N/A</span>
<div class = "testing3-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="testing3-comment-textbox" maxlength="250"></textarea>
<span class="testing3-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="testing4" name="testing4" type="checkbox" />
<label for = "testing4">Internet Explorer 9</label>
<span class = "testing4-na">N/A</span>
<div class = "testing4-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="testing4-comment-textbox" maxlength="250"></textarea>
<span class="testing4-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="testing5" name="testing5" type="checkbox" />
<label for = "testing5">Internet Explorer 8</label>
<span class = "testing5-na">N/A</span>
<div class = "testing5-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="testing5-comment-textbox" maxlength="250"></textarea>
<span class="testing5-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="testing6" name="testing6" type="checkbox" />
<label for = "testing6">Internet Explorer 7</label>
<span class = "testing6-na">N/A</span>
<div class = "testing6-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="testing6-comment-textbox" maxlength="250"></textarea>
<span class="testing6-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="testing7" name="testing7" type="checkbox" />
<label for = "testing7">Font stack has been tested on Windows & OS X</label>
<span class = "testing7-na">N/A</span>
<div class = "testing7-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="testing7-comment-textbox" maxlength="250"></textarea>
<span class="testing7-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
</ul>
<h2><span class = "rwd-complete complete"></span><a href="#" class="toggle_rwd"><span class = "rwd-icon"></span>Responsive Design Testing</a></h2>
<ul class = "rwd">
<li>
<input id="rwd1" name="rwd1" type="checkbox" />
<label for = "rwd1">Tested at 1366 x 768</label>
<span class = "rwd1-na">N/A</span>
<div class = "rwd1-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="rwd1-comment-textbox" maxlength="250"></textarea>
<span class="rwd1-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="rwd2" name="rwd2" type="checkbox" />
<label for = "rwd2">Tested at 1024 x 768</label>
<span class = "rwd2-na">N/A</span>
<div class = "rwd2-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="rwd2-comment-textbox" maxlength="250"></textarea>
<span class="rwd2-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="rwd3" name="rwd3" type="checkbox" />
<label for = "rwd3">Tested at 320 x 480</label>
<span class = "rwd3-na">N/A</span>
<div class = "rwd3-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="rwd3-comment-textbox" maxlength="250"></textarea>
<span class="rwd3-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="rwd4" name="rwd4" type="checkbox" />
<label for = "rwd4">Test your design at the most common resolutions</label>
<span class = "rwd4-na">N/A</span>
<div class = "rwd4-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="rwd4-comment-textbox" maxlength="250"></textarea>
<span class="rwd4-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
</ul>
<h2><span class = "perf-complete complete"></span><a href="#" class="toggle_perf"><span class = "perf-icon"></span>Performance</a></h2>
<ul class = "perf">
<li>
<input id="perf1" name="perf1" type="checkbox" />
<label for="perf1">Page load time has been tested</label>
<span class = "perf1-na">N/A</span>
<div class = "perf1-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="perf1-comment-textbox" maxlength="250"></textarea>
<span class="perf1-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="perf2" name="perf2" type="checkbox" />
<label for="perf2">Site images are optimize for the web</label>
<span class = "perf2-na">N/A</span>
<div class = "perf2-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="perf2-comment-textbox" maxlength="250"></textarea>
<span class="perf2-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="perf3" name="perf3" type="checkbox" />
<label for="perf3">JavaScript, CSS, HTML files are minified</label>
<span class = "perf3-na">N/A</span>
<div class = "perf3-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="perf3-comment-textbox" maxlength="250"></textarea>
<span class="perf3-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
</ul>
<h2><span class = "worst-complete complete"></span><a href="#" class="toggle_worst"><span class = "worst-icon"></span>Testing for the worst case scenario</a></h2>
<ul class = "worst">
<li>
<input id="worst1" name="worst1" type="checkbox" />
<label for="worst1">JavaScript turned off</label>
<span class = "worst1-na">N/A</span>
<div class = "worst1-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="worst1-comment-textbox" maxlength="250"></textarea>
<span class="worst1-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="worst2" name="worst2" type="checkbox" />
<label for="worst2">Images turned off</label>
<span class = "worst2-na">N/A</span>
<div class = "worst2-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="worst2-comment-textbox" maxlength="250"></textarea>
<span class="worst2-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="worst3" name="worst3" type="checkbox" />
<label for="worst3">CSS turned off</label>
<span class = "worst3-na">N/A</span>
<div class = "worst3-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="worst3-comment-textbox" maxlength="250"></textarea>
<span class="worst3-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="worst4" name="worst4" type="checkbox" />
<label for="worst4">Flash turned off</label>
<span class = "worst4-na">N/A</span>
<div class = "worst4-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="worst4-comment-textbox" maxlength="250"></textarea>
<span class="worst4-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="worst5" name="worst5" type="checkbox" />
<label for="worst5">QuickTime and other plugins turned off</label>
<span class = "worst5-na">N/A</span>
<div class = "worst5-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="worst5-comment-textbox" maxlength="250"></textarea>
<span class="worst5-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="worst6" name="worst6" type="checkbox" />
<label for="worst6">Fallback style sheet is setup</label>
<span class = "worst6-na">N/A</span>
<div class = "worst6-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="worst6-comment-textbox" maxlength="250"></textarea>
<span class="worst6-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
</ul>
<h2><span class = "forms-complete complete"></span><a href="#" class="toggle_forms"><span class = "forms-icon"></span>Forms</a></h2>
<ul class = "forms">
<li>
<input id="forms1" name="forms1" type="checkbox" />
<label for="forms1">Inline help has been added where needed</label>
<span class = "forms1-na">N/A</span>
<div class = "forms1-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="forms1-comment-textbox" maxlength="250"></textarea>
<span class="forms1-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="forms2" name="forms2" type="checkbox" />
<label for="forms2">Forms use HTML5 validation to highlight invalid fields</label>
<span class = "forms2-na">N/A</span>
<div class = "forms2-comment">
<span class = "icon-comment"></span>
<<div class = "comment-box">
<label>Comments:</label>
<textarea class="forms2-comment-textbox" maxlength="250"></textarea>
<span class="forms2-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="forms3" name="forms3" type="checkbox" />
<label for="forms3">Forms data is checked via server-side validation</label>
<span class = "forms3-na">N/A</span>
<div class = "forms3-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="forms3-comment-textbox" maxlength="250"></textarea>
<span class="forms3-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="forms4" name="forms4" type="checkbox" />
<label for="forms4">All submit functions redirect to a thank you page</label>
<span class = "forms4-na">N/A</span>
<div class = "forms4-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="forms4-comment-textbox" maxlength="250"></textarea>
<span class="forms4-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
</ul>
<h2><span class = "contact-complete complete"></span><a href="#" class="toggle_contact"><span class = "contact-icon"></span>Contact the admins</a></h2>
<ul class = "contact">
<li>
<input id="contact1" name="contact1" type="checkbox" />
<label for="contact1">A test message has been sent and a reply received</label>
<span class = "contact1-na">N/A</span>
<div class = "contact1-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="contact1-comment-textbox" maxlength="250"></textarea>
<span class="contact1-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="contact2" name="contact2" type="checkbox" />
<label for="contact2">Setup an email address for <i>[email protected]</i></label>
<span class = "contact2-na">N/A</span>
<div class = "contact2-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="contact2-comment-textbox" maxlength="250"></textarea>
<span class="contact2-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
</ul>
<h2><span class = "error-complete complete"></span><a href="#" class="toggle_error"><span class = "error-icon"></span>Error Messages</a></h2>
<ul class = "error">
<li>
<input id="error1" name="error1" type="checkbox" />
<label for = "error1">Error pages are setup that are both helpful and branded</label>
<span class = "error1-na">N/A</span>
<div class = "error1-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="error1-comment-textbox" maxlength="250"></textarea>
<span class="error1-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="error2" name="error2" type="checkbox" />
<label for = "error2">Include pages: 402, 404, 500</label>
<span class = "error2-na">N/A</span>
<div class = "error2-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="error2-comment-textbox" maxlength="250"></textarea>
<span class="error2-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="error3" name="error5" type="checkbox" />
<label for = "error3">Server-side code serves branded error pages</label>
<span class = "error3-na">N/A</span>
<div class = "error3-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="error3-comment-textbox" maxlength="250"></textarea>
<span class="error3-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
</ul>
<h2><span class = "prod-complete complete"></span><a href="#" class="toggle_prod"><span class = "prod-icon"></span>Production Ready</a></h2>
<ul class = "prod">
<li>
<input id="prod1" name="prod1" type="checkbox" />
<label for = "prod1">The site is backed up</label>
<span class = "prod1-na">N/A</span>
<div class = "prod1-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="prod1-comment-textbox" maxlength="250"></textarea>
<span class="prod1-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="prod2" name="prod2" type="checkbox" />
<label for = "prod2">Server-side reporting has been turned off</label>
<span class = "prod2-na">N/A</span>
<div class = "prod2-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="prod2-comment-textbox" maxlength="250"></textarea>
<span class="prod2-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="prod3" name="prod3" type="checkbox" />
<label for = "prod3">Indexes are disabled via .htaccess file</label>
<span class = "prod3-na">N/A</span>
<div class = "prod3-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="prod3-comment-textbox" maxlength="250"></textarea>
<span class="prod3-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="prod4" name="prod4" type="checkbox" />
<label for = "prod4">Robots.txt has been setup</label>
<span class = "prod4-na">N/A</span>
<div class = "prod4-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="prod4-comment-textbox" maxlength="250"></textarea>
<span class="prod4-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="prod5" name="prod5" type="checkbox" />
<label for = "prod5">Site is setup on a monitoring service</label>
<span class = "prod5-na">N/A</span>
<div class = "prod5-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="prod5-comment-textbox" maxlength="250"></textarea>
<span class="prod5-comment-characterLeft">250 Characters Max</span>
</div><div class = "comment-box"> <label>Comments:</label> <textarea></textarea> </div>
</div>
</li>
<li>
<input id="prod6" name="prod6" type="checkbox" />
<label for = "prod6">Site is setup Website defender</label>
<span class = "prod6-na">N/A</span>
<div class = "prod6-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="prod6-comment-textbox" maxlength="250"></textarea>
<span class="prod6-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
<li>
<input id="prod7" name="prod7" type="checkbox" />
<label for = "prod7">All site-related accounts have complex passwords</label>
<span class = "prod7-na">N/A</span>
<div class = "prod7-comment">
<span class = "icon-comment"></span>
<div class = "comment-box">
<label>Comments:</label>
<textarea class="prod7-comment-textbox" maxlength="250"></textarea>
<span class="prod7-comment-characterLeft">250 Characters Max</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</fieldset>
</div>
</div>
</form>
<div class = "footer">
<a class="pure-button reset" href="#">Reset</a>
<div class = "ready"></div>
<div class="progressbar-container">
<div class="progressbar-bar"></div>
<div class="progressbar-label"></div>
</div>
</div>
</div>
Raw
script.js
$(document).ready(function(){
/* for testing purposes only */
/*$('input[id*=exp], input[id*=content]').attr('checked', true);
$('input').attr('checked', true);*/
$(".content, .brand, .seo, .val, .testing, .rwd, .perf, .worst, .forms, .contact, .error, .prod").hide();
/* intialize icons */
$(".content-icon, .brand-icon, .seo-icon, .val-icon, .testing-icon, .rwd-icon, .perf-icon, .worst-icon, .forms-icon, .contact-icon, .error-icon, .prod-icon").toggleClass("arrow-right");
$(".exp-icon").toggleClass("arrow-down");
/*************** toggle sections ***************/
function toggleSection(sectionChoice){
var action = ".toggle_" + sectionChoice;
var icon = "." + sectionChoice + "-icon";
var section = "." + sectionChoice;
$(action).click(function(){
$(icon).toggleClass("arrow-right");
$(icon).toggleClass("arrow-down");
$(section).slideToggle(); return false;
});
}
toggleSection("exp"); toggleSection("content"); toggleSection("brand"); toggleSection("seo"); toggleSection("val"); toggleSection("testing"); toggleSection("rwd"); toggleSection("perf"); toggleSection("worst"); toggleSection("forms"); toggleSection("contact"); toggleSection("error"); toggleSection("prod");
/*************** count sections ***************/
var count = 0;
var checked = 0;
function countBoxes() { return $("input[type='checkbox']:enabled").length; }
function countChecked() {
checked = $("input[type='checkbox']:checked").length;
count = countBoxes();
console.log("boxes: " + count);
console.log("checked: " + checked);
var percentage = parseInt(((checked / count) * 100), 10);
$(".progressbar-bar").progressbar({
value: percentage
});
$(".progressbar-label").text(percentage + "% Complete");
if (count === checked) { $(".ready").text('Ready to Launch!'); }
else { $(".ready").text(''); }
markComplete("exp"); markComplete("content"); markComplete("brand"); markComplete("seo"); markComplete("val"); markComplete("testing"); markComplete("rwd"); markComplete("perf"); markComplete("worst"); markComplete("forms"); markComplete("contact"); markComplete("error"); markComplete("prod");
}
$(":checkbox").click(countBoxes);
countChecked();
$(":checkbox").click(countChecked);
/* mark section completed */
function countBoxesInSection(section) {
answer = $("input[type='checkbox'][name*='" + section + "']:enabled").length;
console.log("boxes in section: " + answer);
return answer;
}
function countCheckedInSection(section) {
answer = $("input:checked[name*='" + section + "']").length;
console.log("checked in section: " + answer);
return answer;
}
function markComplete(section) {
if (countBoxesInSection(section) === countCheckedInSection(section)) {
$("." + section +"-complete").addClass("complete");
}
else {
$("." + section +"-complete").removeClass("complete");
}
}
/* reset all checks*/
$( ".reset" ).click(function() {
$('input').attr('checked', false);
$('input').attr('disabled', false);
countChecked();
});
/* mark as N/A */
/* If checkbox doesn't have class "na" then disable checkbox and add the class. If checkbox currently has class "na" then checkbox is currently disabled, re-enable it and remove the class */
$( "span[class*='na']" ).click(function() {
if ($( this ).hasClass( "na" ) !== true) {
$(this).addClass("na");
$(this).siblings( "input" ).attr("disabled", true);
$(this).siblings( "input" ).attr("checked", false);
}
else {
$(this).siblings( "input" ).attr("disabled", false);
$(this).removeClass("na");
}
countChecked();
});
/* comment box */
$( "div[class*='comment'] .icon-comment" ).click(function() {
$( this ).siblings(".comment-box").slideToggle();
});
/* comment box character count */
/* based on:
http://www.findsourcecode.com/jquery/how-to-count-number-of-characters-in-textarea-jquery/ */
var charMax = 250;
$("[class*='comment-textbox']").keyup(function () {
var textLength = $(this).val().length;
var charLeft = $(this).siblings("[class*='characterLeft']");
if (textLength >= charMax) {
$(charLeft).text('You have reached the limit of ' + charMax + ' characters');
} else {
var count = charMax - textLength;
$(charLeft).text(count + ' Characters Left');
}
/* show comment icon when comment is present */
var currentComment = $(this).parents("div[class*='-comment']");
if (textLength > 0 ) { $(currentComment).addClass("comment-present"); }
else { $(currentComment).removeClass("comment-present"); }
});
});
Raw
style.css
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/*************** Resets ***************/
ul, li { list-style: none; }
h1, h2, div, ul, li, a, input, label, textarea, fieldset {
margin: 0;
padding: 0;
}
/*************** Containers ***************/
body { background: url(http://subtlepatterns.com/patterns/paper_fibers.png); }
/* container has an ID instead of a class has a hack in case extra specificity is needed in a selector */
#container {
margin: auto;
padding-left: 75px;
padding-top: 0px;
width: 900px;
}
.details { margin-left: 150px; }
fieldset.list { border: none; }
.footer {
height: 70px;
padding-top: 20px;
clear: both;
}
/*************** Lined Paper ***************/
.pad {
color: #444;
background-color: #e1e9a0;
width: 775px;
box-shadow: 10px 3px 20px #999;
}
.pad-header {
margin-top: 20px;
height: 70px;
width: 775px;
background-color: #623B18;
box-shadow: 10px 3px 20px #999;
}
.page {
float: left;
width: 775px;
box-shadow: 10px 3px 20px #999;
}
/* add extra line to top of pad*/
h2 ~ ul, h2, .pad-container {
background: -webkit-linear-gradient(#6496b9, #e1e9a0 2px);
background: -moz-linear-gradient(#6496b9, #e1e9a0 2px);
background: linear-gradient(#6496b9, #e1e9a0 2px);
background-size: 90px 30px;
}
h2 + ul { padding-bottom: 30px; }
.top { padding-top: 30px; }
.pad-container {
min-height: 900px;
padding-bottom: 30px;
}
/* lines for list items */
h2 { padding-left: 50px; }
h2 ~ ul {
padding-left: 10px;
padding-right: 30px;
}
input[type=checkbox] + label:hover {
background-color: #E4F9AC;
opacity: 0.6;
}
/*************** Arrow Icons **************/
/* expand click target for toggle to include arrow icon */
[class*="icon"].arrow-down { margin-right: 12px; }
[class*="toggle"] { padding-left: 4px; }
.arrow-right { width: 20px; }
.arrow-right {
display:inline-block;
position: relative;
top: -2px;
left: 0px;
border-bottom: 9px solid transparent;
border-top: 9px solid transparent;
border-left: 9px solid #383838;
}
.arrow-down {
display:inline-block;
position: relative;
top: -5px;
left: -3px;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 9px solid #383838;
}
/*************** Checkboxes ***************/
/* to hide the checkbox itself */
input[type=checkbox] {
display:none;
position: relative;
}
input[type=checkbox] + label {
padding: 0 10px;
border-radius: 5px;
}
input[type=checkbox] + label:before, input[type=checkbox]:checked + label:before {
font-family: FontAwesome;
display: inline-block;
vertical-align: middle;
line-height: 1em;
font-size: 24px;
}
/* checkbox w/ space for the checkbox */
input[type=checkbox] + label:before {
content: "\f096 ";
letter-spacing: 20px;
}
input[type=checkbox]:checked + label:before {
content: "\f046";
letter-spacing: 7px;
}
/*************** Mark as N/A **************/
h2 + ul li {
position: relative;
padding-left: 65px;
}
span[class*="na"] { visibility: hidden; }
input:disabled + label, h2 + ul li:hover > span[class*="na"], .icon-comment { color: rgba(71,71,71,0.5); }
/* postion & style N/A button */
h2 + ul li:hover > span[class*="na"] {
visibility: visible;
position: absolute;
left: 25px;
top: 4px;
padding: 0 5px;
line-height: 1.5em;
font-size: 0.75em;
cursor: pointer;
}
/* replace checkbox w/ "n/a" */
input:disabled + label:before {
display: inline-block;
margin: 3px 15px 5px -3px;
font-size: 16px;
letter-spacing: -2px;
content:"N/A";
}
/*************** Comment Box **************/
.comment-box { display: none; }
div[class*="comment"] label { margin-left: 10px;}
[class*="comment"] textarea {
width: 600px;
height: 90px;
margin: 13px 0 13px 25px;
background: #E0E0E0;
}
.icon-comment { display: none; }
.comment-present .icon-comment { color: rgba(71,71,71,1); }
h2 + ul li:hover .icon-comment, .comment-present .icon-comment {
display: inline-block;
position: absolute;
left: 3px;
top: 4px;
padding: 0 5px;
line-height: 1.5em;
font-size: 0.75em;
cursor: pointer;
}
[class*='comment-characterLeft'] {
display: inline-block;
margin: 0 0 30px 25px;
}
/*************** Section Complete Check **************/
h2 { position: relative; }
.top .complete:before { top: 34px;}
.complete:before {
position: absolute;
top: 5px;
left: 15px;
font-family: FontAwesome;
font-size: 24px;
line-height: 1em;
content: "\f058";
color: green;
opacity: 0.5;
}
/*************** Progress Bar ***************/
.ui-progressbar-value { background: #6496b9; }
.progressbar-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
border-radius: 0;
}
.progressbar-bar {
height: 25px;
background: #ccc;
opacity: .8;
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
border: none;
}
.progressbar-label {
position: absolute;
top: 0px;
left: 45%;
z-index: 2;
}
/* reset button */
.footer .reset {
position: fixed;
bottom: 40px;
right: 25px;
font-size: 22px;
padding: 3px 15px;
background: #ABC6D9;
}
/*************** Typography ***************/
h1 {
font-size: 75px;
color: #6496b9;
}
h1 ~ div {
font-size: 26px;
line-height: 26px;
}
body { font-size: 22px; }
h2, a:link, a:visited { font-size: 30px; }
h2, a:link, a:visited, li { line-height: 30px; }
h1, h2 { font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; }
body { font-family: Verdana, Arial, Helvetica, sans-serif; }
h2, a:link, a:visited, body { color: #474747; }
a:link, a:visited { text-decoration: none; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment