Skip to content

Commit a365160

Browse files
jessicarushjessicarush
committed
Style: minor edits
1 parent b482417 commit a365160

File tree

5 files changed

+226
-222
lines changed

5 files changed

+226
-222
lines changed

‎css_columns/base.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,11 @@ a:active {
100100
height: 900px; */
101101
}
102102

103+
.container-c {
104+
column-width: 150px;
105+
/* column-count: 3; */
106+
}
107+
103108

104109
/* COMPONENTS ------------------------------------------------------------- */
105110

‎css_columns/index.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,89 @@ <h1 class="spanning-element">Spanning element</h1>
8888
<p>
8989
Donec id odio fringilla, convallis mi eget, porttitor nisi. Suspendisse ultricies aliquet ipsum, et interdum ligula. Nullam dignissim ut ipsum non faucibus. Donec accumsan consequat justo, ultricies iaculis risus lobortis laoreet. Sed nec placerat est. Duis tincidunt laoreet libero a pellentesque. Aliquam erat volutpat. Nunc luctus diam nunc. Aenean elementum purus et erat gravida, vel dictum lacus volutpat. Duis neque ligula, cursus a lobortis eget, malesuada eget nisl. Fusce commodo rutrum magna, placerat viverra massa eleifend sit amet. Maecenas nec rutrum ante.
9090
</p>
91+
</div>
9192

93+
<div class="container-c base">
94+
<div>
95+
<input type="checkbox" id="one" name="one" value="one">
96+
<label for="one">one</label>
97+
</div>
98+
<div>
99+
<input type="checkbox" id="two" name="two" value="two">
100+
<label for="two">two</label>
101+
</div>
102+
<div>
103+
<input type="checkbox" id="twelve" name="three" value="three">
104+
<label for="three">three</label>
105+
</div>
106+
<div>
107+
<input type="checkbox" id="four" name="four" value="four">
108+
<label for="four">four</label>
109+
</div>
110+
<div>
111+
<input type="checkbox" id="five" name="five" value="five">
112+
<label for="five">five</label>
113+
</div>
114+
<div>
115+
<input type="checkbox" id="six" name="six" value="six">
116+
<label for="six">six</label>
117+
</div>
118+
<div>
119+
<input type="checkbox" id="seven" name="seven" value="seven">
120+
<label for="seven">seven</label>
121+
</div>
122+
<div>
123+
<input type="checkbox" id="eight" name="eight" value="eight">
124+
<label for="eight">eight</label>
125+
</div>
126+
<div>
127+
<input type="checkbox" id="nine" name="nine" value="nine">
128+
<label for="nine">nine</label>
129+
</div>
130+
<div>
131+
<input type="checkbox" id="ten" name="ten" value="ten">
132+
<label for="ten">ten</label>
133+
</div>
134+
<div>
135+
<input type="checkbox" id="eleven" name="eleven" value="eleven">
136+
<label for="eleven">eleven</label>
137+
</div>
138+
<div>
139+
<input type="checkbox" id="twelve" name="twelve" value="twelve">
140+
<label for="twelve">twelve</label>
141+
</div>
142+
<div>
143+
<input type="checkbox" id="thirteen" name="thirteen" value="thirteen">
144+
<label for="thirteen">thirteen</label>
145+
</div>
146+
<div>
147+
<input type="checkbox" id="fourteen" name="fourteen" value="fourteen">
148+
<label for="fourteen">fourteen</label>
149+
</div>
150+
<div>
151+
<input type="checkbox" id="fifteen" name="fifteen" value="fifteen">
152+
<label for="fifteen">fifteen</label>
153+
</div>
154+
<div>
155+
<input type="checkbox" id="sixteen" name="sixteen" value="sixteen">
156+
<label for="sixteen">sixteen</label>
157+
</div>
158+
<div>
159+
<input type="checkbox" id="seventeen" name="seventeen" value="seventeen">
160+
<label for="seventeen">seventeen</label>
161+
</div>
162+
<div>
163+
<input type="checkbox" id="eighteen" name="eighteen" value="eighteen">
164+
<label for="eighteen">eighteen</label>
165+
</div>
166+
<div>
167+
<input type="checkbox" id="nineteen" name="nineteen" value="nineteen">
168+
<label for="nineteen">nineteen</label>
169+
</div>
170+
<div>
171+
<input type="checkbox" id="twenty" name="twenty" value="twenty">
172+
<label for="twenty">twenty</label>
173+
</div>
92174
</div>
93175

94176
</body>

‎css_flexbox/base.css

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,11 +69,8 @@ a:active {
6969
margin: 15px auto;
7070
}
7171

