boom

.ruby-version

@@ -0,0 +1 @@
+1.9.3-p448

_config.yml

@@ -1,7 +1,7 @@
-name: "Code Guide"
-description: "Standards for developing flexible, durable, and sustainable HTML and CSS."
-url: http://mdo.github.com/code-guide
+name:          Code Guide by @mdo
+description:   Standards for developing flexible, durable, and sustainable HTML and CSS.
+url:           http://mdo.github.com/code-guide
 
-markdown:  rdiscount
-permalink: pretty
-pygments:  true
+markdown:      rdiscount
+permalink:     pretty
+pygments:      true

_includes/css/class-names.css

@@ -0,0 +1,9 @@
+/* Bad example */
+.t { ... }
+.red { ... }
+.header { ... }
+
+/* Good example */
+.tweet { ... }
+.important { ... }
+.tweet-header { ... }

_includes/css/comments.css

@@ -0,0 +1,11 @@
+/* Bad example */
+/* Modal header */
+.modal-header {
+  ...
+}
+
+/* Good example */
+/* Wrapping element for .modal-title and .modal-close */
+.modal-header {
+  ...
+}

_includes/css/declaration-order.css

@@ -0,0 +1,29 @@
+.declaration-order {
+  /* Positioning */
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+
+  /* Box-model */
+  display: block;
+  float: right;
+  width: 100px;
+  height: 100px;
+
+  /* Typography */
+  font: normal 13px "Helvetica Neue", sans-serif;
+  line-height: 1.5;
+  color: #333;
+  text-align: center;
+
+  /* Visual */
+  background-color: #f5f5f5;
+  border: 1px solid #e5e5e5;
+  border-radius: 3px;
+
+  /* Misc */
+  opacity: 1;
+}

_includes/css/media-queries.css

@@ -0,0 +1,10 @@
+.element { ... }
+.element-avatar { ... }
+.element-selected { ... }
+
+@media (min-width: 480px) {
+  element { ... }
+	  .element-avatar { ... }
+	  .element-selected { ... }
+	}
+}

_includes/css/nesting.scss

@@ -0,0 +1,9 @@
+// Without nesting
+.table > thead > tr > th { … }
+.table > thead > tr > td { … }
+
+// With nesting
+.table > thead > tr {
+  > th { … }
+  > td { … }
+}

_includes/css/prefixed-properties.css

@@ -0,0 +1,5 @@
+/* Prefixed properties */
+.selector {
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
+          box-shadow: 0 1px 2px rgba(0,0,0,.15);
+}

_includes/css/selectors.css

@@ -0,0 +1,9 @@
+/* Bad example */
+span { ... }
+.page-container #stream .stream-item .tweet .tweet-header .username { ... }
+.avatar { ... }
+
+/* Good example */
+.avatar { ... }
+.tweet-header .username { ... }
+.tweet .avatar { ... }

_includes/css/single-declarations.css

@@ -0,0 +1,14 @@
+/* Single declarations */
+.span1 { width: 60px; }
+.span2 { width: 140px; }
+.span3 { width: 220px; }
+
+.sprite {
+  display: inline-block;
+  width: 16px;
+  height: 15px;
+  background-image: url(../img/sprite.png);
+}
+.icon           { background-position: 0 0; }
+.icon-home      { background-position: 0 -20px; }
+.icon-account   { background-position: 0 -40px; }

_includes/css/syntax.css

@@ -0,0 +1,17 @@
+/* Bad CSS */
+.selector, .selector-secondary, .selector[type=text] {
+  padding:15px;
+  margin:0px 0px 15px;
+  background-color:rgba(0, 0, 0, 0.5);
+  box-shadow:0 1px 2px #CCC,inset 0 1px 0 #FFFFFF
+}
+
+/* Good CSS */
+.selector,
+.selector-secondary,
+.selector[type="text"] {
+  padding: 15px;
+  margin: 0 0 15px;
+  background-color: rgba(0,0,0,.5);
+  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
+}

_includes/font.css

