<title>Cloud Constructs Front-End Code Standards</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="shortcut icon" href="Assets/Icons/favicon.ico" type="image/x-icon" />

<link rel="apple-touch-icon" sizes="57x57" href="Assets/Icons/apple-touch-icon-57x57.png">

<link rel="apple-touch-icon" sizes="60x60" href="Assets/Icons/apple-touch-icon-60x60.png">

<link rel="apple-touch-icon" sizes="72x72" href="Assets/Icons/apple-touch-icon-72x72.png">

<link rel="apple-touch-icon" sizes="76x76" href="Assets/Icons/apple-touch-icon-76x76.png">

<link rel="apple-touch-icon" sizes="114x114" href="Assets/Icons/apple-touch-icon-114x114.png">

<link rel="apple-touch-icon" sizes="120x120" href="Assets/Icons/apple-touch-icon-120x120.png">

<link rel="apple-touch-icon" sizes="144x144" href="Assets/Icons/apple-touch-icon-144x144.png">

<link rel="apple-touch-icon" sizes="152x152" href="Assets/Icons/apple-touch-icon-152x152.png">

<link rel="apple-touch-icon" sizes="180x180" href="Assets/Icons/apple-touch-icon-180x180.png">

<link rel="icon" type="image/png" href="Assets/Icons/favicon-16x16.png" sizes="16x16">

<link rel="icon" type="image/png" href="Assets/Icons/favicon-32x32.png" sizes="32x32">

<link rel="icon" type="image/png" href="Assets/Icons/favicon-96x96.png" sizes="96x96">

<link rel="icon" type="image/png" href="Assets/Icons/android-chrome-192x192.png" sizes="192x192">

<meta name="msapplication-square70x70logo" content="Assets/Icons/smalltile.png" />

<meta name="msapplication-square150x150logo" content="Assets/Icons/mediumtile.png" />

<meta name="msapplication-wide310x150logo" content="Assets/Icons/widetile.png" />

<meta name="msapplication-square310x310logo" content="Assets/Icons/largetile.png" />

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,700,900" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="Assets/dist/css/general.css" />

<div class="mainContent__wrapper" data-spy="scroll" data-target=".navbar" data-offset="0">

<div class="header__topLogo">

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70.45 70.45"><title>cc_logo</title><rect style="fill:#6d6e71;" width="23.48" height="23.48"/><rect style="fill:#8c8e90;" x="23.48" width="23.48" height="23.48"/><rect style="fill:#adafb2;" x="46.97" width="23.48" height="23.48"/><rect style="fill:#8c8e90;" y="23.48" width="23.48" height="23.49"/><rect style="fill:#adafb2;" x="23.48" y="23.48" width="23.48" height="23.49"/><rect style="fill:#dedfe0;" x="46.97" y="23.48" width="23.48" height="23.49"/><rect style="fill:#adafb2;" y="46.97" width="23.48" height="23.48"/><rect style="fill:#dedfe0;" x="23.48" y="46.97" width="23.48" height="23.48"/><rect style="fill:#fff;" x="46.97" y="46.97" width="23.48" height="23.48"/><path style="fill:#e31837;" d="M66.74,48.05C63.32,59.78,51.38,68.19,39.23,68.19A29.21,29.21,0,0,1,10,39C10,23.66,22.11,9.64,37.88,9.64a21.33,21.33,0,0,1,15.89,7V11.31h10.9V29.78H52.83A16.87,16.87,0,0,0,39,22.21c-9.45,0-16.41,7.57-16.41,16.81A16.57,16.57,0,0,0,39.34,55.73c5.39,0,10.9-2.8,13.28-7.68Z" transform="translate(-3.76 -3.68)"/></svg>

</div>

<section class="mainContent">

<header class="header animated">

<div class="header__title">

<h1>Cloud Construct

<br>

<span>Front-End Code Standards</span>

</h1>

</div>

<div class="header__updated">

<!-- /////////////////////////////////////////// -->

<!-- Previous Updates -->

<!-- Updated 5/8/18 by AC-->

<!-- Updated 11/27/17 by AC-->

<!-- End of previous Updates -->

<!-- /////////////////////////////////////////// -->

<!-- /////////////////////////////////////////// -->

<!-- Current Latest Update -->

<!-- Updated 5/23/18 by AC-->

<p>Updated 6/22/18</p>

<!-- End of current latest Update -->

<!-- /////////////////////////////////////////// -->

</div>

<canvas class="header__topSquare">

</canvas>

</header>

<!-- Example Topic -->

<!--

<!-- High Level Goals -->

<div class="topic animated" id="highLevelGoals">

<div class="topic__title">

<h2>Cloud Construct High-level Front-End Goals</h2>

</div>

<div class="topic__content">

<ol>

<li>Readability and ease of understanding code across all concerns</li>

<ul>

<li>HTML, CSS and JS. Always name objects/vars/files with clear, meaningful strings.</li>

<li>Be verbose and comment a LOT—let minification in the build process shrink build output to performant.</li>

<li>Drop TODO's liberally in all code.</li>

<li>Sign comments whenever possible for reference/trail.</li>

