Skip to content

Commit 23a75ce

Browse files
chrisdavidmillschrisdavidmills
committed
a few minor tweaks to the layout recipes
1 parent 79b854b commit 23a75ce

File tree

3 files changed

+35
-53
lines changed

3 files changed

+35
-53
lines changed

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

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -54,28 +54,25 @@
5454
</div>
5555
</section>
5656

57-
<textarea class="playable playable-css">
57+
<textarea class="playable playable-css">
5858
.container {
5959
display: flex;
6060
flex-wrap: wrap;
6161
}
62-
62+
6363
.container>* {
6464
margin: 0 10px;
6565
flex: 1 1 200px;
6666
}
6767
</textarea>
6868

69-
<textarea class="playable playable-html">
69+
<textarea class="playable playable-html">
7070
<div class="container">
71-
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
72-
73-
<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>
74-
75-
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.
76-
</p>
77-
78-
</div>
71+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
72+
<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>
73+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.
74+
</p>
75+
</div>
7976
</textarea>
8077

8178
<div class="playable-buttons">
@@ -84,4 +81,4 @@
8481
</body>
8582
<script src="playable.js"></script>
8683

87-
</html>
84+
</html>

‎css-cookbook/columns-flexbox.html‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -53,31 +53,26 @@
5353
</div>
5454
</section>
5555

56-
<textarea class="playable playable-css">
56+
<textarea class="playable playable-css">
5757
.container {
5858
display: flex;
5959
}
60-
60+
6161
.container>* {
6262
margin: 0 10px;
6363
flex: 1;
6464
}
6565
</textarea>
6666

67-
<textarea class="playable playable-html">
67+
<textarea class="playable playable-html">
6868
<div class="container">
69-
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
69+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
7070
melon azuki bean garlic.</p>
71-
72-
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
71+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
7372
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
74-
75-
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
73+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
7674
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
77-
carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin
78-
onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot
79-
carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
80-
75+
carrot soko. Lotus root water spinach.</p>
8176
</div>
8277
</textarea>
8378

@@ -87,4 +82,4 @@
8782
</body>
8883
<script src="playable.js"></script>
8984

90-
</html>
85+
</html>

‎css-cookbook/columns-multicol.html‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -37,43 +37,33 @@
3737

3838
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
3939
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
40-
carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin
41-
onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi
42-
beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper
43-
artichoke.
4440
</p>
4541

4642
</div>
4743
</section>
4844

49-
<textarea class="playable playable-css">
50-
.container {
51-
column-width: 10em;
52-
column-rule: 1px solid rgb(75, 70, 74);
53-
}
54-
</textarea>
55-
56-
<textarea class="playable playable-html">
57-
<div class="container">
58-
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
59-
melon azuki bean garlic.</p>
60-
61-
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
62-
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
63-
64-
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
65-
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
66-
carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin
67-
onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot
68-
carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
69-
70-
</div>
71-
</textarea>
45+
<textarea class="playable playable-css">
46+
.container {
47+
column-width: 10em;
48+
column-rule: 1px solid rgb(75, 70, 74);
49+
}
50+
</textarea>
51+
52+
<textarea class="playable playable-html">
53+
<div class="container">
54+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
55+
melon azuki bean garlic.</p>
56+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
57+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
58+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
59+
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach.</p>
60+
</div>
61+
</textarea>
7262

7363
<div class="playable-buttons">
7464
<input id="reset" type="button" value="Reset">
7565
</div>
7666
</body>
7767
<script src="playable.js"></script>
7868

79-
</html>
69+
</html>

0 commit comments

Comments
 (0)