Skip to content

Commit fc704c0

Browse files
jgthmsjgthms
committed
Add single properties
1 parent d4a5b6f commit fc704c0

File tree

131 files changed

+14622
-3
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

131 files changed

+14622
-3
lines changed

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,3 @@ _gh_pages
1515
_site
1616
images/trash
1717
node_modules
18-
property

‎_includes/lists/main-list.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1402,7 +1402,7 @@ <h2 class="property-name">
14021402

14031403
</header>
14041404

1405-
<style type="text/css">.background-attachment { background-image: url(/images/landscape.png);background-position: center center;background-size: cover;height: 200px; }</style>
1405+
<style type="text/css">.background-attachment { background-image: url(/images/landscape.jpg);background-position: center center;background-size: cover;height: 200px; }</style>
14061406

14071407

14081408
<style type="text/css">.background-attachment p { background: white;padding: 0.8em 1em; }</style>
@@ -2245,7 +2245,7 @@ <h2 class="property-name">
22452245

22462246
</header>
22472247

2248-
<style type="text/css">.background-size { background-image: url(/images/landscape.png);background-repeat: no-repeat;height: 150px;padding: 0; }</style>
2248+
<style type="text/css">.background-size { background-image: url(/images/landscape.jpg);background-repeat: no-repeat;height: 150px;padding: 0; }</style>
22492249

22502250

22512251

‎images/landscape.jpg‎

73.5 KB
Loading

