Skip to content

Commit 844ea47

Browse files
rachelandrewrachelandrew
committed
examples for article 2
1 parent 20316ee commit 844ea47

File tree

6 files changed

+686
-0
lines changed

6 files changed

+686
-0
lines changed

‎flexbox/index.html

+10
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,15 @@ <h2>Basic concepts of flexbox</h2>
2121
<li><a href="basics/align-items.html">Align items</a></li>
2222
<li><a href="basics/justify-content.html">Justify content</a></li>
2323
</ol>
24+
25+
<h2>Relationship to other layout methods</h2>
26+
27+
<ol>
28+
<li><a href="relationship/writing-modes.html">Writing Modes</a></li>
29+
<li><a href="relationship/floats.html">Floated layout</a></li>
30+
<li><a href="relationship/flex-layout.html">Simple flex layout</a></li>
31+
<li><a href="relationship/grid-layout.html">Simple grid layout</a></li>
32+
<li><a href="relationship/display-contents.html">Demo of display: contents</a></li>
33+
</ol>
2434
</body>
2535
</html>

‎flexbox/relationship/display-contents.html

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Flexbox and other specs: display: contents</title>
7+
8+
<style>
9+
* {
10+
box-sizing: border-box;
11+
}
12+
13+
body {
14+
font: 1.2em Helvetica, Arial, sans-serif;
15+
margin: 20px;
16+
padding: 0;
17+
}
18+
19+
textarea {
20+
height: 80px;
21+
background-color: #F4F7F8;
22+
border: none;
23+
border-left: 6px solid #558ABB;
24+
color: #4D4E53;
25+
width: 90%;
26+
max-width: 700px;
27+
padding: 10px 10px 0px;
28+
font-size: 90%;
29+
}
30+
31+
.playable-buttons {
32+
text-align: right;
33+
width: 90%;
34+
max-width: 700px;
35+
padding: 5px 10px 5px 26px;
36+
font-size: 100%;
37+
}
38+
39+
section {
40+
width: 90%;
41+
max-width: 700px;
42+
border: 1px solid #4D4E53;
43+
border-radius: 2px;
44+
padding: 10px 14px 10px 10px;
45+
margin-bottom: 10px;
46+
}
47+
48+
section input {
49+
display: block;
50+
margin: 5px;
51+
}
52+
53+
54+
55+
.box>* {
56+
border: 2px solid rgb(96, 139, 168);
57+
border-radius: 5px;
58+
background-color: rgba(96, 139, 168, .2);
59+
padding: 20px;
60+
}
61+
62+
.box {
63+
padding: 20px;
64+
border: 2px dotted rgb(96, 139, 168);
65+
}
66+
67+
68+
</style>
69+
<style class="editable">
70+
.box {
71+
display: flex;
72+
}
73+
74+
.nested {
75+
background-color: orange;
76+
display: contents;
77+
}
78+
</style>
79+
</head>
80+
81+
<body>
82+
<section>
83+
<div class="box">
84+
<div>One</div>
85+
<div>Two</div>
86+
<div class="nested">
87+
<div>Sub-item 1</div>
88+
<div>Sub-item 2</div>
89+
</div>
90+
</div>
91+
</section>
92+
93+
<textarea class="playable-css">
94+
.box {
95+
display: flex;
96+
}
97+
98+
.nested {
99+
background-color: orange;
100+
display: contents;
101+
}
102+
</textarea>
103+
<textarea id="code" class="playable-html">
104+
<div class="box">
105+
<div>One</div>
106+
<div>Two</div>
107+
<div class="nested">
108+
<div>Sub-item 1</div>
109+
<div>Sub-item 2</div>
110+
</div>
111+
</div>
112+
</textarea>
113+
<div class="playable-buttons">
114+
<input id="reset" type="button" value="Reset">
115+
</div>
116+
</body>
117+
<script>
118+
var section = document.querySelector('section');
119+
var editable = document.querySelector('.editable');
120+
var textareaHTML = document.querySelector('.playable-html');
121+
var textareaCSS = document.querySelector('.playable-css');
122+
var reset = document.getElementById('reset');
123+
var htmlCode = textareaHTML.value;
124+
var cssCode = textareaCSS.value;
125+
126+
function fillCode() {
127+
editable.innerHTML = textareaCSS.value;
128+
section.innerHTML = textareaHTML.value;
129+
}
130+
131+
reset.addEventListener('click', function () {
132+
textareaHTML.value = htmlCode;
133+
textareaCSS.value = cssCode;
134+
fillSection();
135+
});
136+
137+
textareaHTML.addEventListener('input', fillCode);
138+
textareaCSS.addEventListener('input', fillCode);
139+
window.addEventListener('load', fillCode);
140+
</script>
141+
142+
</html>

