Skip to content

Commit 4fecef4

Browse files
rachelandrewrachelandrew
committed
Fixing the grid example, adding downloadable versions
Downloadable versions don't have our playable bits in.
1 parent bbc5281 commit 4fecef4

8 files changed

+408
-30
lines changed

‎css-cookbook/center--download.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<!-- this is an example from the MDN Layout Cookbook -->
8+
<title>CSS Cookbook: center an element</title>
9+
10+
11+
<style>
12+
.container {
13+
border: 2px solid rgb(75, 70, 74);
14+
border-radius: .5em;
15+
height: 200px;
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
}
20+
21+
.item {
22+
border: 2px solid rgb(95, 97, 110);
23+
border-radius: .5em;
24+
padding: 20px;
25+
width: 10em;
26+
}
27+
</style>
28+
29+
30+
31+
</head>
32+
33+
<body>
34+
35+
<div class="container">
36+
<div class="item">I am centered!</div>
37+
</div>
38+
39+
</body>
40+
41+
</html>

‎css-cookbook/columns-flexbox--download.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<!-- this is an example from the MDN Layout Cookbook -->
8+
<title>CSS Cookbook: columns with flexbox</title>
9+
10+
<style>
11+
.container {
12+
border: 2px solid rgb(75, 70, 74);
13+
border-radius: .5em;
14+
padding: 20px 10px;
15+
display: flex;
16+
}
17+
18+
.container>* {
19+
padding: 10px;
20+
border: 2px solid rgb(95, 97, 110);
21+
border-radius: .5em;
22+
margin: 0 10px;
23+
flex: 1;
24+
}
25+
</style>
26+
27+
</head>
28+
29+
<body>
30+
<div class="container">
31+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi
32+
tomatillo
33+
melon azuki bean garlic.</p>
34+
35+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
36+
collard
37+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
38+
39+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach
40+
avocado
41+
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish
42+
spinach
43+
carrot soko.
44+
</p>
45+
46+
</div>
47+
48+
</html>

‎css-cookbook/columns-flexbox-wrapping--download.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<!-- this is an example from the MDN Layout Cookbook -->
8+
<title>CSS Cookbook: columns with flexbox, wrapping</title>
9+
10+
<style>
11+
.container {
12+
border: 2px solid rgb(75, 70, 74);
13+
border-radius: .5em;
14+
padding: 20px 10px;
15+
width: 500px;
16+
display: flex;
17+
flex-wrap: wrap;
18+
}
19+
20+
.container>* {
21+
padding: 10px;
22+
border: 2px solid rgb(95, 97, 110);
23+
border-radius: .5em;
24+
margin: 0 10px;
25+
flex: 1 1 200px;
26+
}
27+
</style>
28+
29+
</head>
30+
31+
<body>
32+
33+
<div class="container">
34+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi
35+
tomatillo
36+
melon azuki bean garlic.</p>
37+
38+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
39+
collard
40+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
41+
42+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach
43+
avocado
44+
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish
45+
spinach
46+
carrot soko.
47+
</p>
48+
</div>
49+
50+
</body>
51+
52+
</html>

‎css-cookbook/columns-grid--download.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<!-- this is an example from the MDN Layout Cookbook -->
8+
<title>CSS Cookbook: columns with grid</title>
9+
10+
<style>
11+
.container {
12+
border: 2px solid rgb(75, 70, 74);
13+
border-radius: .5em;
14+
padding: 20px;
15+
width: 500px;
16+
display: grid;
17+
grid-template-columns: 1fr 1fr;
18+
grid-gap: 20px;
19+
}
20+
21+
.container>* {
22+
padding: 10px;
23+
border: 2px solid rgb(95, 97, 110);
24+
border-radius: .5em;
25+
margin: 0;
26+
}
27+
</style>
28+
29+
30+
</head>
31+
32+
<body>
33+
<div class="container">
34+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi.</p>
35+
36+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
37+
collard greens.</p>
38+
39+
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts
40+
black-eyed pea prairie turnip leek lentil turnip greens parsnip. .</p>
41+
</div>
42+
43+
</body>
44+
45+
</html>