@@ -0,0 +1,27 @@
+@font-face {
+  font-family: 'fontello';
+  src: url('../font/fontello.eot?74318141');
+  src: url('../font/fontello.eot?74318141#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff?74318141') format('woff'),
+       url('../font/fontello.ttf?74318141') format('truetype'),
+       url('../font/fontello.svg?74318141#fontello') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "fontello";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  font-variant: normal;
+  text-transform: none;
+}
+
+.icon-github-circled:before { content: '\e800'; } /* '' */
+.icon-twitter:before { content: '\e801'; } /* '' */

_includes/footer.html

@@ -1,6 +1,8 @@
-<hr>
-
 <footer class="footer">
+  <p>&lt;3</p>
+  <p>Heavily inspired by <a href="https://github.com/necolas/idiomatic-css">Idiomatic CSS</a> and the <a href="http://github.com/styleguide">GitHub Styleguide</a>. Made with all the love in the world by <a href="https://twitter.com/mdo">@mdo</a>.</p>
+  <p>Open sourced under MIT. Copyright {{ site.time | date: '%Y' }} <a href="https://twitter.com/mdo">@mdo</a>.</p>
+
   <ul class="quick-links">
     <li>
       <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=mdo&repo=code-guide&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
@@ -17,6 +19,4 @@
       <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://mdo.github.com/code-guide" data-count="horizontal" data-via="mdo">Tweet</a>
     </li>
   </ul>
-
-  <p>&copy; 2012. All rights reserved.</p>
 </footer>

_includes/header.html

@@ -1,6 +1,16 @@
 <header class="masthead">
-  <h1>{{ site.name }}</h1>
-  <p class="lead">{{ site.description }}</p>
-</header>
+  <div class="container">
+    <span class="icon">&#9997;</span>
+    <h1>{{ site.name }}</h1>
+    <p class="lead">{{ site.description }}</p>
 
-<hr>
+    <p class="masthead-links">
+      <a href="https://github.com/mdo/code-guide">
+        <span class="icon icon-github-circled"></span>
+      </a>
+      <a href="https://twitter.com/mdo">
+        <span class="icon icon-twitter"></span>
+      </a>
+    </p>
+  </div>
+</header>

_includes/html/attribute-order.html

@@ -0,0 +1,7 @@
+<a class="..." id="..." data-modal="toggle" href="#">
+  Example link
+</a>
+
+<input class="form-control" type="text">
+
+<img src="..." alt="...">

_includes/html/boolean-attributes.html

@@ -0,0 +1,7 @@
+<input type="text" disabled>
+
+<input type="checkbox" value="1" checked>
+
+<select>
+  <option value="1" selected></option>
+</select>

_includes/html/doctype.html

@@ -0,0 +1 @@
+<!DOCTYPE html>

_includes/html/naming.html

@@ -0,0 +1,9 @@
+.element {
+  ...
+}
+.element-title {
+  ...
+}
+.element-button {
+  ...
+}

_includes/html/reducing-markup.html

@@ -0,0 +1,7 @@
+<!-- Not so great -->
+<span class="avatar">
+  <img src="...">
+</span>
+
+<!-- Better -->
+<img class="avatar" src="...">

_includes/html/syntax.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Page title</title>
+  </head>
+  <body>
+    <img src="images/company-logo.png" alt="Company">
+    <h1 class="hello-world">Hello, world!</h1>
+  </body>
+</html>

_includes/syntax.css

