Skip to content

Commit 9c5fcb1

Browse files
rachelandrewrachelandrew
committed
Logical Properties examples for guides.
1 parent 67fc0cb commit 9c5fcb1

5 files changed

+422
-0
lines changed

‎logical/intro-feature-queries.html

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Feature Queries</title>
7+
<link rel="stylesheet" href="../css-cookbook/styles.css">
8+
<style>
9+
.grid {
10+
display: grid;
11+
grid-template-columns: repeat(3, 1fr);
12+
grid-auto-rows: minmax(100px, auto);
13+
border: 2px solid rgb(96, 139, 168);
14+
border-radius: 5px;
15+
}
16+
17+
.grid > * {
18+
border-radius: 5px;
19+
border: 2px solid rgba(96, 139, 168, .4);
20+
background-color: rgba(96, 139, 168, .2);
21+
padding: 10px;
22+
}
23+
24+
.grid :nth-child(1) {
25+
align-self: start;
26+
}
27+
28+
.grid :nth-child(2) {
29+
justify-self: end;
30+
}
31+
</style>
32+
33+
<style class="editable">
34+
.grid {
35+
width: 400px;
36+
writing-mode: vertical-rl;
37+
}
38+
39+
@supports(inline-size: 400px) {
40+
.grid {
41+
width: auto;
42+
inline-size: 400px;
43+
}
44+
}
45+
</style>
46+
</head>
47+
48+
<body>
49+
<section class="preview">
50+
<div class="grid">
51+
<div>One</div>
52+
<div>Two</div>
53+
<div>Three</div>
54+
<div>Four</div>
55+
</div>
56+
</section>
57+
58+
<textarea class="playable playable-css" style="height: 190px;">
59+
.grid {
60+
width: 400px;
61+
writing-mode: vertical-rl;
62+
}
63+
64+
@supports(inline-size: 400px) {
65+
.grid {
66+
width: auto;
67+
inline-size: 400px;
68+
}
69+
}
70+
</textarea>
71+
72+
<textarea class="playable playable-html" style="height: 140px;">
73+
<div class="grid">
74+
<div>One</div>
75+
<div>Two</div>
76+
<div>Three</div>
77+
<div>Four</div>
78+
</div>
79+
</textarea>
80+
81+
82+
<div class="playable-buttons">
83+
<input id="reset" type="button" value="Reset">
84+
</div>
85+
</body>
86+
<script src="../css-cookbook/playable.js"></script>
87+
88+
</html>

‎logical/intro-grid-example.html

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Grid and writing modes example</title>
7+
<link rel="stylesheet" href="../css-cookbook/styles.css">
8+
<style>
9+
.grid {
10+
display: grid;
11+
grid-template-columns: repeat(3, 1fr);
12+
grid-auto-rows: minmax(100px, auto);
13+
border: 2px solid rgb(96, 139, 168);
14+
border-radius: 5px;
15+
}
16+
17+
.grid > * {
18+
border-radius: 5px;
19+
border: 2px solid rgba(96, 139, 168, .4);
20+
background-color: rgba(96, 139, 168, .2);
21+
padding: 10px;
22+
}
23+
24+
.grid :nth-child(1) {
25+
align-self: start;
26+
}
27+
28+
.grid :nth-child(2) {
29+
justify-self: end;
30+
}
31+
</style>
32+
33+
<style class="editable">
34+
.grid {
35+
writing-mode: vertical-rl;
36+
inline-size: 400px;
37+
}
38+
</style>
39+
</head>
40+
41+
<body>
42+
<section class="preview">
43+
<div class="grid">
44+
<div>One</div>
45+
<div>Two</div>
46+
<div>Three</div>
47+
<div>Four</div>
48+
</div>
49+
</section>
50+
51+
<textarea class="playable playable-css" style="height: 170px;">
52+
.grid {
53+
writing-mode: vertical-rl;
54+
inline-size: 400px;
55+
}
56+
</textarea>
57+
58+
<textarea class="playable playable-html" style="height: 140px;">
59+
<div class="grid">
60+
<div>One</div>
61+
<div>Two</div>
62+
<div>Three</div>
63+
<div>Four</div>
64+
</div>
65+
</textarea>
66+
67+
68+
<div class="playable-buttons">
69+
<input id="reset" type="button" value="Reset">
70+
</div>
71+
</body>
72+
<script src="../css-cookbook/playable.js"></script>
73+
74+
</html>

‎logical/size-inline-block.html

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

‎logical/size-max.html

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Size: max-inline-size</title>
7+
<link rel="stylesheet" href="../css-cookbook/styles.css">
8+
<style>
9+
10+
.container {
11+
display: flex;
12+
}
13+
.box {
14+
border: 2px solid rgb(96, 139, 168);
15+
border-radius: 5px;
16+
background-color: rgba(96, 139, 168, .2);
17+
padding: 10px;
18+
margin: 10px;
19+
}
20+
21+
22+
</style>
23+
24+
<style class="editable">
25+
.box {
26+
writing-mode: horizontal-tb;
27+
}
28+
29+
.physical {
30+
max-width: 200px;
31+
}
32+
33+
.logical {
34+
max-inline-size: 200px;
35+
}
36+
</style>
37+
</head>
38+
39+
<body>
40+
<section class="preview">
41+
<div class="container">
42+
<div class="physical box">
43+
I have a max-width of 200px.
44+
</div>
45+
46+
<div class="logical box">
47+
I have an max-inline-size of 200px.
48+
</div>
49+
</div>
50+
</section>
51+
52+
<textarea class="playable playable-css" style="height: 240px;">
53+
.box {
54+
writing-mode: horizontal-tb;
55+
}
56+
57+
.physical {
58+
max-width: 200px;
59+
}
60+
61+
.logical {
62+
max-inline-size: 200px;
63+
}</textarea>
64+
65+
<textarea class="playable playable-html" style="height: 180px;">
66+
<div class="container">
67+
<div class="physical box">
68+
I have a max-width of 200px.
69+
</div>
70+
71+
<div class="logical box">
72+
I have an max-inline-size of 200px.
73+
</div>
74+
</div>
75+
</textarea>
76+
77+
78+
<div class="playable-buttons">
79+
<input id="reset" type="button" value="Reset">
80+
</div>
81+
</body>
82+
<script src="../css-cookbook/playable.js"></script>
83+
84+
</html>

0 commit comments

Comments
 (0)