Skip to content

Commit 046991a

Browse files
chrisdavidmillschrisdavidmills
committed
Merge branch 'master' of github.com:mdn/css-examples
2 parents 8100d31 + b773fd3 commit 046991a

File tree

16 files changed

+1304
-1
lines changed

16 files changed

+1304
-1
lines changed

‎grid/playable.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
var section = document.querySelector('section');
2+
var editable = document.querySelector('.editable');
3+
var textareaHTML = document.querySelector('.playable-html');
4+
var textareaCSS = document.querySelector('.playable-css');
5+
var reset = document.getElementById('reset');
6+
var htmlCode = textareaHTML.value;
7+
var cssCode = textareaCSS.value;
8+
9+
function fillCode() {
10+
editable.innerHTML = textareaCSS.value;
11+
section.innerHTML = textareaHTML.value;
12+
}
13+
14+
reset.addEventListener('click', function () {
15+
textareaHTML.value = htmlCode;
16+
textareaCSS.value = cssCode;
17+
fillCode();
18+
});
19+
20+
textareaHTML.addEventListener('input', fillCode);
21+
textareaCSS.addEventListener('input', fillCode);
22+
window.addEventListener('load', fillCode);

‎grid/styles.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/* Some default styling for cookbook examples */
2+
/*
3+
rgb(53,43,34)
4+
rgb(75,70,74)
5+
rgb(95,97,110)
6+
rgb(137,151,188)
7+
rgb(160,178,226)
8+
*/
9+
body {
10+
background-color: #fff;
11+
color: #333;
12+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
13+
padding: 0;
14+
margin: 0;
15+
}
16+
17+
/* styles for the editor */
18+
19+
.playable {
20+
font-family: monospace;
21+
display: block;
22+
margin-bottom: 10px;
23+
background-color: #F4F7F8;
24+
border: none;
25+
border-left: 6px solid #558ABB;
26+
color: #4D4E53;
27+
width: 90%;
28+
max-width: 700px;
29+
padding: 10px 10px 0px;
30+
font-size: 90%;
31+
}
32+
33+
.playable-css {
34+
height: 80px;
35+
}
36+
37+
.playable-html {
38+
height: 160px;
39+
}
40+
41+
.playable-buttons {
42+
text-align: right;
43+
width: 90%;
44+
max-width: 700px;
45+
padding: 5px 10px 5px 26px;
46+
font-size: 100%;
47+
}
48+
49+
.preview {
50+
width: 90%;
51+
max-width: 700px;
52+
border: 1px solid #4D4E53;
53+
border-radius: 2px;
54+
padding: 10px 14px 10px 10px;
55+
margin-bottom: 10px;
56+
}
57+
58+
.preview input {
59+
display: block;
60+
margin: 5px;
61+
}

‎grid/subgrid/adding-line-names.html‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Subgrid: names can be added to the subgrid</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.grid {
13+
border: 2px solid #f76707;
14+
border-radius: 5px;
15+
background-color: #fff4e6;
16+
}
17+
18+
.item {
19+
border: 2px solid #ffa94d;
20+
border-radius: 5px;
21+
background-color: #ffd8a8;
22+
color: #d9480f;
23+
}
24+
25+
.subitem {
26+
background-color: rgb(40, 240, 83);
27+
}
28+
</style>
29+
30+
<style class="editable">
31+
.grid {
32+
display: grid;
33+
grid-template-columns: 1fr 1fr 1fr [col-start] 1fr 1fr 1fr [col-end] 1fr 1fr 1fr;
34+
grid-template-rows: repeat(4, minmax(100px, auto));
35+
gap: 20px;
36+
}
37+
38+
.item {
39+
display: grid;
40+
grid-column: 2 / 7;
41+
grid-row: 2 / 4;
42+
grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e] [sub-f];
43+
grid-template-rows: subgrid;
44+
}
45+
46+
.subitem {
47+
grid-column: col-start / col-end;
48+
grid-row: 1 / 3;
49+
}
50+
51+
.subitem2 {
52+
background-color: rgba(0, 0, 0, 0.5);
53+
grid-column: sub-b / sub-d;
54+
grid-row: 1;
55+
}
56+
</style>
57+
</head>
58+
59+
<body>
60+
<section class="preview">
61+
<div class="grid">
62+
<div class="item">
63+
<div class="subitem"></div>
64+
<div class="subitem2"></div>
65+
</div>
66+
</div>
67+
</section>
68+
69+
<textarea class="playable playable-css" style="height: 350px;">
70+
.grid {
71+
display: grid;
72+
grid-template-columns: 1fr 1fr 1fr [col-start] 1fr 1fr 1fr [col-end] 1fr 1fr 1fr;
73+
grid-template-rows: repeat(4, minmax(100px, auto));
74+
gap: 20px;
75+
}
76+
77+
.item {
78+
display: grid;
79+
grid-column: 2 / 7;
80+
grid-row: 2 / 4;
81+
grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e] [sub-f];
82+
grid-template-rows: subgrid;
83+
}
84+
85+
.subitem {
86+
grid-column: col-start / col-end;
87+
grid-row: 1 / 3;
88+
}
89+
90+
.subitem2 {
91+
background-color: rgba(0,0,0,.5);
92+
grid-column: sub-b / sub-d;
93+
grid-row: 1;
94+
}
95+
</textarea>
96+
97+
<textarea class="playable playable-html" style="height: 200px;">
98+
<div class="grid">
99+
<div class="item">
100+
<div class="subitem"></div>
101+
<div class="subitem2"></div>
102+
</div>
103+
</div>
104+
</textarea>
105+
106+
<div class="playable-buttons">
107+
<input id="reset" type="button" value="Reset" />
108+
</div>
109+
</body>
110+
<script src="../playable.js"></script>
111+
</html>