<li>Front-end source code should be UNDERSTANDABLE above all else. If you don't adhere to popular conventions for structure

of code, at least create clear conventions in a project, and stick with them consistently across the project.</li>

</ul>

<li>Organization of source files and build output into clear structure, that matches architecture of a web application or website architecture.</li>

<li>Adherence to the best practices outlined in this document, so that teams are sync'd and development is faster due to common practices.</li>

<li>Use of these basic principles across any technology stack—the basics are valid anywhere.</li>

</ol>

</div>

<!--<div class="topic__resources">

</div>

<!-- Performance Concerns -->

<div class="topic animated" id="performanceConcerns">

<div class="topic__title">

<h2>General Best Practices for Performance concerns</h2>

</div>

<div class="topic__content">

<h4>Assets</h4>

<p>Location of calls to assets in markup, for page load performance: follow HTML5 boilerplate standards for placement of elements that call assets.</p>

<h4>CDN of Assets</h4>

<p>Delivery by CDN should always be utilized to speed loading of assets. Most Cloud projects have all assets delivered by CDN. Make a smart choice on whether popular libraries like jQuery and Bootstrap should be loaded separately via popular CDN, to try to take advantage of browser caching. This may be a moot point for some JS frameworks that are opinionated about how they bundle assets. Just be mindful of what is going on in your project.</p>

<h4>Limit HTTP Requests</h4>

<p>Always attempt to limit http request count for any given page, by making smart decisions</p>

<h4>Utilize image sprites or inline, encoded images appropriately</h4>

<p>We want to limit HTTP requests needed for calling in image files. For small images like icons or logos, consider inline base-64 encoded data URI's for images in CSS or markup. Or consider using an image sprite for consolidating many images required in an application interface or website pages. Just don't let a page have many separate calls to load images to the page unless there's a good reason, like programmatically injected images or large images, or images that you WANT to be returned in SE results.</p>

<ul>

<li>We should utilize sprites at the least, for anything that’s not content imagery—all icons, page design elements and concerns that are not actual content imagery should probably be served up as base64-encoded SVG or PNG data-uri's, inline in markup or in CSS.</li>

<li>If icons abound, we are probably dealing with visual design based on an icon font, so include it once and then utilize it for icons all over the place (think FontAwesome, SymbolSet, Google Material Design icons).</li>

</ul>

</div>

<div class="topic__resources">

<h5>Resources:</h5>

<ul class="topic__resourcesList">

<li class="topic__resourcesListItem"><a href="https://html5boilerplate.com/" target="_blank">https://html5boilerplate.com/</a></li>

<li class="topic__resourcesListItem"><a href="https://www.sitepoint.com/introduction-html5-boilerplate/" target="_blank">https://www.sitepoint.com/introduction-html5-boilerplate/</a></li>

<li class="topic__resourcesListItem"><a href="https://gtmetrix.com/why-use-a-cdn.html" target="_blank">https://gtmetrix.com/why-use-a-cdn.html</a></li>

<li class="topic__resourcesListItem"><a href="https://www.giftofspeed.com/fewer-http-requests/" target="_blank">https://www.giftofspeed.com/fewer-http-requests/</a></li>

<li class="topic__resourcesListItem"><a href="http://duri.me/" target="_blank">http://duri.me/</a></li>

<li class="topic__resourcesListItem"><a href="http://www.grumpicon.com/" target="_blank">http://www.grumpicon.com/</a></li>

</ul>

</div>

</div>

<!-- Accessibility -->

<div class="topic animated" id="accessibility">

<div class="topic__title">

<h2>General Practices for Accessibility</h2>

</div>

<div class="topic__content">

<h4>Follow WCAG2 guidelines</h4>

<p>We should always deliver code to meet WCAG 2 requirements for accessibility at Level A. Ideally we should strive to meet Level AA, as well, and Level AAA as project agreements allow.</p>

<h4>This starts with the basics:</h4>

<ul>

<li>Always write semantic markup that adheres to a meaningful document structure, and cut markup to only that which is truly needed in order to accomplish this goal and allow for correct visual styling. See best practices in the <a href="#htmlMarkup">HTML</a> section.</li>

<li>Make all functionality available from a keyboard</li>

<ul>

<li>Tab order controlled</li>

<li>Use controls (and vet third-party ones) with keyboard accessibility</li>

<li>Prefer styling native controls over using JS-based adaptations, or use methods that retain native controls for machine-understandability while presenting visually different appearance.</li>

</ul>

<li>Leverage ARIA attributes to make generic elements have meaning as needed, and to allow accessibility of JS-based interactive, for screen readers. Look for ARIA in third-party tools leveraged for sites.</li>

<li>Note ARIA's utilization as described in the WCAG guidelines.</li>

<li>Validate markup to find those missing alt tags, etc...</li>

</ul>

</div>

<div class="topic__resources">

<h5>Resources:</h5>

<ul class="topic__resourcesList">

<li class="topic__resourcesListItem"><a href="https://www.w3.org/WAI/intro/wcag" target="_blank">https://www.w3.org/WAI/intro/wcag</a></li>

<li class="topic__resourcesListItem"><a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0" target="_blank">How to Meet WCAG 2 (Quick Reference)</a></li>

