chambersjudd.github.com/index.html at master · chambersjudd/chambersjudd.github.com · GitHub

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
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Styleguide by chambersjudd</title>

    <link rel="stylesheet" href="stylesheets/styles.css">
    <link rel="stylesheet" href="stylesheets/pygment_trac.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>Styleguide</h1>
        <p>General guidelines for Chambers Judd web projects</p>


        <p class="view"><a href="https://github.com/chambersjudd">View My GitHub Profile</a></p>

      </header>
      <section>
        <p>This is an overview of the tools and techniques we use project to project. It will change over time and we're not married to it so think of it as guidelines rather than gospel.</p>

<hr><h4>General</h4>

<ul>
<li>Assets should be an assets folder in the root, i.e.
/assets/css
/assets/js
/assets/img</li>
<li>When editing code, use spaces not tabs</li>
<li>If in doubt, write a comment - assume you won't be there when someone else opens the file</li>
</ul><hr><h4>CSS</h4>

<ul>
<li>Written using SASS in <a href="http://smacss.com/book/categorizing">SMACCS structure</a>.</li>
<li>Comments should be written using <a href="https://github.com/kneath/kss">KSS syntax</a>
</li>
<li>Comments should be ruby (i.e. // not /* )</li>
<li>Use <a href="http:Bourbon.io">Bourbon</a> mixins</li>
<li>Use classes not ID's wherever possible</li>
<li>Give JS only classes a js- prefix</li>
</ul><hr><h4>JS</h4>

<ul>
<li>All JS should be tested against JS Lint. There is a <a href="https://github.com/fbzhong/sublime-jslint">Sublime Text plugin</a> which let's you do this as you go. </li>
<li>Minify JS prior to production (or on the fly with a Sublime Text Build Task) using Uglify JS</li>
<li>Write code in modules. <a href="http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/">CSS Tricks module pattern</a> is a good example.</li>
</ul><hr><h4>Images</h4>

<ul>
<li>Use sprites where possible - <a href="http://www.spritecow.com/">Spritecow</a> is a useful tool for this</li>
<li>Minify large images using imageoptim prior to production</li>
</ul><hr><h4>Git</h4>

<p><strong>Always pull a repository before you start working to check it's up to date</strong></p>

<ul>
<li><p>Please work on branches for a specific feature, then when it's complete merge into the 'staging' branch (as opposed to master). Name branches in the style navigation_feature. Overview of the idea at <a href="http://blog.teamtreehouse.com/our-simple-git-workflow">http://blog.teamtreehouse.com/our-simple-git-workflow</a></p></li>
<li><p>Create tags for releases. These should be preceded by the date and include a description e.g. 20120101-site-launch</p></li>
</ul><hr><h4>Databases</h4>

<ul>
<li>Databases should be named with the tech as a prefix, then the project shortname (e.g. for an expressionengine site it would be 'ee_projectname')</li>
<li>Database exports should be gzipped where possible and exported to a _database folder in the root of the project</li>
<li>Exported DB dumps should be prefixed by the date and include the initials of the person working on it - e.g. 20120101-JC-ee_projectname.sql.gz</li>
</ul>
      </section>
      <footer>
        <p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
      </footer>
    </div>
    <script src="javascripts/scale.fix.js"></script>

  </body>
</html>