‎property/align-content/index.html‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
---
2+
layout: single
3+
property_name: align-content
4+
---
5+
6+
<section id="align-content" class="property">
7+
<header class="property-header">
8+
<nav class="property-links">
9+
<a class="property-links-direct" href="{{site.url}}/property/align-content/" data-property-name="align-content" data-tooltip="Single page for this property" target="_blank">Link</a>
10+
<a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-content">Share</a>
11+
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-content" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12+
</nav>
13+
<h2 class="property-name">
14+
<a href="{{site.url}}/#align-content"><span>#</span>align-content</a>
15+
</h2>
16+
<div class="property-description">
17+
<p>Defines how each line is aligned within a flexbox container. It only applies if <code>flex-wrap: wrap</code> is present, and if there are <strong>multiple lines</strong> of flexbox items.</p>
18+
19+
</div>
20+
21+
</header>
22+
23+
<style type="text/css">.align-content { background: hsl(0, 0%, 95%);display: flex;flex-wrap: wrap;height: 300px;padding: 0; }</style>
24+
25+
26+
<style type="text/css">.align-content .square { height: 46px;margin: 2px;width: 30%; }.align-content .square:nth-child(2) { height: 96px; }.align-content .box { height: 150px;left: 0;position: absolute;right: 0;top: 0; }.align-content .box.is-red:before { content: "First line"; }.align-content .box.is-green { top: 150px; }.align-content .box.is-green:before { content: "Second line"; }</style>
27+
28+
29+
<section class="example">
30+
<header class="example-header">
31+
<p class="example-name">
32+
<code class="example-default" data-tooltip="This is the property's default value">default</code>
33+
34+
35+
<code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: stretch;">align-content: stretch;</code>
36+
</p>
37+
<div class="example-description">
38+
<p>Each line will stretch to <em>fill</em> the remaining space.</p>
39+
<p>In this case, the container is <code>300px</code> high. All boxes are <code>50px</code> high, apart from the second one who is <code>100px</code> high.</p>
40+
41+
</div>
42+
</header>
43+
44+
<aside class="example-preview">
45+
<div class="example-browser"><i></i><i></i><i></i></div>
46+
<div class="example-output">
47+
<div class="example-output-div align-content " id="align-content-stretch"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
48+
</div>
49+
</aside>
50+
<style type="text/css">#align-content-stretch{ align-content:stretch;}</style>
51+
</section>
52+
<section class="example">
53+
<header class="example-header">
54+
<p class="example-name">
55+
56+
57+
<code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: flex-start;">align-content: flex-start;</code>
58+
</p>
59+
<div class="example-description">
60+
<p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>start</strong> of the flexbox container&#39;s cross axis.</p>
61+
62+
</div>
63+
</header>
64+
65+
<aside class="example-preview">
66+
<div class="example-browser"><i></i><i></i><i></i></div>
67+
<div class="example-output">
68+
<div class="example-output-div align-content " id="align-content-flex-start"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
69+
</div>
70+
</aside>
71+
<style type="text/css">#align-content-flex-start{ align-content:flex-start;}</style>
72+
<style type="text/css">#align-content-flex-start .box.is-red { height: 100px; }#align-content-flex-start .box.is-green { height: 50px;top: 100px; }</style>
73+
</section>
74+
<section class="example">
75+
<header class="example-header">
76+
<p class="example-name">
77+
78+
79+
<code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: flex-end;">align-content: flex-end;</code>
80+
</p>
81+
<div class="example-description">
82+
<p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>end</strong> of the flexbox container&#39;s cross axis.</p>
83+
84+
</div>
85+
</header>
86+
87+
<aside class="example-preview">
88+
<div class="example-browser"><i></i><i></i><i></i></div>
89+
<div class="example-output">
90+
<div class="example-output-div align-content " id="align-content-flex-end"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
91+
</div>
92+
</aside>
93+
<style type="text/css">#align-content-flex-end{ align-content:flex-end;}</style>
94+
<style type="text/css">#align-content-flex-end .box.is-red { height: 100px;top: 150px; }#align-content-flex-end .box.is-green { height: 50px;top: 250px; }</style>
95+
</section>
96+
<section class="example">
97+
<header class="example-header">
98+
<p class="example-name">
99+
100+
101+
<code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: center;">align-content: center;</code>
102+
</p>
103+
<div class="example-description">
104+
<p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>center</strong> of the flexbox container&#39;s cross axis.</p>
105+
106+
</div>
107+
</header>
108+
109+
<aside class="example-preview">
110+
<div class="example-browser"><i></i><i></i><i></i></div>
111+
<div class="example-output">
112+
<div class="example-output-div align-content " id="align-content-center"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
113+
</div>
114+
</aside>
115+
<style type="text/css">#align-content-center{ align-content:center;}</style>
116+
<style type="text/css">#align-content-center .box.is-red { height: 100px;top: 75px; }#align-content-center .box.is-green { height: 50px;top: 175px; }</style>
117+
</section>
118+
<section class="example">
119+
<header class="example-header">
120+
<p class="example-name">
121+
122+
123+
<code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: space-between;">align-content: space-between;</code>
124+
</p>
125+
<div class="example-description">
126+
<p>Each line will only fill the space it <em>needs</em>. The <em>remaining</em> space will appear <strong>between</strong> the lines.</p>
127+
128+
</div>
129+
</header>
130+
131+
<aside class="example-preview">
132+
<div class="example-browser"><i></i><i></i><i></i></div>
133+
<div class="example-output">
134+
<div class="example-output-div align-content " id="align-content-space-between"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
135+
</div>
136+
</aside>
137+
<style type="text/css">#align-content-space-between{ align-content:space-between;}</style>
138+
<style type="text/css">#align-content-space-between .box.is-red { height: 100px;top: 0; }#align-content-space-between .box.is-green { height: 50px;top: 250px; }</style>
139+
</section>
140+
<section class="example">
141+
<header class="example-header">
142+
<p class="example-name">
143+
144+
145+
<code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: space-around;">align-content: space-around;</code>
146+
</p>
147+
<div class="example-description">
148+
<p>Each line will only fill the space it <em>needs</em>. The <em>remaining</em> space will be distributed equally <strong>around</strong> the lines: before the first line, between the two, and after the last one.</p>
149+
150+
</div>
151+
</header>
152+
153+
<aside class="example-preview">
154+
<div class="example-browser"><i></i><i></i><i></i></div>
155+
<div class="example-output">
156+
<div class="example-output-div align-content " id="align-content-space-around"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
157+
</div>
158+
</aside>
159+
<style type="text/css">#align-content-space-around{ align-content:space-around;}</style>
160+
<style type="text/css">#align-content-space-around .box.is-red { height: 100px;top: 38px; }#align-content-space-around .box.is-green { height: 50px;top: 213px; }</style>
161+
</section>
162+
163+
</section>

