Skip to content

Commit 0340f3e

Browse files
rachelandrewrachelandrew
committed
Sizing examples
1 parent 4dd149c commit 0340f3e

File tree

10 files changed

+434
-0
lines changed

10 files changed

+434
-0
lines changed

‎learn/sizing/balloons.jpg‎

107 KB
Loading

‎learn/sizing/height.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Sizing: height</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.wrapper {
13+
display: flex;
14+
}
15+
16+
.wrapper > * {
17+
margin: 20px;
18+
}
19+
20+
</style>
21+
22+
<style class="editable">
23+
.box {
24+
border: 5px solid darkblue;
25+
height: 150px;
26+
width: 200px;
27+
}
28+
</style>
29+
</head>
30+
31+
<body>
32+
<section class="preview">
33+
<div class="wrapper">
34+
<div class="box"></div>
35+
<div class="box">These boxes both have a height set, this box has content in it which will need more space than the assigned height, and so we get overflow.</div>
36+
</div>
37+
</section>
38+
39+
<textarea class="playable playable-css" style="height: 120px;">
40+
.box {
41+
border: 5px solid darkblue;
42+
height: 150px;
43+
width: 200px;
44+
}
45+
</textarea>
46+
47+
<textarea class="playable playable-html" style="height: 120px;">
48+
<div class="wrapper">
49+
<div class="box"></div>
50+
<div class="box">These boxes both have a height set, this box has content in it which will need more space than the assigned height, and so we get overflow. </div>
51+
</div>
52+
</textarea>
53+
54+
<div class="playable-buttons">
55+
<input id="reset" type="button" value="Reset" />
56+
</div>
57+
</body>
58+
<script src="../playable.js"></script>
59+
</html>

