Skip to content

Commit 6ead91f

Browse files
committed
add file
1 parent b24d5f6 commit 6ead91f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1809
-0
lines changed

LICENSE.md

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

_includes/css/class-names.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* Bad example */
2+
.t { ... }
3+
.red { ... }
4+
.header { ... }
5+
6+
/* Good example */
7+
.tweet { ... }
8+
.important { ... }
9+
.tweet-header { ... }

_includes/css/comments.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* Bad example */
2+
/* Modal header */
3+
.modal-header {
4+
...
5+
}
6+
7+
/* Good example */
8+
/* Wrapping element for .modal-title and .modal-close */
9+
.modal-header {
10+
...
11+
}

_includes/css/declaration-order.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.declaration-order {
2+
/* Positioning */
3+
position: absolute;
4+
top: 0;
5+
right: 0;
6+
bottom: 0;
7+
left: 0;
8+
z-index: 100;
9+
10+
/* Box-model */
11+
display: block;
12+
float: right;
13+
width: 100px;
14+
height: 100px;
15+
16+
/* Typography */
17+
font: normal 13px "Helvetica Neue", sans-serif;
18+
line-height: 1.5;
19+
color: #333;
20+
text-align: center;
21+
22+
/* Visual */
23+
background-color: #f5f5f5;
24+
border: 1px solid #e5e5e5;
25+
border-radius: 3px;
26+
27+
/* Misc */
28+
opacity: 1;
29+
}

_includes/css/declaration-order.js

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
// 为了方便查阅, 我把Recess的order贴了一份过来, 引入时间2014-05-05
2+
3+
// css property order
4+
var order = [
5+
'position'
6+
, 'top'
7+
, 'right'
8+
, 'bottom'
9+
, 'left'
10+
, 'z-index'
11+
, 'display'
12+
, 'float'
13+
, 'width'
14+
, 'height'
15+
, 'max-width'
16+
, 'max-height'
17+
, 'min-width'
18+
, 'min-height'
19+
, 'padding'
20+
, 'padding-top'
21+
, 'padding-right'
22+
, 'padding-bottom'
23+
, 'padding-left'
24+
, 'margin'
25+
, 'margin-top'
26+
, 'margin-right'
27+
, 'margin-bottom'
28+
, 'margin-left'
29+
, 'margin-collapse'
30+
, 'margin-top-collapse'
31+
, 'margin-right-collapse'
32+
, 'margin-bottom-collapse'
33+
, 'margin-left-collapse'
34+
, 'overflow'
35+
, 'overflow-x'
36+
, 'overflow-y'
37+
, 'clip'
38+
, 'clear'
39+
, 'font'
40+
, 'font-family'
41+
, 'font-size'
42+
, 'font-smoothing'
43+
, 'osx-font-smoothing'
44+
, 'font-style'
45+
, 'font-weight'
46+
, 'hyphens'
47+
, 'src'
48+
, 'line-height'
49+
, 'letter-spacing'
50+
, 'word-spacing'
51+
, 'color'
52+
, 'text-align'
53+
, 'text-decoration'
54+
, 'text-indent'
55+
, 'text-overflow'
56+
, 'text-rendering'
57+
, 'text-size-adjust'
58+
, 'text-shadow'
59+
, 'text-transform'
60+
, 'word-break'
61+
, 'word-wrap'
62+
, 'white-space'
63+
, 'vertical-align'
64+
, 'list-style'
65+
, 'list-style-type'
66+
, 'list-style-position'
67+
, 'list-style-image'
68+
, 'pointer-events'
69+
, 'cursor'
70+
, 'background'
71+
, 'background-attachment'
72+
, 'background-color'
73+
, 'background-image'
74+
, 'background-position'
75+
, 'background-repeat'
76+
, 'background-size'
77+
, 'border'
78+
, 'border-collapse'
79+
, 'border-top'
80+
, 'border-right'
81+
, 'border-bottom'
82+
, 'border-left'
83+
, 'border-color'
84+
, 'border-image'
85+
, 'border-top-color'
86+
, 'border-right-color'
87+
, 'border-bottom-color'
88+
, 'border-left-color'
89+
, 'border-spacing'
90+
, 'border-style'
91+
, 'border-top-style'
92+
, 'border-right-style'
93+
, 'border-bottom-style'
94+
, 'border-left-style'
95+
, 'border-width'
96+
, 'border-top-width'
97+
, 'border-right-width'
98+
, 'border-bottom-width'
99+
, 'border-left-width'
100+
, 'border-radius'
101+
, 'border-top-right-radius'
102+
, 'border-bottom-right-radius'
103+
, 'border-bottom-left-radius'
104+
, 'border-top-left-radius'
105+
, 'border-radius-topright'
106+
, 'border-radius-bottomright'
107+
, 'border-radius-bottomleft'
108+
, 'border-radius-topleft'
109+
, 'content'
110+
, 'quotes'
111+
, 'outline'
112+
, 'outline-offset'
113+
, 'opacity'
114+
, 'filter'
115+
, 'visibility'
116+
, 'size'
117+
, 'zoom'
118+
, 'transform'
119+
, 'box-align'
120+
, 'box-flex'
121+
, 'box-orient'
122+
, 'box-pack'
123+
, 'box-shadow'
124+
, 'box-sizing'
125+
, 'table-layout'
126+
, 'animation'
127+
, 'animation-delay'
128+
, 'animation-duration'
129+
, 'animation-iteration-count'
130+
, 'animation-name'
131+
, 'animation-play-state'
132+
, 'animation-timing-function'
133+
, 'animation-fill-mode'
134+
, 'transition'
135+
, 'transition-delay'
136+
, 'transition-duration'
137+
, 'transition-property'
138+
, 'transition-timing-function'
139+
, 'background-clip'
140+
, 'backface-visibility'
141+
, 'resize'
142+
, 'appearance'
143+
, 'user-select'
144+
, 'interpolation-mode'
145+
, 'direction'
146+
, 'marks'
147+
, 'page'
148+
, 'set-link-source'
149+
, 'unicode-bidi'
150+
, 'speak'
151+
]
152+
153+