‎css-cookbook/columns-grid.html‎

Lines changed: 66 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,78 @@
11
<!doctype html>
22

33
<html lang="en">
4+
45
<head>
5-
<meta charset="utf-8">
6-
7-
<title>CSS Cookbook: columns with grid</title>
8-
9-
<link rel="stylesheet" href="styles.css">
10-
11-
<style>
12-
.container {
13-
border: 2px solid rgb(75,70,74);
14-
border-radius: .5em;
15-
padding: 20px;
16-
width: 500px;
17-
display: grid;
18-
grid-template-columns: 1fr 1fr;
19-
grid-gap: 20px;
20-
21-
}
22-
23-
.container > * {
24-
padding: 10px;
25-
border: 2px solid rgb(95,97,110);
26-
border-radius: .5em;
27-
margin: 0;
28-
}
29-
</style>
6+
<meta charset="utf-8">
7+
8+
<title>CSS Cookbook: columns with grid</title>
9+
10+
<link rel="stylesheet" href="styles.css">
11+
12+
<style>
13+
.container {
14+
border: 2px solid rgb(75, 70, 74);
15+
border-radius: .5em;
16+
padding: 20px;
17+
width: 500px;
18+
19+
}
20+
21+
.container>* {
22+
padding: 10px;
23+
border: 2px solid rgb(95, 97, 110);
24+
border-radius: .5em;
25+
margin: 0;
26+
}
27+
</style>
28+
29+
<style class="editable">
30+
.container {
31+
display: grid;
32+
grid-template-columns: 1fr 1fr;
33+
grid-gap: 20px;
34+
}
35+
</style>
3036

3137
</head>
3238

3339
<body>
34-
<div class="container">
35-
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
40+
<section class="preview">
41+
<div class="container">
42+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi.</p>
3643

37-
<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>
38-
39-
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
44+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
45+
collard greens.</p>
46+
47+
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts
48+
black-eyed pea prairie turnip leek lentil turnip greens parsnip. .</p>
49+
</div>
50+
</section>
51+
52+
<textarea class="playable playable-css">
53+
.container {
54+
display: grid;
55+
grid-template-columns: 1fr 1fr;
56+
grid-gap: 20px;
57+
}
58+
</textarea>
59+
60+
<textarea class="playable playable-html">
61+
<div class="container">
62+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi.</p>
63+
64+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens.</p>
65+
66+
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts
67+
black-eyed pea prairie turnip leek lentil turnip greens parsnip. .</p>
68+
</div>
69+
</textarea>
70+
71+
<div class="playable-buttons">
72+
<input id="reset" type="button" value="Reset">
4073
</div>
4174
</body>
75+
<script src="playable.js"></script>
76+
</body>
77+
4278
</html>

‎css-cookbook/columns-multicol--download.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<!-- this is an example from the MDN Layout Cookbook -->
8+
<title>CSS Cookbook: columns with multicol</title>
9+
10+
<link rel="stylesheet" href="styles.css">
11+
12+
<style>
13+
.container {
14+
border: 2px solid rgb(75, 70, 74);
15+
border-radius: .5em;
16+
padding: 20px;
17+
column-width: 10em;
18+
column-rule: 1px solid rgb(75, 70, 74);
19+
}
20+
</style>
21+
22+
</head>
23+
24+
<body>
25+
26+
<div class="container">
27+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi
28+
tomatillo
29+
melon azuki bean garlic.</p>
30+
31+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
32+
collard
33+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
34+
35+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach
36+
avocado
37+
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish
38+
spinach
39+
</p>
40+
41+
</div>
42+
43+
44+
</html>

0 commit comments

Comments
 (0)