‎learn/sizing/intrinsic-image.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Sizing: image</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
</style>
13+
14+
<style class="editable">
15+
img {
16+
border: 5px solid darkblue;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<section class="preview">
23+
<img src="star.png" alt="star">
24+
</section>
25+
26+
<textarea class="playable playable-css" style="height: 120px;">
27+
img {
28+
border: 5px solid darkblue;
29+
}
30+
</textarea>
31+
32+
<textarea class="playable playable-html" style="height: 120px;">
33+
<img src="star.png" alt="star">
34+
</textarea>
35+
36+
<div class="playable-buttons">
37+
<input id="reset" type="button" value="Reset" />
38+
</div>
39+
</body>
40+
<script src="../playable.js"></script>
41+
</html>

‎learn/sizing/intrinsic-text.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Sizing: text</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
</style>
13+
14+
<style class="editable">
15+
.box {
16+
border: 5px solid darkblue;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<section class="preview">
23+
<div class="box">
24+
25+
</div>
26+
</section>
27+
28+
<textarea class="playable playable-css" style="height: 120px;">
29+
.box {
30+
border: 5px solid darkblue;
31+
}
32+
</textarea>
33+
34+
<textarea class="playable playable-html" style="height: 120px;">
35+
<div class="box">
36+
37+
</div>
38+
</textarea>
39+
40+
<div class="playable-buttons">
41+
<input id="reset" type="button" value="Reset" />
42+
</div>
43+
</body>
44+
<script src="../playable.js"></script>
45+
</html>

‎learn/sizing/max-width.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Sizing: max-width</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.wrapper {
13+
display: flex;
14+
align-items: flex-start;
15+
}
16+
17+
.wrapper > * {
18+
margin: 20px;
19+
}
20+
21+
.box, .minibox {
22+
border: 5px solid darkblue;
23+
}
24+
25+
</style>
26+
27+
<style class="editable">
28+
.box {
29+
width: 200px;
30+
}
31+
.minibox {
32+
width: 50px;
33+
}
34+
.width {
35+
width: 100%;
36+
}
37+
.max {
38+
max-width: 100%;
39+
}
40+
</style>
41+
</head>
42+
43+
<body>
44+
<section class="preview">
45+
<div class="wrapper">
46+
<div class="box"><img src="star.png" alt="star" class="width"></div>
47+
<div class="box"><img src="star.png" alt="star" class="max"></div>
48+
<div class="minibox"><img src="star.png" alt="star" class="max"></div>
49+
</div>
50+
</section>
51+
52+
<textarea class="playable playable-css" style="height: 240px;">
53+
.box {
54+
width: 200px;
55+
}
56+
.minibox {
57+
width: 50px;
58+
}
59+
.width {
60+
width: 100%;
61+
}
62+
.max {
63+
max-width: 100%;
64+
}
65+
</textarea>
66+
67+
<textarea class="playable playable-html" style="height: 120px;">
68+
<div class="wrapper">
69+
<div class="box"><img src="star.png" alt="star" class="width"></div>
70+
<div class="box"><img src="star.png" alt="star" class="max"></div>
71+
<div class="minibox"><img src="star.png" alt="star" class="max"></div>
72+
</div>
73+
</textarea>
74+
75+
<div class="playable-buttons">
76+
<input id="reset" type="button" value="Reset" />
77+
</div>
78+
</body>
79+
<script src="../playable.js"></script>
80+
</html>

‎learn/sizing/min-height.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Sizing: min-height</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.wrapper {
13+
display: flex;
14+
align-items: flex-start;
15+
}
16+
17+
.wrapper > * {
18+
margin: 20px;
19+
}
20+
21+
</style>
22+
23+
<style class="editable">
24+
.box {
25+
border: 5px solid darkblue;
26+
min-height: 150px;
27+
width: 200px;
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
<section class="preview">
34+
<div class="wrapper">
35+
<div class="box"></div>
36+
<div class="box">These boxes both have a min-height set, this box has content in it which will need more space than the assigned height, and so it grows from the minimum.</div>
37+
</div>
38+
</section>
39+
40+
<textarea class="playable playable-css" style="height: 120px;">
41+
.box {
42+
border: 5px solid darkblue;
43+
min-height: 150px;
44+
width: 200px;
45+
}
46+
</textarea>
47+
48+
<textarea class="playable playable-html" style="height: 120px;">
49+
<div class="wrapper">
50+
<div class="box"></div>
51+
<div class="box">These boxes both have a min-height set, this box has content in it which will need more space than the assigned height, and so it grows from the minimum.</div>
52+
</div>
53+
</textarea>
54+
55+
<div class="playable-buttons">
56+
<input id="reset" type="button" value="Reset" />
57+
</div>
58+
</body>
59+
<script src="../playable.js"></script>
60+
</html>

‎learn/sizing/percent-mp.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Sizing: percentage margins and padding</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
</style>
13+
14+
<style class="editable">
15+
.box {
16+
border: 5px solid darkblue;
17+
width: 300px;
18+
margin: 10%;
19+
padding: 10%;
20+
}
21+
</style>
22+
</head>
23+
24+
<body>
25+
<section class="preview">
26+
<div class="box">
27+
I have margin and padding set to 10% on all sides.
28+
</div>
29+
</section>
30+
31+
<textarea class="playable playable-css" style="height: 120px;">
32+
.box {
33+
border: 5px solid darkblue;
34+
width: 300px;
35+
margin: 10%;
36+
padding: 10%;
37+
}
38+
</textarea>
39+
40+
<textarea class="playable playable-html" style="height: 120px;">
41+
<div class="box">
42+
I have margin and padding set to 10% on all sides.
43+
</div>
44+
</textarea>
45+
46+
<div class="playable-buttons">
47+
<input id="reset" type="button" value="Reset" />
48+
</div>
49+
</body>
50+
<script src="../playable.js"></script>
51+
</html>

‎learn/sizing/percent-width.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Sizing: percentages</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
</style>
13+
14+
<style class="editable">
15+
.box {
16+
border: 5px solid darkblue;
17+
width: 50%;
18+
}
19+
</style>
20+
</head>
21+
22+
<body>
23+
<section class="preview">
24+
<div class="box">
25+
I have a percentage width.
26+
</div>
27+
</section>
28+
29+
<textarea class="playable playable-css" style="height: 120px;">
30+
.box {
31+
border: 5px solid darkblue;
32+
width: 50%;
33+
}
34+
</textarea>
35+
36+
<textarea class="playable playable-html" style="height: 120px;">
37+
<div class="box">
38+
I have a percentage width.
39+
</div>
40+
</textarea>
41+
42+
<div class="playable-buttons">
43+
<input id="reset" type="button" value="Reset" />
44+
</div>
45+
</body>
46+
<script src="../playable.js"></script>
47+
</html>

‎learn/sizing/star.png‎

6.33 KB
Loading

0 commit comments

Comments
 (0)