_includes/css/import.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!-- Use link elements -->
2+
<link rel="stylesheet" href="core.css">
3+
4+
<!-- Avoid @imports -->
5+
<style>
6+
@import url("more.css");
7+
</style>

_includes/css/media-queries.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.element { ... }
2+
.element-avatar { ... }
3+
.element-selected { ... }
4+
5+
@media (min-width: 480px) {
6+
.element { ...}
7+
.element-avatar { ... }
8+
.element-selected { ... }
9+
}

_includes/css/nesting.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Without nesting
2+
.table > thead > tr > th { … }
3+
.table > thead > tr > td { … }
4+
5+
// With nesting
6+
.table > thead > tr {
7+
> th { … }
8+
> td { … }
9+
}
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*
2+
* Component section heading
3+
*/
4+
5+
.element { ... }
6+
7+
8+
/*
9+
* Component section heading
10+
*
11+
* Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
12+
*/
13+
14+
.element { ... }
15+
16+
/* Contextual sub-component or modifer */
17+
.element-heading { ... }

_includes/css/organization-files.txt

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
stylesheets/
2+
├── normalize.css
3+
├── buttons.css
4+
├── forms.css
5+
├── grid.css
6+
├── header.css
7+
├── footer.css
8+
├── pagination.css
9+
└── input-group.css

_includes/css/prefixed-properties.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/* Prefixed properties */
2+
.selector {
3+
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
4+
box-shadow: 0 1px 2px rgba(0,0,0,.15);
5+
}

_includes/css/selectors.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* Bad example */
2+
span { ... }
3+
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
4+
.avatar { ... }
5+
6+
/* Good example */
7+
.avatar { ... }
8+
.tweet-header .username { ... }
9+
.tweet .avatar { ... }

_includes/css/shorthand.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/* Bad example */
2+
.element {
3+
margin: 0 0 10px;
4+
background: red;
5+
background: url("image.jpg");
6+
border-radius: 3px 3px 0 0;
7+
}
8+
9+
/* Good example */
10+
.element {
11+
margin-bottom: 10px;
12+
background-color: red;
13+
background-image: url("image.jpg");
14+
border-top-left-radius: 3px;
15+
border-top-right-radius: 3px;
16+
}

_includes/css/single-declarations.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* Single declarations on one line */
2+
.span1 { width: 60px; }
3+
.span2 { width: 140px; }
4+
.span3 { width: 220px; }
5+
6+
/* Multiple declarations, one per line */
7+
.sprite {
8+
display: inline-block;
9+
width: 16px;
10+
height: 15px;
11+
background-image: url(../img/sprite.png);
12+
}
13+
.icon { background-position: 0 0; }
14+
.icon-home { background-position: 0 -20px; }
15+
.icon-account { background-position: 0 -40px; }

_includes/css/syntax.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* Bad CSS */
2+
.selector, .selector-secondary, .selector[type=text] {
3+
padding: 15px;
4+
margin: 0px 0px 15px;
5+
background-color: rgba(0, 0, 0, 0.5);
6+
box-shadow: 0 1px 2px #CCC, inset 0 1px 0 #FFFFFF
7+
}
8+
9+
/* Good CSS */
10+
.selector,
11+
.selector-secondary,
12+
.selector[type="text"] {
13+
padding: 15px;
14+
margin-bottom: 15px;
15+
background-color: rgba(0,0,0,.5);
16+
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
17+
}

_includes/footer.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<footer class="footer">
2+
<p>&lt;3</p>
3+
<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>
4+
<p>Open sourced under MIT. Copyright {{ site.time | date: '%Y' }} <a href="https://twitter.com/materliu">@materliu</a>.</p>
5+
6+
<ul class="quick-links">
7+
<li>
8+
<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>
9+
</li>
10+
<li>
11+
<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>
12+
</li>
13+
</ul>
14+
<ul class="quick-links">
15+
<li class="follow-btn">
16+
<a href="https://twitter.com/materliu" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @materliu</a>
17+
</li>
18+
<li class="tweet-btn">
19+
<a href="https://twitter.com/share" class="twitter-share-button" data-url="{{ site.url }}" data-count="horizontal" data-via="materliu">Tweet</a>
20+
</li>
21+
</ul>
22+
</footer>

_includes/header.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<header class="masthead">
2+
<div class="container">
3+
<span class="icon">&#9997;</span>
4+
<h1>{{ site.name }}</h1>
5+
<p class="lead">{{ site.description }}</p>
6+
<p class="lead">通过分析github代码库总结出来的工程师代码书写习惯:<a href="http://sideeffect.kr/popularconvention#javascript" target="_blank">GO!!!</a></p>
7+
8+
<p class="masthead-links">
9+
<a href="https://github.com/materliu/code-guide">
10+
<span class="icon icon-github-circled"></span>
11+
</a>
12+
<a href="https://twitter.com/materliu">
13+
<span class="icon icon-twitter"></span>
14+
</a>
15+
</p>
16+
</div>
17+
</header>

_includes/html/attribute-order.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<a id="..." class="..." data-modal="toggle" href="#">
2+
Example link
3+
</a>
4+
5+
<input class="form-control" type="text">
6+
7+
<img src="..." alt="...">

0 commit comments

Comments
 (0)