<li class="topic__resourcesListItem"><a href="https://www.wuhcag.com/wcag-checklist/" target="_blank">https://www.wuhcag.com/wcag-checklist/</a></li>

<li class="topic__resourcesListItem"><a href="https://www.w3.org/WAI/standards-guidelines/aria/" target="_blank">https://www.w3.org/WAI/standards-guidelines/aria/</a></li>

</ul>

</div>

</div>

<!-- Googlebot -->

<div class="topic animated" id="googlebot">

<div class="topic__title">

<h2>General Practices to Ensure Googlebot is Happy</h2>

</div>

<div class="topic__content">

<ul>

<li>Write valid, semantic markup that conveys meaning</li>

<li>Make sure the site is crawlable when necessary</li>

<li>Make sure that Googlebot can “see” all the site's pages</li>

<li>Make sure Googlebot can access all content and links completely </li>

<li>Make sure Googlebot can access all of my page resources</li>

<li>Basically, use robots.txt and sitemap.xml files per Google's recommendation, to tell the crawler what to do.</li>

</ul>

</div>

<div class="topic__resources">

<h5>Resources:</h5>

<ul class="topic__resourcesList">

<li class="topic__resourcesListItem"><a href="https://varvy.com/googlebot.html" target="_blank">https://varvy.com/googlebot.html</a></li>

<li class="topic__resourcesListItem"><a href="https://support.google.com/webmasters/answer/182072?hl=en" target="_blank">https://support.google.com/webmasters/answer/182072?hl=en</a></li>

<li class="topic__resourcesListItem"><a href="https://support.google.com/webmasters/answer/1061943?hl=en" target="_blank">https://support.google.com/webmasters/answer/1061943?hl=en</a></li>

</ul>

</div>

</div>

<!-- Image Content -->

<div class="topic animated" id="imageContent">

<div class="topic__title">

<h2>Image Content in Web Pages</h2>

</div>

<div class="topic__content">

<h4>File Size</h4>

<p>Appropriate compression-to-quality ratio to optimize file size, for delivery in less-than-ideal wireless networks circumstances—aim to make mobile experience fast.</p>

<p>Try to keep file sizes for images as low as possible given the above and balancing quality with speed. Think about trying to keep banner images in the 150-250KB range at 72dpi, unless you are optimizing for Retina/higher-density screens and/or large monitors.</p>

<h4>Retina-Ready Images</h4>

<p>client/project-specific utilization of Retina-ready images—we don't always do it, but if we do make sure you are following some accepted best practices for doing so. Start with Chris Coyier's advice: <a href="https://css-tricks.com/snippets/css/retina-display-media-query/">https://css-tricks.com/snippets/css/retina-display-media-query/</a></p>

<h4>Utilize image sprites or inline, encoded images appropriately</h4>

<p>We want to limit HTTP requests needed for calling in image files. For small images like icons or logos, consider inline base-64 encoded data URI's for images in CSS or markup. Or consider using an image sprite for consolidating many images required in an application interface or website pages. Just don't let a page have many separate calls to load images to the page unless there's a good reason, like programmatically injected images or large images, or images that you WANT to be returned in SE results.</p>

</div>

<div class="topic__resources">

<h5>Resources:</h5>

<ul class="topic__resourcesList">

<li class="topic__resourcesListItem"><a href="http://duri.me/" target="_blank">http://duri.me/</a></li>

<li class="topic__resourcesListItem"><a href="http://www.grumpicon.com/" target="_blank">http://www.grumpicon.com/</a></li>

<li class="topic__resourcesListItem"><a href="https://tinypng.com/" target="_blank">https://tinypng.com/</a></li>

<li class="topic__resourcesListItem"><a href="http://css.spritegen.com/" target="_blank">http://css.spritegen.com/</a></li>

<li class="topic__resourcesListItem"><a href="https://css-tricks.com/snippets/css/retina-display-media-query/">https://css-tricks.com/snippets/css/retina-display-media-query/</a></li>

</ul>

</div>

</div>

<!-- HTML Markup -->

<div class="topic animated" id="htmlMarkup">

<div class="topic__title">

<h2>HTML Markup</h2>

</div>

<div class="topic__content">

<ul>

<li>Write valid HTML5 and try to validate it if any doubt—great way to catch required attributes omitted or other issues that could adversely affect page crawlability/ranking or accessibility. *can test here: <a href="https://validator.w3.org/#validate_by_uri" target="_blank">https://validator.w3.org/#validate_by_uri</a></li>

<li>Indentation - Use of 4 space tabs not 2, for readability and standard formatting</li>