72-
.fixed {
73-
border: solid 2px aquamarine;
74-
width: 800px;
75-
height: 800px;
76-
margin: 15px auto;
72+
.fixed-height {
73+
height: 350px;
7774
}
7875

7976
.box {

‎css_flexbox/index.html

Lines changed: 127 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -19,136 +19,148 @@ <h1> Flexbox.</h1>
1919
<p>Though you <em>could</em> create entire page layouts with flexbox, it's most suitable for working with interface elements and smaller components.</p>
2020
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Mozillas guide on Flexbox Layouts</a><br>
2121
<a href="https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/">A Flexbox playground.</a></p>
22-
</div>
23-
<div class="container-a__content-c box">
24-
<p>Hi</p>
25-
</div>
2622
</div>
23+
<div class="container-a__content-c box">
24+
<p>Hi</p>
25+
</div>
26+
</div>
2727

2828

29-
<div class="container-b flexible">
30-
<div class="container-b__content-a box">
31-
<h1>Flexbox Container Properties.</h1>
32-
</div>
33-
<div class="container-b__content-b box">
34-
<code>
35-
<ul>
36-
<li>display: flexbox;</li>
37-
<li>flex-direction: row-reverse;</li>
38-
<li>justify-content: space-between;</li>
39-
<li>align-items: center;</li>
40-
<li>flex-wrap: wrap;</li>
41-
<li class="comment">/* Note: align-content has no effect when there is only one line of flex items */</li>
42-
<li>align-content: space-between;</li>
43-
<li class="comment"><em>/* (Shorthand) flex-flow: flex-direction flex-wrap; */</em></li>
44-
<li>flex-flow: row wrap;</li>
45-
<li class="comment"><em>/* (Shorthand) place-content: align-content justify-content; */</em></li>
46-
<li>place-content: end space-between;</li>
47-
</ul>
48-
</code>
49-
</div>
50-
<div class="container-b__content-c box">
51-
<p>Hi</p>
52-
</div>
29+
<div class="container-b flexible">
30+
<div class="container-b__content-a box">
31+
<h1>Flexbox Container Properties.</h1>
32+
</div>
33+
<div class="container-b__content-b box">
34+
<code>
35+
<ul>
36+
<li>display: flexbox;</li>
37+
<li>flex-direction: row-reverse;</li>
38+
<li>justify-content: space-between;</li>
39+
<li>align-items: center;</li>
40+
<li>flex-wrap: wrap;</li>
41+
<li class="comment">/* Note: align-content has no effect when there is only one line of flex items */</li>
42+
<li>align-content: space-between;</li>
43+
<li class="comment"><em>/* (Shorthand) flex-flow: flex-direction flex-wrap; */</em></li>
44+
<li>flex-flow: row wrap;</li>
45+
<li class="comment"><em>/* (Shorthand) place-content: align-content justify-content; */</em></li>
46+
<li>place-content: end space-between;</li>
47+
</ul>
48+
</code>
49+
</div>
50+
<div class="container-b__content-c box">
51+
<p>Hi</p>
5352
</div>
53+
</div>
5454

5555

56-
<div class="container-c flexible">
57-
<div class="container-c__content-a box">
58-
<h1>Flexbox Items Properties.</h1>
59-
</div>
60-
<div class="container-c__content-b box">
61-
<code>
62-
<ul>
63-
<li>order: 1;</li>
64-
<li>flex-grow: 1;</li>
65-
<li>flex-shrink: 1;</li>
66-
<li>flex-basis: 200px;</li>
67-
<li>align-self: center;</li>
68-
<li class="comment"><em>/* (Shorthand) flex: flex-grow flex-shrink flex-basis; */</em></li>
69-
<li>flex: 2 0 0;</li>
70-
</ul>
71-
</code>
72-
</div>
73-
<div class="container-c__content-c box">
74-
<p>Hi</p>
75-
</div>
56+
<div class="container-c flexible">
57+
<div class="container-c__content-a box">
58+
<h1>Flexbox Items Properties.</h1>
7659
</div>
60+
<div class="container-c__content-b box">
61+
<code>
62+
<ul>
63+
<li>order: 1;</li>
64+
<li>flex-grow: 1;</li>
65+
<li>flex-shrink: 1;</li>
66+
<li>flex-basis: 200px;</li>
67+
<li>align-self: center;</li>
68+
<li class="comment"><em>/* (Shorthand) flex: flex-grow flex-shrink flex-basis; */</em></li>
69+
<li>flex: 2 0 0;</li>
70+
</ul>
71+
</code>
72+
</div>
73+
<div class="container-c__content-c box">
74+
<p>Hi</p>
75+
</div>
76+
</div>
7777

78-
<div class="container-d flexible">
79-
<div class="container-d__content-a box">
80-
<p>A</p>
81-
</div>
82-
<div class="container-d__content-b box">
83-
<p>B</p>
84-
</div>
85-
<div class="container-d__content-c box">
86-
<p>C</p>
87-
</div>
78+
<div class="container-d flexible">
79+
<div class="container-d__content-a box">
80+
<p>A</p>
81+
</div>
82+
<div class="container-d__content-b box">
83+
<p>B</p>
8884
</div>
85+
<div class="container-d__content-c box">
86+
<p>C</p>
87+
</div>
88+
</div>
8989

90-
<div class="container-e fixed">
91-
<div class="container-e__content-a box">
92-
<p>A</p>
93-
</div>
94-
<div class="container-e__content-b box">
95-
<p>B</p>
96-
</div>
97-
<div class="container-e__content-c box">
98-
<p>C</p>
99-
</div>
90+
<div class="container-e flexible fixed-height">
91+
<div class="container-e__content-a box">
92+
<p>A</p>
93+
</div>
94+
<div class="container-e__content-b box">
95+
<p>B</p>
96+
</div>
97+
<div class="container-e__content-c box">
98+
<p>C</p>
10099
</div>
100+
</div>
101101

102-
<div class="container-f fixed">
103-
<div class="container-f__content-a box">
104-
<p>A</p>
105-
</div>
106-
<div class="container-f__content-b box">
107-
<p>B</p>
108-
</div>
109-
<div class="container-f__content-c box">
110-
<p>C</p>
111-
</div>
102+
<div class="container-f flexible fixed-height">
103+
<div class="container-f__content-a box">
104+
<p>A</p>
112105
</div>
106+
<div class="container-f__content-b box">
107+
<p>B</p>
108+
</div>
109+
<div class="container-f__content-c box">
110+
<p>C</p>
111+
</div>
112+
</div>
113113

114-
<div class="container-g flexible">
115-
<div class="container-g__content-a box">
116-
<p>A</p>
117-
</div>
118-
<div class="container-g__content-b box">
119-
<p>B</p>
120-
</div>
121-
<div class="container-g__content-c box">
122-
<p>C</p>
123-
</div>
124-
<div class="container-g__content-d box">
125-
<p>D</p>
126-
</div>
127-
<div class="container-g__content-e box">
128-
<p>E</p>
129-
</div>
114+
<div class="container-g flexible">
115+
<div class="container-g__content-a box">
116+
<p>A</p>
117+
</div>
118+
<div class="container-g__content-b box">
119+
<p>B</p>
130120
</div>
121+
<div class="container-g__content-c box">
122+
<p>C</p>
123+
</div>
124+
<div class="container-g__content-d box">
125+
<p>D</p>
126+
</div>
127+
<div class="container-g__content-e box">
128+
<p>E</p>
129+
</div>
130+
</div>
131131

132-
<div class="container-h fixed">
133-
<div class="container-h__content-a box">
134-
<p>A</p>
135-
</div>
136-
<div class="container-h__content-b box">
137-
<p>B</p>
138-
</div>
139-
<div class="container-h__content-c box">
140-
<p>C</p>
141-
</div>
142-
<div class="container-h__content-c box">
143-
<p>C</p>
144-
</div>
145-
<div class="container-h__content-c box">
146-
<p>C</p>
147-
</div>
148-
<div class="container-h__content-c box">
149-
<p>C</p>
150-
</div>
132+
<div class="container-h flexible">
133+
<div class="container-h__content-a box">
134+
<p>A</p>
135+
</div>
136+
<div class="container-h__content-b box">
137+
<p>B</p>
138+
</div>
139+
<div class="container-h__content-c box">
140+
<p>C</p>
141+
</div>
142+
<div class="container-h__content-c box">
143+
<p>C</p>
144+
</div>
145+
<div class="container-h__content-c box">
146+
<p>C</p>
147+
</div>
148+
<div class="container-h__content-c box">
149+
<p>C</p>
150+
</div>
151+
<div class="container-h__content-c box">
152+
<p>C</p>
153+
</div>
154+
<div class="container-h__content-c box">
155+
<p>C</p>
156+
</div>
157+
<div class="container-h__content-c box">
158+
<p>C</p>
159+
</div>
160+
<div class="container-h__content-c box">
161+
<p>C</p>
151162
</div>
163+
</div>
152164

153-
</body>
154-
</html>
165+
</body>
166+
</html>

0 commit comments

Comments
 (0)