‎grid/subgrid/both.html‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Subgrid: rows and columns</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.grid {
13+
border: 2px solid #f76707;
14+
border-radius: 5px;
15+
background-color: #fff4e6;
16+
}
17+
18+
.item {
19+
border: 2px solid #ffa94d;
20+
border-radius: 5px;
21+
background-color: #ffd8a8;
22+
color: #d9480f;
23+
}
24+
25+
.subitem {
26+
background-color: rgb(40, 240, 83);
27+
}
28+
</style>
29+
30+
<style class="editable">
31+
.grid {
32+
display: grid;
33+
grid-template-columns: repeat(9, 1fr);
34+
grid-template-rows: repeat(4, minmax(100px, auto));
35+
}
36+
37+
.item {
38+
display: grid;
39+
grid-column: 2 / 7;
40+
grid-row: 2 / 4;
41+
grid-template-columns: subgrid;
42+
grid-template-rows: subgrid;
43+
}
44+
45+
.subitem {
46+
grid-column: 3 / 6;
47+
grid-row: 1 / 3;
48+
}
49+
</style>
50+
</head>
51+
52+
<body>
53+
<section class="preview">
54+
<div class="grid">
55+
<div class="item">
56+
<div class="subitem"></div>
57+
</div>
58+
</div>
59+
</section>
60+
61+
<textarea class="playable playable-css" style="height: 350px;">
62+
.grid {
63+
display: grid;
64+
grid-template-columns: repeat(9, 1fr);
65+
grid-template-rows: repeat(4, minmax(100px, auto));
66+
}
67+
68+
.item {
69+
display: grid;
70+
grid-column: 2 / 7;
71+
grid-row: 2 / 4;
72+
grid-template-columns: subgrid;
73+
grid-template-rows: subgrid;
74+
}
75+
76+
.subitem {
77+
grid-column: 3 / 6;
78+
grid-row: 1 / 3;
79+
}
80+
</textarea>
81+
82+
<textarea class="playable playable-html" style="height: 200px;">
83+
<div class="grid">
84+
<div class="item">
85+
<div class="subitem"></div>
86+
</div>
87+
</div>
88+
</textarea>
89+
90+
<div class="playable-buttons">
91+
<input id="reset" type="button" value="Reset" />
92+
</div>
93+
</body>
94+
<script src="../playable.js"></script>
95+
</html>

‎grid/subgrid/columns.html‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Subgrid: columns</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.grid {
13+
border: 2px solid #f76707;
14+
border-radius: 5px;
15+
background-color: #fff4e6;
16+
}
17+
18+
.item {
19+
border: 2px solid #ffa94d;
20+
border-radius: 5px;
21+
background-color: #ffd8a8;
22+
color: #d9480f;
23+
}
24+
25+
.subitem {
26+
background-color: rgb(40, 240, 83);
27+
}
28+
</style>
29+
30+
<style class="editable">
31+
.grid {
32+
display: grid;
33+
grid-template-columns: repeat(9, 1fr);
34+
grid-template-rows: repeat(4, minmax(100px, auto));
35+
}
36+
37+
.item {
38+
display: grid;
39+
grid-column: 2 / 7;
40+
grid-row: 2 / 4;
41+
grid-template-columns: subgrid;
42+
grid-template-rows: repeat(3, 80px);
43+
}
44+
45+
.subitem {
46+
grid-column: 3 / 6;
47+
grid-row: 1 / 3;
48+
}
49+
</style>
50+
</head>
51+
52+
<body>
53+
<section class="preview">
54+
<div class="grid">
55+
<div class="item">
56+
<div class="subitem"></div>
57+
</div>
58+
</div>
59+
</section>
60+
61+
<textarea class="playable playable-css" style="height: 350px;">
62+
.grid {
63+
display: grid;
64+
grid-template-columns: repeat(9, 1fr);
65+
grid-template-rows: repeat(4, minmax(100px, auto));
66+
}
67+
68+
.item {
69+
display: grid;
70+
grid-column: 2 / 7;
71+
grid-row: 2 / 4;
72+
grid-template-columns: subgrid;
73+
grid-template-rows: repeat(3, 80px);
74+
}
75+
76+
.subitem {
77+
grid-column: 3 / 6;
78+
grid-row: 1 / 3;
79+
}
80+
</textarea>
81+
82+
<textarea class="playable playable-html" style="height: 200px;">
83+
<div class="grid">
84+
<div class="item">
85+
<div class="subitem"></div>
86+
</div>
87+
</div>
88+
</textarea>
89+
90+
<div class="playable-buttons">
91+
<input id="reset" type="button" value="Reset" />
92+
</div>
93+
</body>
94+
<script src="../playable.js"></script>
95+
</html>

0 commit comments

Comments
 (0)