Skip to content

Commit a513da2

Browse files
rachelandrewrachelandrew
committed
box model and writing modes examples
1 parent 17fa40f commit a513da2

14 files changed

+585
-0
lines changed

‎learn/tasks/box-model/box-models-download.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Box Model Task 1: Standard and Alternate Box Models</title>
6+
<link rel="stylesheet" href="../styles.css"/>
7+
8+
<style>
9+
body {
10+
background-color: #fff;
11+
color: #333;
12+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
13+
padding: 1em;
14+
margin: 0;
15+
}
16+
17+
.box {
18+
border: 5px solid rebeccapurple;
19+
background-color: lightgray;
20+
padding: 40px;
21+
margin: 40px;
22+
width: 300px;
23+
height: 150px;
24+
}
25+
26+
.alternate {
27+
box-sizing: border-box;
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
34+
<div class="box">I use the standard box model.</div>
35+
<div class="box alternate">I use the alternate box model.</div>
36+
37+
</body>
38+
</html>

‎learn/tasks/box-model/box-models.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Box Model Task 1: Standard and Alternate Box Models</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style></style>
8+
9+
<style class="editable">
10+
.box {
11+
border: 5px solid rebeccapurple;
12+
background-color: lightgray;
13+
padding: 40px;
14+
margin: 40px;
15+
width: 300px;
16+
height: 150px;
17+
}
18+
19+
.alternate {
20+
box-sizing: border-box;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
<section class="preview">
27+
<div class="box">I use the standard box model.</div>
28+
<div class="box alternate">I use the alternate box model.</div>
29+
</section>
30+
31+
<textarea class="playable playable-css" style="height: 280px;">
32+
.box {
33+
border: 5px solid rebeccapurple;
34+
background-color: lightgray;
35+
padding: 40px;
36+
margin: 40px;
37+
width: 300px;
38+
height: 150px;
39+
}
40+
41+
.alternate {
42+
box-sizing: border-box;
43+
}
44+
</textarea>
45+
46+
<textarea class="playable playable-html" style="height: 80px;">
47+
<div class="box">I use the standard box model.</div>
48+
<div class="box alternate">I use the alternate box model.</div>
49+
</textarea>
50+
51+
<div class="playable-buttons">
52+
<input id="reset" type="button" value="Reset" />
53+
</div>
54+
</body>
55+
<script src="../playable.js"></script>
56+
</html>

‎learn/tasks/box-model/inline-block-download.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Box Model Task 3: Inline Block</title>
6+
<link rel="stylesheet" href="../styles.css"/>
7+
8+
<style>
9+
body {
10+
background-color: #fff;
11+
color: #333;
12+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
13+
padding: 1em;
14+
margin: 0;
15+
}
16+
17+
.box span {
18+
background-color: pink;
19+
border: 5px solid black;
20+
padding: 1em;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
<div class="box">
27+
<p>Veggies es bonus vobis,
28+
<span>proinde vos postulo</span>
29+
essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
30+
31+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
32+
</div>
33+
34+
</body>
35+
36+
</html>

‎learn/tasks/box-model/inline-block.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Box Model Task 3: Inline Block</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style></style>
8+
9+
<style class="editable">
10+
.box span {
11+
background-color: pink;
12+
border: 5px solid black;
13+
padding: 1em;
14+
}
15+
16+
</style>
17+
</head>
18+
19+
<body>
20+
<section class="preview">
21+
<div class="box">
22+
<p>Veggies es bonus vobis, <span>proinde vos postulo</span> essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
23+
24+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
25+
</div>
26+
</section>
27+
28+
<textarea class="playable playable-css" style="height: 280px;">
29+
.box span {
30+
background-color: pink;
31+
border: 5px solid black;
32+
padding: 1em;
33+
}
34+
</textarea>
35+
36+
<textarea class="playable playable-html" style="height: 80px;">
37+
<div class="box">
38+
<p>Veggies es bonus vobis, <span>proinde vos postulo</span> essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
39+
40+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
41+
</div>
42+
</textarea>
43+
44+
<div class="playable-buttons">
45+
<input id="reset" type="button" value="Reset" />
46+
</div>
47+
</body>
48+
<script src="../playable.js"></script>
49+
</html>

‎learn/tasks/box-model/marking.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Box Model Marking Guide
2+
3+
## Task 1
4+
5+
In this task the student needs to know that when using the alternate box model, the width is the size of the total of content, padding and border. Therefore to make it match the standard box model example they need to set the width to 390px.
6+
7+
```
8+
.alternate {
9+
box-sizing: border-box;
10+
width: 390px;
11+
}
12+
```
13+
14+
## Task 2
15+
16+
This task involves the student using the margin, border and padding properties correctly. They might choose to use the longhand properties instead however in particular when setting the padding to all sides, the shorthand is probably the better choice.
17+
18+
```
19+
.box {
20+
border: 5px dotted black;
21+
margin: 20px 1em 40px 2em;
22+
padding: 1em;
23+
}
24+
```
25+
26+
## Task 3
27+
28+
In this task the student needs to know that by using `display: inline-block` the block direction margin, border and padding will cause the other lines to be pushed away from the element.
29+
30+
```
31+
.box span {
32+
background-color: pink;
33+
border: 5px solid black;
34+
padding: 1em;
35+
display: inline-block;
36+
}
37+
```

‎learn/tasks/box-model/mbp-download.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Box Model Task 2: Margin, Border, and Padding</title>
6+
<link rel="stylesheet" href="../styles.css"/>
7+
8+
<style>
9+
body {
10+
background-color: #fff;
11+
color: #333;
12+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
13+
padding: 1em;
14+
margin: 0;
15+
}
16+
.box {
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
23+
<div class="box">I use the standard box model.</div>
24+
25+
</body>
26+
27+
</html>

‎learn/tasks/box-model/mbp.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Box Model Task 2: Margin, Border, and Padding</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style></style>
8+
9+
<style class="editable">
10+
.box {
11+
12+
}
13+
14+
</style>
15+
</head>
16+
17+
<body>
18+
<section class="preview">
19+
<div class="box">I use the standard box model.</div>
20+
</section>
21+
22+
<textarea class="playable playable-css" style="height: 280px;">
23+
.box {
24+
25+
}
26+
</textarea>
27+
28+
<textarea class="playable playable-html" style="height: 80px;">
29+
<div class="box">I use the standard box model.</div>
30+
</textarea>
31+
32+
<div class="playable-buttons">
33+
<input id="reset" type="button" value="Reset" />
34+
</div>
35+
</body>
36+
<script src="../playable.js"></script>
37+
</html>

‎learn/tasks/writing-modes/logical-mbp-download.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Writing Modes Task 3: Logical Margin, Border, Padding</title>
6+
<link rel="stylesheet" href="../styles.css"/>
7+
<style>
8+
body {
9+
background-color: #fff;
10+
color: #333;
11+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
12+
padding: 1em;
13+
margin: 0;
14+
}
15+
16+
.vertical {
17+
writing-mode: vertical-rl;
18+
}
19+
.box {
20+
width: 150px;
21+
height: 150px;
22+
border-top: 5px solid rebeccapurple;
23+
border-right: 5px solid grey;
24+
border-bottom: 5px dotted red;
25+
border-left: 5px dotted blue;
26+
padding-top: 40px;
27+
margin-bottom: 30px;
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
34+
<div class="box">Horizontal.</div>
35+
<div class="box vertical">Vertical.</div>
36+
37+
</body>
38+
39+
</html>

‎learn/tasks/writing-modes/logical-mbp.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Writing Modes Task 3: Logical Margin, Border, Padding</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
.vertical {
9+
writing-mode: vertical-rl;
10+
}
11+
</style>
12+
13+
<style class="editable">
14+
.box {
15+
width: 150px;
16+
height: 150px;
17+
border-top: 5px solid rebeccapurple;
18+
border-right: 5px solid grey;
19+
border-bottom: 5px dotted red;
20+
border-left: 5px dotted blue;
21+
padding-top: 40px;
22+
margin-bottom: 30px;
23+
}
24+
25+
</style>
26+
</head>
27+
28+
<body>
29+
<section class="preview">
30+
<div class="box">Horizontal.</div>
31+
<div class="box vertical">Vertical.</div>
32+
</section>
33+
34+
<textarea class="playable playable-css" style="height: 180px;">
35+
.box {
36+
width: 150px;
37+
height: 150px;
38+
border-top: 5px solid rebeccapurple;
39+
border-right: 5px solid grey;
40+
border-bottom: 5px dotted red;
41+
border-left: 5px dotted blue;
42+
padding-top: 40px;
43+
margin-bottom: 30px;
44+
}
45+
</textarea>
46+
47+
<textarea class="playable playable-html" style="height: 180px;">
48+
<div class="box">Horizontal.</div>
49+
<div class="box vertical">Vertical.</div>
50+
</textarea>
51+
52+
<div class="playable-buttons">
53+
<input id="reset" type="button" value="Reset" />
54+
</div>
55+
</body>
56+
<script src="../playable.js"></script>
57+
</html>

0 commit comments

Comments
 (0)