add file

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Mark Otto.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

_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/declaration-order.js

@@ -0,0 +1,153 @@
+// 为了方便查阅， 我把Recess的order贴了一份过来, 引入时间2014-05-05
+
+// css property order
+var order = [
+    'position'
+    , 'top'
+    , 'right'
+    , 'bottom'
+    , 'left'
+    , 'z-index'
+    , 'display'
+    , 'float'
+    , 'width'
+    , 'height'
+    , 'max-width'
+    , 'max-height'
+    , 'min-width'
+    , 'min-height'
+    , 'padding'
+    , 'padding-top'
+    , 'padding-right'
+    , 'padding-bottom'
+    , 'padding-left'
+    , 'margin'
+    , 'margin-top'
+    , 'margin-right'
+    , 'margin-bottom'
+    , 'margin-left'
+    , 'margin-collapse'
+    , 'margin-top-collapse'
+    , 'margin-right-collapse'
+    , 'margin-bottom-collapse'
+    , 'margin-left-collapse'
+    , 'overflow'
+    , 'overflow-x'
+    , 'overflow-y'
+    , 'clip'
+    , 'clear'
+    , 'font'
+    , 'font-family'
+    , 'font-size'
+    , 'font-smoothing'
+    , 'osx-font-smoothing'
+    , 'font-style'
+    , 'font-weight'
+    , 'hyphens'
+    , 'src'
+    , 'line-height'
+    , 'letter-spacing'
+    , 'word-spacing'
+    , 'color'
+    , 'text-align'
+    , 'text-decoration'
+    , 'text-indent'
+    , 'text-overflow'
+    , 'text-rendering'
+    , 'text-size-adjust'
+    , 'text-shadow'
+    , 'text-transform'
+    , 'word-break'
+    , 'word-wrap'
+    , 'white-space'
+    , 'vertical-align'
+    , 'list-style'
+    , 'list-style-type'
+    , 'list-style-position'
+    , 'list-style-image'
+    , 'pointer-events'
+    , 'cursor'
+    , 'background'
+    , 'background-attachment'
+    , 'background-color'
+    , 'background-image'
+    , 'background-position'
+    , 'background-repeat'
+    , 'background-size'
+    , 'border'
+    , 'border-collapse'
+    , 'border-top'
+    , 'border-right'
+    , 'border-bottom'
+    , 'border-left'
+    , 'border-color'
+    , 'border-image'
+    , 'border-top-color'
+    , 'border-right-color'
+    , 'border-bottom-color'
+    , 'border-left-color'
+    , 'border-spacing'
+    , 'border-style'
+    , 'border-top-style'
+    , 'border-right-style'
+    , 'border-bottom-style'
+    , 'border-left-style'
+    , 'border-width'
+    , 'border-top-width'
+    , 'border-right-width'
+    , 'border-bottom-width'
+    , 'border-left-width'
+    , 'border-radius'
+    , 'border-top-right-radius'
+    , 'border-bottom-right-radius'
+    , 'border-bottom-left-radius'
+    , 'border-top-left-radius'
+    , 'border-radius-topright'
+    , 'border-radius-bottomright'
+    , 'border-radius-bottomleft'
+    , 'border-radius-topleft'
+    , 'content'
+    , 'quotes'
+    , 'outline'
+    , 'outline-offset'
+    , 'opacity'
+    , 'filter'
+    , 'visibility'
+    , 'size'
+    , 'zoom'
+    , 'transform'
+    , 'box-align'
+    , 'box-flex'
+    , 'box-orient'
+    , 'box-pack'
+    , 'box-shadow'
+    , 'box-sizing'
+    , 'table-layout'
+    , 'animation'
+    , 'animation-delay'
+    , 'animation-duration'
+    , 'animation-iteration-count'
+    , 'animation-name'
+    , 'animation-play-state'
+    , 'animation-timing-function'
+    , 'animation-fill-mode'
+    , 'transition'
+    , 'transition-delay'
+    , 'transition-duration'
+    , 'transition-property'
+    , 'transition-timing-function'
+    , 'background-clip'
+    , 'backface-visibility'
+    , 'resize'
+    , 'appearance'
+    , 'user-select'
+    , 'interpolation-mode'
+    , 'direction'
+    , 'marks'
+    , 'page'
+    , 'set-link-source'
+    , 'unicode-bidi'
+    , 'speak'
+]
+
+