<li>Semantic, well-structured HTML5 markup (see the <a href="#semanticMarkup">Semantic Markup</a> area</li>

<ul>

<li>Pay attention to both what elements are being used and whether they match the W3C's spec'd purpose</li>

<li>Take full advantage of semantic HTML5 elements (section, article, aside, definition lists, and ordered/unordered lists, menu, nav, header, footer, etc...) to create a structured document, easily navigable by humans of any physical capability and robots as well (test with “HTML5 Outliner” browser add-on - <a href="https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=en)" target="_blank">https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=en)</a></li>

</ul>

<li>Minimalist — use as few elements as possible to accomplish a layout, always default to placing and positioning actual semantic elements instead of wrapper divs, etc, unless a rare design ask makes that impossible.</li>

<li>ID's vs class attributes for referencing DOM elements is the fastest way, by far, to look up a single element for attaching interactive behaviors, so consider that when you're writing an element to be addressed by JS scripting outside of a SPA like Angular or the like.</li>

<li>Write classnames to elements you know will be addressed with CSS using BEM syntax (see the <a href="#uiStyling">UI Styling area</a>)</li>

</ul>

</div>

<!--<div class="topic__resources">

</div>

<!-- Semantic Markup -->

<div class="topic animated" id="semanticMarkup">

<div class="topic__title">

<h2>Semantic Markup/ machine-readable markup structure</h2>

</div>

<div class="topic__content">

<h4>Definition</h4>

<p>Semantic markup is HTML code that leverages defined element types and meaningful structure, in order to present an HTML Document that is understandable in structure and content without visual decoration. It is a well-structured, hierarchical document of well-labeled content and/or tools.</p>

<ol>

<li>Semantic markup requires that HTML elements be used according to their intended purpose.</li>

<li>Semantic markup requires the separation of content and presentation.</li>

</ol>

<blockquote class="blockquote">When writing semantic markup, we use HTML tags to tell browsers something about the contents of the element. In semantic markup, tags are no longer just a way to get content to show up on a web page in a human-readable format. The tags themselves become a way to tell a machine (whether a browser, a computer, a smartphone, or another smart device) something about the meaning of the content. To write semantic markup, we must use HTML tags correctly so that our markup is both human-readable and machine-readable. <div class="blockquote__attribution">From <a href="https://html.com/semantic-markup/" target="_blank">https://html.com/semantic-markup/</a></div></blockquote>

<h4>Semantic HTML Elements</h4>

<p>A semantic element clearly describes its content to human and machine visitors, and developers alike.</p>

<p>Examples of non-semantic elements: &lt;div&gt; and &lt;span&gt;—tell nothing about their content.</p>

<p>Examples of semantic elements: &lt;form&gt;, &lt;table&gt;, &lt;article&gt;, &lt;aside&gt;, &lt;details&gt;, &lt;figcaption&gt;, &lt;figure&gt;, &lt;footer&gt;, &lt;header&gt;, &lt;main&gt;, &lt;mark&gt;, &lt;menu&gt;, &lt;nav&gt;, &lt;section&gt;, &lt;summary&gt;, &lt;time&gt;, &lt;dl&gt;, &lt;ul&gt;, &lt;ol&gt;, etc.—much more revealing of their purpose. </p>

</div>

<div class="topic__resources">

<h5>Resources:</h5>

<ul class="topic__resourcesList">

<li class="topic__resourcesListItem"><a href="https://html.com/semantic-markup/" target="_blank">https://html.com/semantic-markup/</a></li>

</ul>

</div>

</div>

<!-- UI Frameworks -->

<div class="topic animated" id="uiFrameworks">

<div class="topic__title">

<h2>UI Frameworks</h2>

</div>

<div class="topic__content">

<ul>

<li>Bootstrap — we almost always use it, but make a smart decision. we don't HAVE to use it. (Current version - 4)</li>

<li>Limit framework assets to custom builds that only include the exact modules needed.</li>

<ul>

<li>Start this way at the scaffolding of a project by beginning with a minimal build of bootstrap jquery, etc, then BUILD on it as is required during the unfolding of the front-end build.</li>

<li>Better to start clean and build than try to weed out what is not needed after a kitchen-sink start.</li>

</ul>

<li>Always think about utilizing frameworks to speed development, but temper if wise with performance concerns.</li>

</ul>

</div>

<!--<div class="topic__resources">

</div>

<!-- UI Styling -->

<div class="topic animated" id="uiStyling">

<div class="topic__title">

<h2>UI Styling</h2>

</div>

<div class="topic__content">

<ul>

<li>Again, readability and understandability</li>

<li>Attention to selector complexity — keep selectors light via BEM conventions and limiting nesting in SASS to ensure light selectors in the browser</li>

<li>ALWAYS utilize BEM basics for creating CSS classes</li>

<li>Always target CLASSES and not object ID's for styling</li>

<li>Use an “order-by-type” methodology as follows (order of the actual properties within the grouping isn't as important)</li>

<ul>

<li>Layout Properties (position, float, clear, display, overflow, z-index)</li>

<li>Box Model Properties (width, height, margin, padding)</li>

<li>Visual Properties (color, background, border, box-shadow)</li>

<li>Typography Properties (font-size, font-family, text-align, text-transform)</li>

<li>Misc Properties (cursor, animations)</li>

</ul>

<div class="topic__code">

<p class="topic__codeSnippet">code snippet</p>

<div class="topic__codeWrap">

<div class="topic__codeType">

<p>CSS/SCSS/LESS</p>

</div><pre class="topic__codePre"><code class="topic__codeContent">.selector {

// Layout Properties

position:

float:

display:

overflow(y, x):

z-index:

top:

left:

bottom:

right:

clear:

flex(basis, direction, flow, grow, shrink, wrap):

align(content, items, self):

justify-content:

order:

columns:

// Box Model Properties

width(max, min):

height(max, min):

margin(top, right, bottom, left):

padding(top, right, bottom, left):

// Visual Properties

color:

background(image, size, position, color):

border(top, right, bottom, left, width, style, color):

border-radius(top, right, bottom, left):

border-spacing:

border-collapse:

box-shadow:

visibility:

vertical-align:

// Type Properties

font-size:

font-family:

font-weight:

font-style:

text-align:

text-transform:

text-shadow:

text-decoration:

line-height:

letter-spacing:

white-space:

word-wrap:

word-break:

word-spacing:

list-style-type:

// Misc Properties

cursor:

@keyframes:

animation:

animation-delay:

animation-direction:

animation-duration:

animation-name:

transform(origin, style):

transition(property, duration, timing-function, delay):

content:

outline(color, offset, style, width):

pointer-events:

}

</code></pre>

</div>

</div>

</ul>

<h3>SASS or LESS, our go-to CSS pre-processors</h3><br/>

<p>We prefer SASS or LESS for their compatability with standard CSS syntax, and ease of use.</p>

<h4>Be Mindful of Output</h4>

<p>Some operations that may lead to conveniences in your SASS source code cause bloat in CSS output. When you use mixins or nest rules deeply, you can end up with bloat that could be eliminated by utilizing BEM naming conventions, keeping nesting of selectors light, and by using classes to decorate similar elements directly, instead of including mixins as sub-rules of rule definitions in the source code to share styling across many elements. Sometimes you have to have redundant output, but be mindful of what your SCSS is spitting out.</p>

<h4>Vendor Prefixes</h4>

<p>We should use auto-prefixer as a rule, to handle deprecation of vendor prefixes.</p>

<h4>Inline Styling</h4>

<p>Don't ever do it unless you have a dynamic UI component adding styles to an element on the fly that CAN'T be put into a dynamically added rule that resides fully in a stylesheet</p>

<h4>Comments</h4>

<p>Use of comments to separate Sections and Parts—again, understandability and verbose commenting as an overarching theme</p>

</div>

<div class="topic__resources">

<h5>Resources:</h5>

<ul class="topic__resourcesList">

<li class="topic__resourcesListItem"><a href="http://getbootstrap.com/" target="_blank">http://getbootstrap.com/</a></li>

<li class="topic__resourcesListItem"><a href="https://www.w3schools.com/css/css3_intro.asp" target="_blank">https://www.w3schools.com/css/css3_intro.asp</a></li>

<li class="topic__resourcesListItem"><a href="http://getbem.com/naming/" target="_blank">http://getbem.com/naming/</a></li>

<li class="topic__resourcesListItem"><a href="http://lesscss.org/" target="_blank">http://lesscss.org/</a></li>

<li class="topic__resourcesListItem"><a href="http://sass-lang.com/" target="_blank">http://sass-lang.com/</a></li>

<li class="topic__resourcesListItem"><a href="https://autoprefixer.github.io/" target="_blank">https://autoprefixer.github.io/</a></li>

<li class="topic__resourcesListItem"><a href="https://www.thoughtco.com/css-vendor-prefixes-3466867" target="_blank">https://www.thoughtco.com/css-vendor-prefixes-3466867</a></li>

<li class="topic__resourcesListItem"><a href="https://caniuse.com/" target="_blank">https://caniuse.com/</a></li>

<li class="topic__resourcesListItem"><a href="http://css3generator.com/" target="_blank">http://css3generator.com/</a></li>

</ul>

</div>

</div>

<!-- Jquery Use -->

<div class="topic animated" id="jqueryUse">

<div class="topic__title">

<h2>JS and jQuery</h2>

<p>For one-off interactive functionality outside of a framework like Angular, jQuery is super useful. But some things to keep in mind:

</div>

<div class="topic__content">

<ul>

<li>Go easy on the creation of jquery objects, each $(...) brings a lot of overhead with it. Create an object related to your widget and then use jQuery's find or children methods to select child elements of that object and deal with them.</li>

<li>If you can, just use vanilla javascript to grab your elements and change their properties directly without jQuery. For a lot of things it is not at all harder.</li>

</ul>

</div>

<div class="topic__resources">

<h5>Resources:</h5>

<ul class="topic__resourcesList">

<li class="topic__resourcesListItem"><a href="https://blog.codingbox.io/10-jquery-performance-tips-tricks-872f170387cc" target="_blank">https://blog.codingbox.io/10-jquery-performance-tips-tricks-872f170387cc</a></li>

</ul>

</div>

</div>

<!-- Javascript

<!-- Javascript Frameworks

<!-- Component Based Architecture -->

<div class="topic animated" id="componentBasedArchitecture">

<div class="topic__title">

<h2>Component-based, Modular Client-side Concerns</h2>

<p>We should be architecting all of our code concerns in as modular fashion as possible. Best practices for modular application development should be followed in our use of SASS and templates.

</div>

<div class="topic__content">

<ul>

<li>Keep CSS modularized into rules-per-area, or rules-per-component. Locating these small files either with their template concerns or in a mirrored structure to that of the templates makes things easy to deal with. A well-organized structure of well-titled directories with small, modularized CSS concerns and related templates inside is an example of a useful structure that we should leverage.</li>

<li>Modular concerns should live in a single location in the architecture and be namespaced/encapsulated from conflict with outside concerns—both for CSS and JS concerns.</li>

</ul>

</div>

<!--<div class="topic__resources">

</div>

<!-- Front-end Build Tooling -->

<div class="topic animated" id="buildTooling">

<div class="topic__title">

<h2>Front-end Build Tooling</h2>

</div>

<div class="topic__content">

<ul>

<li>Gulp is our jam</li>

<li>Take a look at the source code for this standards doc, and see how gulp builds it and serves it up, really easily.</li>

<li>Learn enough gulp to be able to spin up a server and compile a simple architecture of CSS, JS and HTML into output to the browser—super useful for crafting living style guides, things like this. Exploring layouts and techniques.</li>

</ul>

</div>

<div class="topic__resources">

<h5>Resources:</h5>

<ul class="topic__resourcesList">

<li class="topic__resourcesListItem"><a href="https://gulpjs.com/" target="_blank">https://gulpjs.com/</a></li>

<li class="topic__resourcesListItem"><a href="https://www.npmjs.com/" target="_blank">https://www.npmjs.com/</a></li>

</ul>

</div>

</div>

<!-- Version Control

<!-- Responsive Web Design

<!-- About Cloud -->

<div class="topic animated" id="aboutCloud">

<div class="topic__title">

<h2>About Cloud Construct</h2>

</div>

<div class="topic__content">

<p>Cloud Construct is a Boston-based web design and development firm that builds web applications, designs responsive and mobile-optimized websites, and creates software solutions that enable companies to do more, faster.</p>

<h4>Design</h4>

<p>We align user requirements and business objectives into user experience and visual design, and create compelling design across all digital interfaces.</p>

<h4>Architect</h4>

<p>Whether working on a new site or updating an existing one, our approach is to build smart the first time, with a structure that supports growth and future enhancements with ease.</p>

<h4>Build</h4>

<p>The development team draws on years of experience and stays up-to-date on the latest technologies. Our expertise is in engineering site features and functionality, and in creating structures that will provide long-term stability and security.</p>

</div>

</div>

</section>

<aside class="navigationSidebar">

<div class="navigationSidebar__logo">

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72.36 97.65"><defs><style>.cls-1{fill:#6d6e71;}.cls-2{fill:#8c8e90;}.cls-3{fill:#adafb2;}.cls-4{fill:#dedfe0;}.cls-5{fill:#fff;}.cls-6{fill:#e31837;}</style></defs><title>cc_logo_logotype_outlines_outlines_pms186</title><rect class="cls-1" width="23.48" height="23.48"/><rect class="cls-2" x="23.48" width="23.48" height="23.48"/><rect class="cls-3" x="46.97" width="23.48" height="23.48"/><rect class="cls-2" y="23.48" width="23.48" height="23.49"/><rect class="cls-3" x="23.48" y="23.48" width="23.48" height="23.49"/><rect class="cls-4" x="46.97" y="23.48" width="23.48" height="23.49"/><rect class="cls-3" y="46.97" width="23.48" height="23.48"/><rect class="cls-4" x="23.48" y="46.97" width="23.48" height="23.48"/><rect class="cls-5" x="46.97" y="46.97" width="23.48" height="23.48"/><path class="cls-6" d="M66.74,48.05C63.32,59.78,51.38,68.19,39.23,68.19A29.21,29.21,0,0,1,10,39C10,23.66,22.11,9.64,37.88,9.64a21.33,21.33,0,0,1,15.89,7V11.31h10.9V29.78H52.83A16.87,16.87,0,0,0,39,22.21c-9.45,0-16.41,7.57-16.41,16.81A16.57,16.57,0,0,0,39.34,55.73c5.39,0,10.9-2.8,13.28-7.68Z" transform="translate(-3.76 -3.68)"/><path class="cls-3" d="M18.42,88.18a7.39,7.39,0,1,1-7.32-9.75,5.41,5.41,0,0,1,4,1.77V78.86H17.9v4.68h-3a4.27,4.27,0,0,0-3.5-1.92,4.16,4.16,0,0,0-4.16,4.27,4.21,4.21,0,0,0,4.24,4.24,3.74,3.74,0,0,0,3.37-1.95Z" transform="translate(-3.76 -3.68)"/><path class="cls-3" d="M24.59,89.92H26.4v3h-7v-3h1.95V77.12H19.56v-3h5Z" transform="translate(-3.76 -3.68)"/><path class="cls-3" d="M27.19,85.83a7.38,7.38,0,1,1,7.35,7.46A7.42,7.42,0,0,1,27.19,85.83Zm11.59.06a4.22,4.22,0,1,0-4.24,4.24A4.26,4.26,0,0,0,38.78,85.89Z" transform="translate(-3.76 -3.68)"/><path class="cls-3" d="M56.64,89.92h1.81v3H53.69V91.18a5.15,5.15,0,0,1-4.24,2.11,5.05,5.05,0,0,1-3.9-1.79,5.84,5.84,0,0,1-1.24-4.08V81.86H42.49v-3h5v7.61a4.52,4.52,0,0,0,.56,2.63,2.72,2.72,0,0,0,2.37,1.21,3.11,3.11,0,0,0,2.37-1.16,4.45,4.45,0,0,0,.6-2.76V81.86H51.61v-3h5Z" transform="translate(-3.76 -3.68)"/><path class="cls-3" d="M71.09,90.81a5.3,5.3,0,0,1-4.6,2.32,7.26,7.26,0,0,1,0-14.51,5.84,5.84,0,0,1,4.63,2.29V77.12H69.25v-3h5.06V89.92h1.81v3h-5Zm.08-5a4.25,4.25,0,1,0-4.26,4.35A4.3,4.3,0,0,0,71.17,85.83Z" transform="translate(-3.76 -3.68)"/><path class="cls-6" d="M11.42,99.12a3.38,3.38,0,0,1-3.25,2.21,3.56,3.56,0,1,1,0-7.11,3.49,3.49,0,0,1,3.27,2.25H10.27a2.42,2.42,0,0,0-2.11-1.29,2.6,2.6,0,0,0,0,5.19,2.47,2.47,0,0,0,2.11-1.25Z" transform="translate(-3.76 -3.68)"/><path class="cls-6" d="M13.15,97.81a3.59,3.59,0,1,1,3.58,3.52,3.52,3.52,0,0,1-3.58-3.52Zm1.09,0a2.5,2.5,0,1,0,2.51-2.59,2.51,2.51,0,0,0-2.51,2.59Z" transform="translate(-3.76 -3.68)"/><path class="cls-6" d="M27.32,99.56l0-5.21h1.05v6.85h-1L23.77,96l0,5.22H22.74V94.35h1Z" transform="translate(-3.76 -3.68)"/><path class="cls-6" d="M32.64,99.18a1.16,1.16,0,0,0,1.15,1.23,1.12,1.12,0,0,0,1.14-1.09c0-.77-.65-.94-1.52-1.27-.54-.17-1.73-.57-1.73-1.86a2,2,0,0,1,2.15-2,1.94,1.94,0,0,1,2.07,1.89H34.82a1,1,0,0,0-1-1,1,1,0,0,0-1,1c0,.66.51.83,1.61,1.24.85.36,1.65.8,1.65,1.91a2,2,0,0,1-2.21,2.07,2.08,2.08,0,0,1-2.26-2.15Z" transform="translate(-3.76 -3.68)"/><path class="cls-6" d="M40.24,95.31H38.66v-1H42.9v1H41.33v5.89H40.24Z" transform="translate(-3.76 -3.68)"/><path class="cls-6" d="M45.91,94.35h1.94a3.44,3.44,0,0,1,2,.4,2.2,2.2,0,0,1,.9,1.85,2.24,2.24,0,0,1-.38,1.31,1.88,1.88,0,0,1-1.32.75l1.6,2.54H49.49L47.6,98.11h.25a2.21,2.21,0,0,0,1.37-.3,1.46,1.46,0,0,0,.47-1.12,1.36,1.36,0,0,0-.59-1.15,2.09,2.09,0,0,0-1.16-.23H47v5.89H45.91Z" transform="translate(-3.76 -3.68)"/><path class="cls-6" d="M55.21,94.35v4.28a2,2,0,0,0,.26,1.19,1.21,1.21,0,0,0,1.05.55,1.18,1.18,0,0,0,1-.53,2,2,0,0,0,.25-1.21V94.35H58.9v4.28a2.44,2.44,0,0,1-.74,2.1,2.36,2.36,0,0,1-1.63.6,2.33,2.33,0,0,1-2.41-2.7V94.35Z" transform="translate(-3.76 -3.68)"/><path class="cls-6" d="M68.65,99.12a3.39,3.39,0,0,1-3.25,2.21,3.56,3.56,0,1,1,0-7.11,3.47,3.47,0,0,1,3.26,2.25H67.5a2.45,2.45,0,0,0-2.12-1.29,2.6,2.6,0,0,0,0,5.19,2.47,2.47,0,0,0,2.11-1.25Z" transform="translate(-3.76 -3.68)"/><path class="cls-6" d="M72.52,95.31H70.94v-1h4.24v1H73.61v5.89H72.52Z" transform="translate(-3.76 -3.68)"/></svg>

</div>

<div class="navigationSidebar__toggle animated">

<div id="menu-toggle">

<div id="hamburger">

<span></span>

<span></span>

<span></span>

</div>

<div id="cross">

<span></span>

<span></span>

</div>

</div>

<div class="navigationSidebar__toggleLogo">

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70.45 70.45"><title>cc_logo</title><rect style="fill:#6d6e71;" width="23.48" height="23.48"/><rect style="fill:#8c8e90;" x="23.48" width="23.48" height="23.48"/><rect style="fill:#adafb2;" x="46.97" width="23.48" height="23.48"/><rect style="fill:#8c8e90;" y="23.48" width="23.48" height="23.49"/><rect style="fill:#adafb2;" x="23.48" y="23.48" width="23.48" height="23.49"/><rect style="fill:#dedfe0;" x="46.97" y="23.48" width="23.48" height="23.49"/><rect style="fill:#adafb2;" y="46.97" width="23.48" height="23.48"/><rect style="fill:#dedfe0;" x="23.48" y="46.97" width="23.48" height="23.48"/><rect style="fill:#fff;" x="46.97" y="46.97" width="23.48" height="23.48"/><path style="fill:#e31837;" d="M66.74,48.05C63.32,59.78,51.38,68.19,39.23,68.19A29.21,29.21,0,0,1,10,39C10,23.66,22.11,9.64,37.88,9.64a21.33,21.33,0,0,1,15.89,7V11.31h10.9V29.78H52.83A16.87,16.87,0,0,0,39,22.21c-9.45,0-16.41,7.57-16.41,16.81A16.57,16.57,0,0,0,39.34,55.73c5.39,0,10.9-2.8,13.28-7.68Z" transform="translate(-3.76 -3.68)"/></svg>

</div>

</div>

<nav class="navigationSidebar__nav navbar animated">

<h2>Topics</h2>

<ul class="navigationSidebar__navList nav navbar-nav">

<li class="navigationSidebar__navListItem"><a class="navigationSidebar__navListItemLink" href="#highLevelGoals">High Level Goals</a></li>

<li class="navigationSidebar__navListItem"><a class="navigationSidebar__navListItemLink" href="#performanceConcerns">Performance Concerns</a></li>

<li class="navigationSidebar__navListItem"><a class="navigationSidebar__navListItemLink" href="#accessibility">Accessibility</a></li>

<li class="navigationSidebar__navListItem"><a class="navigationSidebar__navListItemLink" href="#googlebot">Googlebot</a></li>

<li class="navigationSidebar__navListItem"><a class="navigationSidebar__navListItemLink" href="#imageContent">Image Content</a></li>

<li class="navigationSidebar__navListItem"><a class="navigationSidebar__navListItemLink" href="#htmlMarkup">HTML Markup</a></li>

<li class="navigationSidebar__navListItem"><a class="navigationSidebar__navListItemLink" href="#semanticMarkup">Semantic Markup</a></li>

<li class="navigationSidebar__navListItem"><a class="navigationSidebar__navListItemLink" href="#uiFrameworks">UI Frameworks</a></li>

<li class="navigationSidebar__navListItem"><a class="navigationSidebar__navListItemLink" href="#uiStyling">UI Styling</a></li>

<li class="navigationSidebar__navListItem"><a class="navigationSidebar__navListItemLink" href="#jqueryUse">JS and jQuery</a></li>

--> <li class="navigationSidebar__navListItem"><a class="navigationSidebar__navListItemLink" href="#componentBasedArchitecture">Component-Based Architecture</a></li>

<li class="navigationSidebar__navListItem"><a class="navigationSidebar__navListItemLink" href="#buildTooling">Build Tooling</a></li>

<li class="navigationSidebar__navListItem"><a class="navigationSidebar__navListItemLink" href="#aboutCloud">About Cloud</a></li>

</ul>

<canvas class="navigationSidebar__navSquare">

</canvas>

</nav>

</aside>

<footer class="footer">

<a class="footer__logo" href="http://www.cloudconstruct.com" target="_blank">

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70.45 70.45"><title>cc_logo</title><rect style="fill:#6d6e71;" width="23.48" height="23.48"/><rect style="fill:#8c8e90;" x="23.48" width="23.48" height="23.48"/><rect style="fill:#adafb2;" x="46.97" width="23.48" height="23.48"/><rect style="fill:#8c8e90;" y="23.48" width="23.48" height="23.49"/><rect style="fill:#adafb2;" x="23.48" y="23.48" width="23.48" height="23.49"/><rect style="fill:#dedfe0;" x="46.97" y="23.48" width="23.48" height="23.49"/><rect style="fill:#adafb2;" y="46.97" width="23.48" height="23.48"/><rect style="fill:#dedfe0;" x="23.48" y="46.97" width="23.48" height="23.48"/><rect style="fill:#fff;" x="46.97" y="46.97" width="23.48" height="23.48"/><path style="fill:#e31837;" d="M66.74,48.05C63.32,59.78,51.38,68.19,39.23,68.19A29.21,29.21,0,0,1,10,39C10,23.66,22.11,9.64,37.88,9.64a21.33,21.33,0,0,1,15.89,7V11.31h10.9V29.78H52.83A16.87,16.87,0,0,0,39,22.21c-9.45,0-16.41,7.57-16.41,16.81A16.57,16.57,0,0,0,39.34,55.73c5.39,0,10.9-2.8,13.28-7.68Z" transform="translate(-3.76 -3.68)"/></svg>

<br>Go to Cloud Construct

</a>

<div class="footer__copyright">

<p>&copy; 2018 Cloud Construct. All Rights Reserved</p>

</div>

</footer>

</div>

<!-- JS -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Custom JS -->

<script src="Assets/dist/js/main.js" type="text/javascript"></script>