‎property/align-items/index.html‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
---
2+
layout: single
3+
property_name: align-items
4+
---
5+
6+
<section id="align-items" class="property">
7+
<header class="property-header">
8+
<nav class="property-links">
9+
<a class="property-links-direct" href="{{site.url}}/property/align-items/" data-property-name="align-items" data-tooltip="Single page for this property" target="_blank">Link</a>
10+
<a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-items">Share</a>
11+
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-items" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12+
</nav>
13+
<h2 class="property-name">
14+
<a href="{{site.url}}/#align-items"><span>#</span>align-items</a>
15+
</h2>
16+
<div class="property-description">
17+
<p>Defines how flexbox items are aligned according to the <strong>cross</strong> axis, within a line of a flexbox container.</p>
18+
19+
</div>
20+
21+
</header>
22+
23+
<style type="text/css">.align-items { background: hsl(0, 0%, 95%);display: flex;height: 200px;justify-content: center;padding: 0; }</style>
24+
25+
26+
<style type="text/css">.align-items .square { height: 50px;margin: 0 2px;width: calc(20% - 4px); }.align-items .square:nth-child(2) { height: 100px; }.align-items .square:nth-child(4) { height: 75px; }.align-items .line { left: 2px;position: absolute;right: 2px; }</style>
27+
28+
29+
<section class="example">
30+
<header class="example-header">
31+
<p class="example-name">
32+
33+
34+
<code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: flex-start;">align-items: flex-start;</code>
35+
</p>
36+
<div class="example-description">
37+
<p>The flexbox items are aligned at the <strong>start</strong> of the <strong>cross axis</strong>.</p>
38+
<p>By default, the cross axis is vertical. This means the flexbox items will be aligned <em>vertically</em> at the <em>top</em>.</p>
39+
40+
</div>
41+
</header>
42+
43+
<aside class="example-preview">
44+
<div class="example-browser"><i></i><i></i><i></i></div>
45+
<div class="example-output">
46+
<div class="example-output-div align-items " id="align-items-flex-start"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
47+
</div>
48+
</aside>
49+
<style type="text/css">#align-items-flex-start{ align-items:flex-start;}</style>
50+
<style type="text/css">#align-items-flex-start .line { top: 0; }</style>
51+
</section>
52+
<section class="example">
53+
<header class="example-header">
54+
<p class="example-name">
55+
56+
57+
<code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: flex-end;">align-items: flex-end;</code>
58+
</p>
59+
<div class="example-description">
60+
<p>The flexbox items are aligned at the <strong>end</strong> of the <strong>cross axis</strong>.</p>
61+
<p>By default, the cross axis is vertical. This means the flexbox items will be aligned <em>vertically</em> at the _bottom.</p>
62+
63+
</div>
64+
</header>
65+
66+
<aside class="example-preview">
67+
<div class="example-browser"><i></i><i></i><i></i></div>
68+
<div class="example-output">
69+
<div class="example-output-div align-items " id="align-items-flex-end"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
70+
</div>
71+
</aside>
72+
<style type="text/css">#align-items-flex-end{ align-items:flex-end;}</style>
73+
<style type="text/css">#align-items-flex-end .line { bottom: 0; }</style>
74+
</section>
75+
<section class="example">
76+
<header class="example-header">
77+
<p class="example-name">
78+
79+
80+
<code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: center;">align-items: center;</code>
81+
</p>
82+
<div class="example-description">
83+
<p>The flexbox items are aligned at the <strong>center</strong> of the <strong>cross axis</strong>.</p>
84+
<p>By default, the cross axis is vertical. This means the flexbox items will be <strong>centered</strong> <em>vertically</em>.</p>
85+
86+
</div>
87+
</header>
88+
89+
<aside class="example-preview">
90+
<div class="example-browser"><i></i><i></i><i></i></div>
91+
<div class="example-output">
92+
<div class="example-output-div align-items " id="align-items-center"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
93+
</div>
94+
</aside>
95+
<style type="text/css">#align-items-center{ align-items:center;}</style>
96+
<style type="text/css">#align-items-center .line { top: 50%; }</style>
97+
</section>
98+
<section class="example">
99+
<header class="example-header">
100+
<p class="example-name">
101+
102+
103+
<code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: baseline;">align-items: baseline;</code>
104+
</p>
105+
<div class="example-description">
106+
<p>The flexbox items are aligned at the <strong>baseline</strong> of the <strong>cross axis</strong>.</p>
107+
<p>By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the <em>baseline</em> of their <em>text</em> align along a horizontal line.</p>
108+
109+
</div>
110+
</header>
111+
112+
<aside class="example-preview">
113+
<div class="example-browser"><i></i><i></i><i></i></div>
114+
<div class="example-output">
115+
<div class="example-output-div align-items " id="align-items-baseline"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
116+
</div>
117+
</aside>
118+
<style type="text/css">#align-items-baseline{ align-items:baseline;}</style>
119+
<style type="text/css">#align-items-baseline .line { top: 55px; }</style>
120+
</section>
121+
<section class="example">
122+
<header class="example-header">
123+
<p class="example-name">
124+
125+
126+
<code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: stretch;">align-items: stretch;</code>
127+
</p>
128+
<div class="example-description">
129+
<p>The flexbox items will stretch across the whole <strong>cross axis</strong>.</p>
130+
<p>By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.</p>
131+
132+
</div>
133+
</header>
134+
135+
<aside class="example-preview">
136+
<div class="example-browser"><i></i><i></i><i></i></div>
137+
<div class="example-output">
138+
<div class="example-output-div align-items " id="align-items-stretch"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
139+
</div>
140+
</aside>
141+
<style type="text/css">#align-items-stretch{ align-items:stretch;}</style>
142+
<style type="text/css">#align-items-stretch .square { height: auto; }#align-items-stretch .square:nth-child(2) { height: auto; }#align-items-stretch .square:nth-child(4) { height: auto; }#align-items-stretch .line { display: none; }</style>
143+
</section>
144+
145+
</section>

0 commit comments

Comments
 (0)