_includes/css/import.html

@@ -0,0 +1,7 @@
+<!-- Use link elements -->
+<link rel="stylesheet" href="core.css">
+
+<!-- Avoid @imports -->
+<style>
+    @import url("more.css");
+</style>

_includes/css/media-queries.css

@@ -0,0 +1,9 @@
+.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/organization-comments.css

@@ -0,0 +1,17 @@
+/*
+ * Component section heading
+ */
+
+.element { ... }
+
+
+/*
+ * Component section heading
+ *
+ * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
+ */
+
+.element { ... }
+
+/* Contextual sub-component or modifer */
+.element-heading { ... }

_includes/css/organization-files.txt

@@ -0,0 +1,9 @@
+stylesheets/
+├── normalize.css
+├── buttons.css
+├── forms.css
+├── grid.css
+├── header.css
+├── footer.css
+├── pagination.css
+└── input-group.css

_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/shorthand.css

@@ -0,0 +1,16 @@
+/* Bad example */
+.element {
+    margin: 0 0 10px;
+    background: red;
+    background: url("image.jpg");
+    border-radius: 3px 3px 0 0;
+}
+
+/* Good example */
+.element {
+    margin-bottom: 10px;
+    background-color: red;
+    background-image: url("image.jpg");
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+}

_includes/css/single-declarations.css

@@ -0,0 +1,15 @@
+/* Single declarations on one line */
+.span1 { width: 60px; }
+.span2 { width: 140px; }
+.span3 { width: 220px; }
+
+/* Multiple declarations, one per line */
+.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-bottom: 15px;
+    background-color: rgba(0,0,0,.5);
+    box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
+}

_includes/footer.html

@@ -0,0 +1,22 @@
+<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>. origin Project by <a href="https://github.com/mdo">@mdo</a>. partly chinese translated by <a href="http://zoomzhao.github.io/code-guide/" target="_blank">@zoomzhao</a>. Made with all the love by <a href="https://twitter.com/materliu">@AlloyTeam-materliu</a>.</p>
+  <p>Open sourced under MIT. Copyright {{ site.time | date: '%Y' }} <a href="https://twitter.com/materliu">@materliu</a>.</p>
+
+  <ul class="quick-links">
+    <li>
+      <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=materliu&repo=code-guide&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
+    </li>
+    <li>
+      <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=materliu&repo=code-guide&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
+    </li>
+  </ul>
+  <ul class="quick-links">
+    <li class="follow-btn">
+      <a href="https://twitter.com/materliu" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @materliu</a>
+    </li>
+    <li class="tweet-btn">
+      <a href="https://twitter.com/share" class="twitter-share-button" data-url="{{ site.url }}" data-count="horizontal" data-via="materliu">Tweet</a>
+    </li>
+  </ul>
+</footer>

_includes/header.html

@@ -0,0 +1,17 @@
+<header class="masthead">
+  <div class="container">
+    <span class="icon">&#9997;</span>
+    <h1>{{ site.name }}</h1>
+    <p class="lead">{{ site.description }}</p>
+    <p class="lead">通过分析github代码库总结出来的工程师代码书写习惯：<a href="http://sideeffect.kr/popularconvention#javascript" target="_blank">GO!!!</a></p>
+
+    <p class="masthead-links">
+      <a href="https://github.com/materliu/code-guide">
+        <span class="icon icon-github-circled"></span>
+      </a>
+      <a href="https://twitter.com/materliu">
+        <span class="icon icon-twitter"></span>
+      </a>
+    </p>
+  </div>
+</header>

_includes/html/attribute-order.html

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