Skip to content

Commit 5c294a3

Browse files
rachelandrewrachelandrew
committed
margin, borders, padding, positioning and floats examples for guides.
1 parent 85ca8d2 commit 5c294a3

6 files changed

+606
-0
lines changed

‎logical/border-longhands.html

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Border Properties</title>
7+
<link rel="stylesheet" href="../css-cookbook/styles.css">
8+
<style>
9+
10+
.container {
11+
display: flex;
12+
}
13+
.box {
14+
border-radius: 5px;
15+
background-color: rgba(96, 139, 168, .2);
16+
margin: 10px;
17+
width: 220px;
18+
height:220px;
19+
}
20+
21+
</style>
22+
23+
<style class="editable">
24+
.box {
25+
writing-mode: horizontal-tb;
26+
direction: ltr;
27+
}
28+
29+
.physical {
30+
border-top: 2px solid hotpink;
31+
border-right-style: dotted;
32+
border-right-color: goldenrod;
33+
border-right-width: 5px;
34+
border-bottom: 4px double black;
35+
border-left: none;
36+
}
37+
38+
.logical {
39+
border-block-start: 2px solid hotpink;
40+
border-inline-end-style: dotted;
41+
border-inline-end-color: goldenrod;
42+
border-inline-end-width: 5px;
43+
border-block-end: 4px double black;
44+
border-inline-start: none;
45+
}
46+
</style>
47+
</head>
48+
49+
<body>
50+
<section class="preview">
51+
<div class="container">
52+
<div class="physical box">
53+
Borders use physical properties.
54+
</div>
55+
56+
<div class="logical box">
57+
Borders use logical properties.
58+
</div>
59+
</div>
60+
</section>
61+
62+
<textarea class="playable playable-css" style="height: 30px;">
63+
.box {
64+
writing-mode: horizontal-tb;
65+
direction: ltr;
66+
}
67+
68+
.physical {
69+
border-top: 2px solid hotpink;
70+
border-right-style: dotted;
71+
border-right-color: goldenrod;
72+
border-right-width: 5px;
73+
border-bottom: 4px double black;
74+
border-left: none;
75+
}
76+
77+
.logical {
78+
border-block-start: 2px solid hotpink;
79+
border-inline-end-style: dotted;
80+
border-inline-end-color: goldenrod;
81+
border-inline-end-width: 5px;
82+
border-block-end: 4px double black;
83+
border-inline-start: none;
84+
}</textarea>
85+
86+
<textarea class="playable playable-html" style="height: 180px;">
87+
<div class="container">
88+
<div class="physical box">
89+
Borders use physical properties.
90+
</div>
91+
92+
<div class="logical box">
93+
Borders use logical properties.
94+
</div>
95+
</div>
96+
</textarea>
97+
98+
99+
<div class="playable-buttons">
100+
<input id="reset" type="button" value="Reset">
101+
</div>
102+
</body>
103+
<script src="../css-cookbook/playable.js"></script>
104+
105+
</html>

‎logical/float.html

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>logical values for float</title>
7+
<link rel="stylesheet" href="../css-cookbook/styles.css">
8+
<style>
9+
10+
.container {
11+
display: flex;
12+
}
13+
14+
.box {
15+
border: 2px solid rgb(96, 139, 168);
16+
border-radius: 5px;
17+
background-color: rgba(96, 139, 168, .2);
18+
padding: 10px;
19+
margin: 10px;
20+
width: 100px;
21+
height: 100px;
22+
}
23+
24+
25+
</style>
26+
27+
<style class="editable">
28+
.inner {
29+
writing-mode: horizontal-tb;
30+
}
31+
32+
.physical {
33+
float: left;
34+
}
35+
36+
.logical {
37+
float: inline-start;
38+
}
39+
</style>
40+
</head>
41+
42+
<body>
43+
<section class="preview">
44+
<div class="container">
45+
<div class="inner">
46+
<div class="physical box"></div>
47+
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach
48+
avocado daikon napa cabbage asparagus winter purslane kale.
49+
<div class="inner">
50+
<div class="logical box"></div>
51+
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water
52+
spinach
53+
avocado daikon napa cabbage asparagus winter purslane kale.
54+
</div>
55+
</div>
56+
</section>
57+
58+
<textarea class="playable playable-css" style="height: 240px;">
59+
.inner {
60+
writing-mode: horizontal-tb;
61+
}
62+
63+
.physical {
64+
float: left;
65+
}
66+
67+
.logical {
68+
float: inline-start;
69+
}</textarea>
70+
71+
<textarea class="playable playable-html" style="height: 180px;">
72+
<div class="container">
73+
<div class="inner">
74+
<div class="physical box"></div>
75+
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale.
76+
</div>
77+
<div class="inner">
78+
<div class="logical box"></div>
79+
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale.
80+
</div>
81+
</div>
82+
</textarea>
83+
84+
85+
<div class="playable-buttons">
86+
<input id="reset" type="button" value="Reset">
87+
</div>
88+
</body>
89+
<script src="../css-cookbook/playable.js"></script>
90+
91+
</html>