‎flexbox/relationship/flex-layout.html

+144
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Flexbox and other specs: a simple flex layout</title>
7+
8+
<style>
9+
* {
10+
box-sizing: border-box;
11+
}
12+
13+
body {
14+
font: 1.2em Helvetica, Arial, sans-serif;
15+
margin: 20px;
16+
padding: 0;
17+
}
18+
19+
textarea {
20+
height: 80px;
21+
background-color: #F4F7F8;
22+
border: none;
23+
border-left: 6px solid #558ABB;
24+
color: #4D4E53;
25+
width: 90%;
26+
max-width: 700px;
27+
padding: 10px 10px 0px;
28+
font-size: 90%;
29+
}
30+
31+
.playable-buttons {
32+
text-align: right;
33+
width: 90%;
34+
max-width: 700px;
35+
padding: 5px 10px 5px 26px;
36+
font-size: 100%;
37+
}
38+
39+
section {
40+
width: 90%;
41+
max-width: 700px;
42+
border: 1px solid #4D4E53;
43+
border-radius: 2px;
44+
padding: 10px 14px 10px 10px;
45+
margin-bottom: 10px;
46+
}
47+
48+
section input {
49+
display: block;
50+
margin: 5px;
51+
}
52+
53+
54+
55+
.box>* {
56+
border: 2px solid rgb(96, 139, 168);
57+
border-radius: 5px;
58+
background-color: rgba(96, 139, 168, .2);
59+
padding: 20px;
60+
}
61+
62+
.box {
63+
padding: 20px;
64+
border: 2px dotted rgb(96, 139, 168);
65+
}
66+
67+
68+
</style>
69+
<style class="editable">
70+
.box {
71+
display: flex;
72+
flex-wrap: wrap;
73+
}
74+
75+
.box>* {
76+
flex: 1 1 200px;
77+
}
78+
</style>
79+
</head>
80+
81+
<body>
82+
<section>
83+
<div class="box">
84+
<div>One</div>
85+
<div>Two</div>
86+
<div>Three</div>
87+
<div>Four</div>
88+
<div>Five</div>
89+
<div>Six</div>
90+
<div>Seven</div>
91+
</div>
92+
</section>
93+
94+
<textarea class="playable-css">
95+
.box {
96+
display: flex;
97+
flex-wrap: wrap;
98+
}
99+
100+
.box>* {
101+
flex: 1 1 200px;
102+
}
103+
</textarea>
104+
<textarea id="code" class="playable-html">
105+
<div class="box">
106+
<div>One</div>
107+
<div>Two</div>
108+
<div>Three</div>
109+
<div>Four</div>
110+
<div>Five</div>
111+
<div>Six</div>
112+
<div>Seven</div>
113+
</div>
114+
</textarea>
115+
<div class="playable-buttons">
116+
<input id="reset" type="button" value="Reset">
117+
</div>
118+
</body>
119+
<script>
120+
var section = document.querySelector('section');
121+
var editable = document.querySelector('.editable');
122+
var textareaHTML = document.querySelector('.playable-html');
123+
var textareaCSS = document.querySelector('.playable-css');
124+
var reset = document.getElementById('reset');
125+
var htmlCode = textareaHTML.value;
126+
var cssCode = textareaCSS.value;
127+
128+
function fillCode() {
129+
editable.innerHTML = textareaCSS.value;
130+
section.innerHTML = textareaHTML.value;
131+
}
132+
133+
reset.addEventListener('click', function () {
134+
textareaHTML.value = htmlCode;
135+
textareaCSS.value = cssCode;
136+
fillSection();
137+
});
138+
139+
textareaHTML.addEventListener('input', fillCode);
140+
textareaCSS.addEventListener('input', fillCode);
141+
window.addEventListener('load', fillCode);
142+
</script>
143+
144+
</html>

0 commit comments

Comments
 (0)