-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
89 lines (71 loc) · 3.25 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<html>
<head>
<title>Coding Guidelines</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<h1>Coding Guidelines</h1>
</div>
<div class="row">
<h2> General Guidelines</h2>
<ol>
<li>All file names for HTML, CSS, JS needs to be in lowercase, use hyphens where necessary</li>
<li>JS Function names need to be in camelCase and should explain what the function is doing.</li>
<li> CSS Class preferably need to be in lower case using hyphens if necessary, but we can live with camelCase too</li>
<li>Striclty follow DRY ( Do not Repeat Yourself). If you find yourself copying and pasting code from one function/class to another, You are doing it WRONG </li>
<li>No 2 functions or classes should have 50% or more similar code</li>
<li> </li>
</ol>
</div>
<hr>
<div class="row">
<h2>HTML</h2>
<ol>
<li>Keep your DOM as minimal as possible, everything doesn't need to be in a div, eg: you can directly style an <a > tag, there is no need to put that into a div or span tag.
</li>
<li>Every HTML page should have one and only one H1 tag</li>
<li>You cannot have H2 or H3 above an H1 tag they need to be sequental</li>
<li>Don't you even dare write inline CSS</li>
<li> Validate your HTMLs using W3C valiator, and get your error count to as minimum as possible.</li>
</ol>
</div>
<hr>
<div class="row">
<h2>JavaScript / jQuery</h2>
<ol>
<li>ALWAYS Call Libraries like jQuery, bootstrap, Angular from a CDN. Call them from here <a href="https://developers.google.com/speed/libraries/devguide" target="_blank" >https://developers.google.com/speed/libraries/devguide</a> </li>
<li> Never EVER EVER write your code directly into a jquery or any other JS library file. This will wipe out the code when you upgrade the library & you'll also get a lot of bad Karma </li>
<li> Do not create global variables, this will lead to memory leaks and browser crashing.
</li>
<li>A single Functions cannot have more than 50 lines of code. </li>
<li> Use Switch Cases instead of if else whereever possible.</li>
</ol>
</div>
<hr>
<div class="row">
<h2>CSS</h2>
<ol>
<li> Follow a Modular Structure for your CSS, refer to <a href="http://smacss.com/" target="_blank" >SMACSS </a>from Jonathan Snook</li>
<li>Place all the Global CSS classes towards the top of the file clearly commented where it starts and ends or ideally place them in a seperate file</li>
<li>Avoid writing generalized CSS that modifiy DOM or need to iterate through DOM, it causes the pages to load slower.</li>
</ol>
</div>
<hr>
<div class="row">
<h2>Bootstrap</h2>
<ol>
<li> Use the Variables.less to define all the variables you'll need</li>
<li>In the Bootstrap.less file, Include only the necessary less files and comment out the ones you dont need.
<li> For wirting custom CSS and Less classes create a file called custom.less and write all your code </li>
<li> Use Mixins to contain all browser prefixes</li>
<li> Use Variables for defineing all the color hex codes</li>
<li> Use the + or - operators to get lighter or darker shade of a color ideal to be used for mouseover effects, shadows, glow effects etc.</li>
</li>
</ol>
</div>
</div>
</body>
</html>