Skip to content

Commit 61461f7

Browse files
author
liujintong
committed
ch10
1 parent c6909c8 commit 61461f7

37 files changed

+6056
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎ch10/css/style.css

Lines changed: 346 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,346 @@
1+
/* 10-4 包含 KSS 文档注释的媒体对象 */
2+
:root {
3+
box-sizing: border-box;
4+
}
5+
6+
*,
7+
::before,
8+
::after {
9+
box-sizing: inherit;
10+
}
11+
12+
body {
13+
font-family: Arial, Helvetica, sans-serif;
14+
}
15+
16+
/*
17+
Media
18+
19+
Displays an image on the left and body content on the right.
20+
21+
Markup:
22+
<div class="media">
23+
<img class="media__image" src="http://placehold.it/150x150" />
24+
<div class="media__body">
25+
<h4>Strength</h4>
26+
<p>
27+
Strength training is an important part of injury prevention. Focus on your core&mdash; especially your abs and glutes.
28+
</p>
29+
</div>
30+
</div>
31+
<div class="media">
32+
<img class="media__image" src="http://placehold.it/150x150" />
33+
<div class="media__body">
34+
<h4>Strength</h4>
35+
<p>
36+
Strength training is an important part of injury prevention. Focus on your core&mdash; especially your abs and glutes.
37+
</p>
38+
</div>
39+
<img class="media__image" src="http://placehold.it/150x150" />
40+
</div>
41+
42+
Styleguide Media
43+
*/
44+
45+
/* .media {
46+
padding: 1.5em;
47+
background-color: #eee;
48+
border-radius: 0.5em;
49+
}
50+
51+
.media::after {
52+
content: " ";
53+
display: block;
54+
clear: both;
55+
}
56+
57+
.media__image {
58+
float: left;
59+
margin-right: 1.5em;
60+
}
61+
62+
.media__body {
63+
overflow: auto;
64+
margin-top: 0;
65+
}
66+
67+
.media__body>h4 {
68+
margin-top: 0;
69+
} */
70+
71+
/* 10-11 使用 Flexbox 重构媒体模块 */
72+
73+
.media {
74+
display: flex;
75+
align-items: flex-start;
76+
padding: 1.5em;
77+
background-color: #eee;
78+
border-radius: 0.5em;
79+
}
80+
81+
.media>*+* {
82+
margin-left: 1.5em;
83+
}
84+
85+
.media__body {
86+
margin-top: 0;
87+
}
88+
89+
.media__body>h4 {
90+
margin-top: 0;
91+
}
92+
93+
/* 10-11 使用 Flexbox 重构媒体模块 */
94+
95+
/* 10-4 包含 KSS 文档注释的媒体对象 */
96+
97+
/* 10-5 按钮模块及其文档 */
98+
/*
99+
Buttons
100+
101+
Buttons are available in a number of sizes and colors. You may mix and match any size with any color.
102+
103+
Markup:
104+
<button class="button {{modifier_class}}">
105+
click here
106+
</button>
107+
108+
.button--success - A green success button
109+
.button--danger - A red danger button
110+
.button--small - A small button
111+
.button--large - A large button
112+
113+
Styleguide Buttons
114+
*/
115+
.button {
116+
padding: 1em 1.25em;
117+
border: 1px solid #265559;
118+
border-radius: 0.2em;
119+
background-color: transparent;
120+
font-size: 0.8rem;
121+
color: #333;
122+
font-weight: bold;
123+
}
124+
125+
.button--success {
126+
border-color: #cfe8c9;
127+
color: #fff;
128+
background-color: #2f5926;
129+
}
130+
131+
.button--danger {
132+
border-color: #e8c9c9;
133+
color: #fff;
134+
background-color: #a92323;
135+
}
136+
137+
.button--small {
138+
font-size: 0.8rem;
139+
}
140+
141+
.button--large {
142+
font-size: 1.2rem;
143+
}
144+
145+
/* 10-5 按钮模块及其文档 */
146+
147+
/* 10-7 下拉模块及其文档 */
148+
/*
149+
Dropdown
150+
151+
A dropdown menu. Clicking the toggle button opens and closes the drawer.
152+
153+
Use JavaScript to toggle the `is-open` class in order to open and close the dropdown.
154+
155+
Markup:
156+
<div class="dropdown">
157+
<button class="dropdown__toggle">Open menu</button>
158+
<div class="dropdown__drawer">
159+
Drawer contents
160+
</div>
161+
</div>
162+
163+
Styleguide Dropdown
164+
*/
165+
.dropdown {
166+
display: inline-block;
167+
position: relative;
168+
}
169+
170+
.dropdown__toggle {
171+
padding: 0.5em 2em 0.5em 1.5em;
172+
border: 1px solid #ccc;
173+
font-size: 1rem;
174+
background-color: #eee;
175+
}
176+
177+
.dropdown__toggle::after {
178+
content: " ";
179+
position: absolute;
180+
right: 1em;
181+
top: 1em;
182+
border: 0.3em solid;
183+
border-color: black transparent transparent;
184+
}
185+
186+
.dropdown__drawer {
187+
display: none;
188+
position: absolute;
189+
left: 0;
190+
top: 2.1em;
191+
min-width: 100%;
192+
background-color: #eee;
193+
}
194+
195+
.dropdown.is-open .dropdown__toggle::after {
196+
top: 0.7em;
197+
border-color: transparent transparent black;
198+
}
199+
200+
.dropdown.is-open .dropdown__drawer {
201+
display: block;
202+
}
203+
204+
/* 10-7 下拉模块及其文档 */
205+
206+
/*
207+
Menu
208+
209+
菜单栏，内部使用ul实现菜单项
210+
211+
Markup:
212+
<ul class="menu">
213+
<li><a href="/">Home</a></li>
214+
<li><a href="/coffees">Coffees</a></li>
215+
<li><a href="/brewers">Brewers</a></li>
216+
<li><a href="/specials">Specials</a></li>
217+
<li><a href="/about">About u
218+
</ul>
219+
220+
Styleguide Menu
221+
*/
222+
223+
.menu {
224+
margin: 0;
225+
padding-left: 0;
226+
list-style-type: none;
227+
border: 1px solid #999;
228+
}
229+
230+
.menu>li+li {
231+
border-top: 1px solid #999;
232+
}
233+
234+
.menu>li>a {
235+
display: block;
236+
padding: 0.5em 1.5em;
237+
background-color: #eee;
238+
color: #369;
239+
text-decoration: none;
240+
}
241+
242+
.menu>li>a:hover {
243+
background-color: #fff;
244+
}
245+
246+
/*
247+
Message
248+
249+
消息组件，有多重样式的消息组件可选
250+
251+
Markup:
252+
<div class="message {{modifier_class}}">
253+
Message
254+
</div>
255+
256+
.message--success - A green success message
257+
.message--warning - A pink warning message
258+
.message--error - A red error message
259+
260+
Styleguide Message
261+
*/
262+
263+
.message {
264+
padding: 0.8em 1.2em;
265+
border-radius: 0.2em;
266+
border: 1px solid #265559;
267+
color: #265559;
268+
background-color: e0f0f2;
269+
}
270+
271+
.message--success {
272+
color: #2f5926;
273+
border-color: #2f5926;
274+
background-color: #cfe8c9;
275+
}
276+
277+
.message--warning {
278+
color: #594826;
279+
border-color: #594826;
280+
background-color: #e8dec9;
281+
}
282+
283+
.message--error {
284+
color: #59262f;
285+
border-color: #59262f;
286+
background-color: #e8c9cf;
287+
}
288+
289+
/* 10-9 为相同类型的文档分组 */
290+
291+
292+
/*
293+
Text center
294+
295+
Center text within a block by applying `text-center`
296+
297+
Markup:
298+
<p class="text-center">Centered text</p>
299+
300+
Weight: 1
301+
302+
Styleguide Utilities.text-center
303+
*/
304+
.text-center {
305+
text-align: center !important;
306+
}
307+
308+
/*
309+
Float left
310+
311+
Float an element to the left with `float-left`
312+
313+
Weight: 3
314+
315+
Styleguide Utilities.float-left
316+
*/
317+
.float-left {
318+
float: left;
319+
}
320+
321+
/*
322+
Clearfix
323+
324+
Add the class `clearfix` to an element to force it to contain its floated contents
325+
326+
Markup:
327+
<div class="clearfix">
328+
<span class="float-left">floated</span>
329+
</div>
330+
331+
Weight: 2
332+
333+
Styleguide Utilities.clearfix
334+
*/
335+
336+
.clearfix::before,
337+
.clearfix::after {
338+
content: " ";
339+
display: table;
340+
}
341+
342+
.clearfix::after {
343+
clear: both;
344+
}
345+
346+
/* 10-9 为相同类型的文档分组 */

0 commit comments

Comments
 (0)