‎logical/margin-longhands.html

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Margin Longhands</title>
7+
<link rel="stylesheet" href="../css-cookbook/styles.css">
8+
<style>
9+
10+
.container {
11+
display: flex;
12+
}
13+
.inner {
14+
border: 2px dotted grey;
15+
}
16+
.box {
17+
border: 2px solid rgb(96, 139, 168);
18+
border-radius: 5px;
19+
background-color: rgba(96, 139, 168, .2);
20+
padding: 10px;
21+
width: 220px;
22+
height:220px;
23+
}
24+
25+
26+
</style>
27+
28+
<style class="editable">
29+
.box {
30+
writing-mode: horizontal-tb;
31+
direction: ltr;
32+
}
33+
34+
.physical {
35+
margin-top: 5px;
36+
margin-right: 0;
37+
margin-bottom: 2em;
38+
margin-left: 50px;
39+
}
40+
41+
.logical {
42+
margin-block-start: 5px;
43+
margin-inline-end: 0;
44+
margin-block-end: 2em;
45+
margin-inline-start: 50px;
46+
}
47+
</style>
48+
</head>
49+
50+
<body>
51+
<section class="preview">
52+
<div class="container">
53+
<div class="inner">
54+
<div class="physical box">
55+
margin-top: 5px<br>
56+
margin-right: 0<br>
57+
margin-bottom: 2em<br>
58+
margin-left: 50px
59+
</div>
60+
</div>
61+
<div class="inner">
62+
<div class="logical box">
63+
margin-block-start: 5px<br>
64+
margin-inline-end: 0<br>
65+
margin-block-end: 2em<br>
66+
margin-inline-start: 50px
67+
</div>
68+
</div>
69+
</div>
70+
</section>
71+
72+
<textarea class="playable playable-css" style="height: 320px;">
73+
.box {
74+
writing-mode: horizontal-tb;
75+
direction: ltr;
76+
}
77+
78+
.physical {
79+
margin-top: 5px;
80+
margin-right: 0;
81+
margin-bottom: 2em;
82+
margin-left: 50px;
83+
}
84+
85+
.logical {
86+
margin-block-start: 5px;
87+
margin-inline-end: 0;
88+
margin-block-end: 2em;
89+
margin-inline-start: 50px;
90+
}</textarea>
91+
92+
<textarea class="playable playable-html" style="height: 340px;">
93+
<div class="container">
94+
<div class="inner">
95+
<div class="physical box">
96+
margin-top: 5px<br>
97+
margin-right: 0<br>
98+
margin-bottom: 2em<br>
99+
margin-left: 50px
100+
</div>
101+
</div>
102+
<div class="inner">
103+
<div class="logical box">
104+
margin-block-start: 5px<br>
105+
margin-inline-end: 0<br>
106+
margin-block-end: 2em<br>
107+
margin-inline-start: 50px
108+
</div>
109+
</div>
110+
</div>
111+
</textarea>
112+
113+
114+
<div class="playable-buttons">
115+
<input id="reset" type="button" value="Reset">
116+
</div>
117+
</body>
118+
<script src="../css-cookbook/playable.js"></script>
119+
120+
</html>

0 commit comments

Comments
 (0)