@@ -0,0 +1,66 @@
+.hll { background-color: #ffffcc }
+ /*{ background: #f0f3f3; }*/
+.c { color: #999; } /* Comment */
+.err { color: #AA0000; background-color: #FFAAAA } /* Error */
+.k { color: #006699; } /* Keyword */
+.o { color: #555555 } /* Operator */
+.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */
+.cp { color: #009999 } /* Comment.Preproc */
+.c1 { color: #999; } /* Comment.Single */
+.cs { color: #999; } /* Comment.Special */
+.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
+.ge { font-style: italic } /* Generic.Emph */
+.gr { color: #FF0000 } /* Generic.Error */
+.gh { color: #003300; } /* Generic.Heading */
+.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
+.go { color: #AAAAAA } /* Generic.Output */
+.gp { color: #000099; } /* Generic.Prompt */
+.gs { } /* Generic.Strong */
+.gu { color: #003300; } /* Generic.Subheading */
+.gt { color: #99CC66 } /* Generic.Traceback */
+.kc { color: #006699; } /* Keyword.Constant */
+.kd { color: #006699; } /* Keyword.Declaration */
+.kn { color: #006699; } /* Keyword.Namespace */
+.kp { color: #006699 } /* Keyword.Pseudo */
+.kr { color: #006699; } /* Keyword.Reserved */
+.kt { color: #007788; } /* Keyword.Type */
+.m { color: #FF6600 } /* Literal.Number */
+.s { color: #d44950 } /* Literal.String */
+.na { color: #4f9fcf } /* Name.Attribute */
+.nb { color: #336666 } /* Name.Builtin */
+.nc { color: #00AA88; } /* Name.Class */
+.no { color: #336600 } /* Name.Constant */
+.nd { color: #9999FF } /* Name.Decorator */
+.ni { color: #999999; } /* Name.Entity */
+.ne { color: #CC0000; } /* Name.Exception */
+.nf { color: #CC00FF } /* Name.Function */
+.nl { color: #9999FF } /* Name.Label */
+.nn { color: #00CCFF; } /* Name.Namespace */
+.nt { color: #2f6f9f; } /* Name.Tag */
+.nv { color: #003333 } /* Name.Variable */
+.ow { color: #000000; } /* Operator.Word */
+.w { color: #bbbbbb } /* Text.Whitespace */
+.mf { color: #FF6600 } /* Literal.Number.Float */
+.mh { color: #FF6600 } /* Literal.Number.Hex */
+.mi { color: #FF6600 } /* Literal.Number.Integer */
+.mo { color: #FF6600 } /* Literal.Number.Oct */
+.sb { color: #CC3300 } /* Literal.String.Backtick */
+.sc { color: #CC3300 } /* Literal.String.Char */
+.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
+.s2 { color: #CC3300 } /* Literal.String.Double */
+.se { color: #CC3300; } /* Literal.String.Escape */
+.sh { color: #CC3300 } /* Literal.String.Heredoc */
+.si { color: #AA0000 } /* Literal.String.Interpol */
+.sx { color: #CC3300 } /* Literal.String.Other */
+.sr { color: #33AAAA } /* Literal.String.Regex */
+.s1 { color: #CC3300 } /* Literal.String.Single */
+.ss { color: #FFCC33 } /* Literal.String.Symbol */
+.bp { color: #336666 } /* Name.Builtin.Pseudo */
+.vc { color: #003333 } /* Name.Variable.Class */
+.vg { color: #003333 } /* Name.Variable.Global */
+.vi { color: #003333 } /* Name.Variable.Instance */
+.il { color: #FF6600 } /* Literal.Number.Integer.Long */
+
+.css .o,
+.css .o + .nt,
+.css .nt + .nt { color: #999; }

_layouts/default.html

@@ -1,34 +1,24 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<html lang="en-us">
   <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
-    <meta name="viewport" content="width=device-width; initial-scale=1.0, maximum-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
     <link href="public/ico/favicon.ico" rel="shortcut icon" type="image/x-icon">
-    <link href="http://gmpg.org/xfn/11" rel="profile">
 
     <title>
-      {% if page.title %}
-      {{ page.title }} &middot;
-      {% endif %}
       {{ site.name }}
     </title>
 
-    <!-- CSS -->
-    <link rel="stylesheet" href="public/css/code-guide.css" type="text/css">
-    <link rel="stylesheet" href="public/css/pygments-monokai.css" type="text/css">
-    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="code-guide.css">
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700&PT+Mono:400">
   </head>
   <body>
 
-    <div class="container">
+    {% include header.html %}
 
-      {% include header.html %}
+    {{ content }}
 
-      {{ content }}
-
-      {% include footer.html %}
-
-    </div> <!-- /close container -->
+    {% include footer.html %}
 
     {% include js.html %}