Skip to content

Commit a235507

Browse files
author
jessicarush
committed
Docs: added notes
1 parent f7c0a79 commit a235507

File tree

5 files changed

+132
-124
lines changed

5 files changed

+132
-124
lines changed

‎css_columns/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ <h1 class="break-before">Properties</h1>
2828
<li>column-count: 3;</li>
2929
<li class="comment">/* content is arranged into &lt;integer&gt; columns of equal size. column-count can also be set to auto, in which case the number of columns is determined by other CSS properties, such as column-width */</li>
3030
<li>column-fill: auto;</li>
31-
<li class="comment">/* controls how an element's contents are balanced when broken into columns (auto, balance, balance-all). onlt works when container has a set height */</li>
31+
<li class="comment">/* controls how an element's contents are balanced when broken into columns (auto, balance, balance-all). only works when container has a set height */</li>
3232
<li>column-gap: 5rem;</li>
3333
<li class="comment">/* sets the size of the gap (gutter) between an element's columns */ </li>
3434
<li>column-rule-color: silver;</li>

‎css_flexbox/index.html‎

Lines changed: 112 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -18,137 +18,137 @@ <h1> Flexbox.</h1>
1818
<p>CSS Flexible Box Layout is intended for layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.</p>
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>
21-
<a href="https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/">A Flexbox playground.</a></p>
21+
<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>
2226
</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-
<ul>
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">
3534
<code>
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>
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>
4748
</code>
48-
</ul>
49-
</div>
50-
<div class="container-b__content-c box">
51-
<p>Hi</p>
49+
</div>
50+
<div class="container-b__content-c box">
51+
<p>Hi</p>
52+
</div>
5253
</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-
<ul>
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">
6261
<code>
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>
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>
7071
</code>
71-
</ul>
72-
</div>
73-
<div class="container-c__content-c box">
74-
<p>Hi</p>
72+
</div>
73+
<div class="container-c__content-c box">
74+
<p>Hi</p>
75+
</div>
7576
</div>
76-
</div>
7777

78-
<div class="container-d flexible">
79-
<div class="container-d__content-a box">
80-
<p>A</p>
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>
8188
</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>
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>
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>
96100
</div>
97-
<div class="container-e__content-c box">
98-
<p>C</p>
99-
</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>
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>
108112
</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>
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>
129130
</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>
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>
150151
</div>
151-
</div>
152152

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

‎css_grid/base.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ a:active {
121121
/* grid-row-start: 3; */
122122
/* grid-row-end: 3; */
123123
/* Shorthand: row-start / column-start / row-end / column-end */
124-
grid-area: 3 / 7 / span 1 / span 2;
124+
grid-area: 2 / 7 / span 1 / span 2;
125125
}
126126

127127
.container-c__content-b {

‎css_grid/index.html‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,11 @@ <h1> Explicit Grid.</h1>
1616
</div>
1717
<div class="container-a__content-b">
1818
<p> CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that elements children (which become Grid Items).</p>
19-
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">Mozillas guide on Grid Layouts</a><br>
20-
<a href="https://gridbyexample.com/">Rachel Andrew's Grid by Example</a></p>
19+
<p>
20+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">Mozillas guide on Grid Layouts</a><br>
21+
<a href="https://gridbyexample.com/">Rachel Andrew's Grid by Example</a><br>
22+
<a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS-Tricks Complete Guide to Grid.</a>
23+
</p>
2124
</div>
2225
</div>
2326

@@ -27,8 +30,9 @@ <h1> Explicit Grid.</h1>
2730
<h1>Grid Container Properties.</h1>
2831
</div>
2932
<div class="container-b__content-b">
30-
<ul>
31-
<code>
33+
<code>
34+
<ul>
35+
3236
<li>dispay: grid;</li>
3337
<li>grid-template-columns: 350px 1fr 150px;</li>
3438
<li>grid-template-rows: 50px auto 100px;</li>
@@ -43,8 +47,9 @@ <h1>Grid Container Properties.</h1>
4347
<li>grid-template: 50px auto 100px / 350px 1fr 150px; </li>
4448
<li class="comment"><em>/* (Shorthand) grid-template: 'grid-template-areas' template-row 'grid-template-areas' template-row / grid-template-columns */</em></li>
4549
<li>grid-template: 'side nav-l nav-r' 50px 'side main-l main-r' auto 'foot foot foot' 100px / 1fr 2fr 2fr; </li>
46-
</code>
47-
</ul>
50+
51+
</ul>
52+
</code>
4853
</div>
4954
</div>
5055

@@ -54,8 +59,9 @@ <h1>Grid Container Properties.</h1>
5459
<h1> Grid Item Properties.</h1>
5560
</div>
5661
<div class="container-c__content-b">
57-
<ul>
58-
<code>
62+
<code>
63+
<ul>
64+
5965
<li>grid-column-start: 3;</li>
6066
<li>grid-column-end: span 3;</li>
6167
<li>grid-row-start: 2;</li>
@@ -66,8 +72,9 @@ <h1> Grid Item Properties.</h1>
6672
<li>grid-row: 2 / 4; </li>
6773
<li class="comment"><em>/* (Shorthand) grid-area: row-start / column-start / row-end / column-end */</em></li>
6874
<li>grid-area: 2 / 4 / 3 / span 3;</li>
69-
</code>
70-
</ul>
75+
76+
</ul>
77+
</code>
7178
</div>
7279
</div>
7380

‎css_truncate_text/base.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ html {
2828
/* TYPOGRAPHY ------------------------------------------------------------- */
2929

3030
.truncate-text {
31+
/* display: inline-block; */
3132
overflow: hidden;
3233
white-space: nowrap;
3334
text-overflow: ellipsis;

0 commit comments

Comments
 (0)