Front-End Standards

standards.md

HTML

General

• Tabs for indention.
• XHTML style self closing tags (ex. <br />)

Form Elements

• Use wrapper div as the standard container with a class of input-wrap.
• Classes for field stats, ex.required and error, are applied to the wrapper, not the input. This enables styling of labels with required icons or colors.
• Groups of checkboxes and radio buttons should be in a single div.input-wrap, each with their own wrapping div.input-wrap-inner.
• The input type should be added as a class name to the wrapper. This allows styling of labels in relation to the field type. For example, the main label for a set of radio buttons might be bold to mimic a section header.

Note: This markup is verbose and can often seem excessive. But for consistency's and flexibility's sake, it is worth the extra overhead. Also, since the FormHandeler or UniversalForm should handel rendering this HTML, typing it manually should rarely be necessary.

<div class="input-wrap text required">
	<label for="input-name">Name</label>
	<input id="input-name" name="name" type="text" />
</div>

<div class="input-wrap textarea required">
	<label for="input-comment">Comment</label>
	<textarea id="input-comment" name="comment"></textarea>
</div>

<div class="input-wrap select">
	<label for="input-age">Age</label>
	<select id="input-age" name="age">
		<option>Option</option>
	</select>
</div>

<!-- Same for radios -->
<div class="input-wrap checkbox">
	<div class="input-wrap-inner">
		<label for="input-check_1">Check 1</label>
		<input id="input-check_1" name="check" value="1" />
	</div>
	<div class="input-wrap-inner">
		<label for="input-check_2">Check 2</label>
		<input id="input-check_2" name="check" value="2" />
	</div>
</div>

Navigation Markup

• Id placed on the outter most container, so that selectors for the nav can all be namespaced together.
• Active classes, active, should be applied to the li element so that both the li and a can be targeted for styling.
• Sub nav should be wrapped inside the containing li but outside the anchor and follow the same pattern as the outer nav.

Navigation menus should be in the following format:

<nav id="page-nav">
	<ul>
		<li><a href="/nav-1">Nav 1</a></li>
		<li class="active"><a href="/nav-2">Nav 2</a></li>
		<li><a href="/nav-3">Nav 3</a>
			<ul>
				<li><a href="/nav-3/sub-1">Sub Nav 1</a></li>
				<li><a href="/nav-3/sub-2">Sub Nav 2</a></li>
				<li><a href="/nav-3/sub-3">Sub Nav 3</a></li>
			</ul>
		</li>
	</ul>
</nav>

CSS/SCSS

General

• Single property or selector per line. Makes it much easier read and to see what's actually changed when looking at a diff. The only exception is in some of the base styles where all the headers, block elements or other single tag selectors.
• Space after colon.
• Use dashes as word separator.
• All lowercase, except for font-family names, this includes hex values.

#page-header {
	width: 100%;
	margin-bottom: 20px;
}
#form-contact {
	float: right;
	width: 442px;
	padding-right: 50px;
	margin-bottom: 30px;
}
select:focus,
input:focus,
textarea:focus {
	outline: none;
}
.input-wrap {
	overflow: hidden;
	position: relative;
	margin-bottom: 8px;
}
.input-wrap label {
	margin-right: 5px;
	font-family: 'Georgia', Times New Roman, serif;
	color: #ff9000;
}

@Font-Face declarations

@font-face {
	font-family: 'MuseoSans';
	src: url('/public/fonts/museo300-regular-webfont.eot');
	src: url('/public/fonts/museo300-regular-webfont.eot?#iefix') format('embedded-opentype'),
	     url('/public/fonts/museo300-regular-webfont.woff') format('woff'),
	     url('/public/fonts/museo300-regular-webfont.ttf') format('truetype'),
	     url('/public/fonts/museo300-regular-webfont.svg#museo_300regular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'MuseoSans';
	src: url('/public/fonts/museo300-bold-webfont.eot');
	src: url('/public/fonts/museo300-bold-webfont.eot?#iefix') format('embedded-opentype'),
	     url('/public/fonts/museo300-bold-webfont.woff') format('woff'),
	     url('/public/fonts/museo300-bold-webfont.ttf') format('truetype'),
	     url('/public/fonts/museo300-bold-webfont.svg#museo_300regular') format('svg');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'MuseoSans';
	src: url('/public/fonts/museo300-italic-webfont.eot');
	src: url('/public/fonts/museo300-italic-webfont.eot?#iefix') format('embedded-opentype'),
	     url('/public/fonts/museo300-italic-webfont.woff') format('woff'),
	     url('/public/fonts/museo300-italic-webfont.ttf') format('truetype'),
	     url('/public/fonts/museo300-italic-webfont.svg#museo_300regular') format('svg');
	font-weight: normal;
	font-style: italic;
}

Sass

• Use the CSS syntax, not the Indented Syntax.
• List "regular" rules first, @extend rules second, then @include rules and lastly nested rules.
• Separate different types of rules with blank new lines.
• Use mixins for all vendor prefixed rules (ex. border-radius(5px);, box-shadow(1px 1px 5px 0 #ccc);.
• All included partial files should start with an underscore (ex. _module.scss).
• Nest media queries in with the rules to which they apply. These should go above nested selectors, but below the standard rules.

#page-nav {
    background: $grey;
    margin-bottom: 1em;

    @extend .nav-menu;
    @include border-radius($baseBorderRadius);

    li {
        /* ...More Rules... */
    }
}

JAVASCRIPT

General

• The eval function is generally a security risk. DO NOT USE IT.
• Comma at the end of the line
• Remember to always declare variables with the var keyword to avoid globals.
• Variables with a shared scope should all be declared with a single var statement.
• Strict equality checks (===) should be used in favor of == wherever possible. Especially for typeof checks or null comparisons.
• Use {} instead of new Object(). Use [] instead of new Array().
• Use $.on for most event binding. Never use $.live. Pre v1.7 use $.delegate.

var a,
    b = 'something',
    c = {};

function doSomethingToElement(el) {
    var $el = $(el);
    if (typeof $el !== 'undefined') {
        $el.fadeOut();
    }
}

$('.el').on('click', function() {
    doSomething(this);
});

Control Structures

• if, try, etc...
• Include one space between the control keyword and opening parenthesis.
• Always use curly braces, they increase readability and help prevent logic errors when new lines are added. The only exception is a single line if (condition) return;, generally used for error checking.
• 1TBS

if (condition1 && condition2) {
	...
} else if (condition1 || condition2) {
	...
} else {
	...
}

try {
	...
} catch (expression) {
	...
}

while (condition) {
	...
}

for (var i = 0; i < 100; i++) {
	...
}

Naming Conventions

• Variable names are camelCase
• Constructor function starts with cap
• jQuery objects should be prefixed with a $ (ex. $el = $('.selector'))

var fooFunction = function() {
	...
}

var productId = $(this).data('id');

var bob = new Person();