Skip to content

Commit b2bf625

Browse files
jgthmsjgthms
committed
Add backgrounds
1 parent d06792b commit b2bf625

34 files changed

Lines changed: 152 additions & 20 deletions

File tree

‎_includes/collections/animations.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎_includes/collections/backgrounds-list.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<li class="menu-item" data-property-name="background-attachment"><a class="menu-link" href="{{site.url}}/property/background-attachment" data-property-name="background-attachment"><span class="menu-item-name">background-attachment</span></a></li><li class="menu-item" data-property-name="background-clip"><a class="menu-link" href="{{site.url}}/property/background-clip" data-property-name="background-clip"><span class="menu-item-name">background-clip</span></a></li><li class="menu-item" data-property-name="background-color"><a class="menu-link" href="{{site.url}}/property/background-color" data-property-name="background-color"><span class="menu-item-name">background-color</span></a></li><li class="menu-item" data-property-name="background-image"><a class="menu-link" href="{{site.url}}/property/background-image" data-property-name="background-image"><span class="menu-item-name">background-image</span></a></li><li class="menu-item" data-property-name="background-origin"><a class="menu-link" href="{{site.url}}/property/background-origin" data-property-name="background-origin"><span class="menu-item-name">background-origin</span></a></li><li class="menu-item" data-property-name="background-position"><a class="menu-link" href="{{site.url}}/property/background-position" data-property-name="background-position"><span class="menu-item-name">background-position</span></a></li><li class="menu-item" data-property-name="background-repeat"><a class="menu-link" href="{{site.url}}/property/background-repeat" data-property-name="background-repeat"><span class="menu-item-name">background-repeat</span></a></li><li class="menu-item" data-property-name="background-size"><a class="menu-link" href="{{site.url}}/property/background-size" data-property-name="background-size"><span class="menu-item-name">background-size</span></a></li><li class="menu-item" data-property-name="background"><a class="menu-link" href="{{site.url}}/property/background" data-property-name="background"><span class="menu-item-name">background</span></a></li>

‎_includes/collections/backgrounds.html‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎_includes/collections/box-model.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎_includes/collections/flexbox.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎_includes/collections/transitions.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎_includes/collections/typography.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎_includes/lists/main-list.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,54 +170,126 @@
170170
<a class="list-name" href="{{site.url}}/property/background-attachment">
171171
<span class="menu-item-name">background-attachment</span>
172172
</a>
173+
<p class="list-collections">
174+
<span>
175+
<span>In collection:</span>
176+
<a href="{{site.url}}/backgrounds/">
177+
<strong>backgrounds</strong>
178+
</a>
179+
</span>
180+
</p>
173181
</article>
174182

175183
<article class="menu-item list-item" data-property-name="background-clip">
176184
<a class="list-name" href="{{site.url}}/property/background-clip">
177185
<span class="menu-item-name">background-clip</span>
178186
</a>
187+
<p class="list-collections">
188+
<span>
189+
<span>In collection:</span>
190+
<a href="{{site.url}}/backgrounds/">
191+
<strong>backgrounds</strong>
192+
</a>
193+
</span>
194+
</p>
179195
</article>
180196

181197
<article class="menu-item list-item" data-property-name="background-color">
182198
<a class="list-name" href="{{site.url}}/property/background-color">
183199
<span class="menu-item-name">background-color</span>
184200
</a>
201+
<p class="list-collections">
202+
<span>
203+
<span>In collection:</span>
204+
<a href="{{site.url}}/backgrounds/">
205+
<strong>backgrounds</strong>
206+
</a>
207+
</span>
208+
</p>
185209
</article>
186210

187211
<article class="menu-item list-item" data-property-name="background-image">
188212
<a class="list-name" href="{{site.url}}/property/background-image">
189213
<span class="menu-item-name">background-image</span>
190214
</a>
215+
<p class="list-collections">
216+
<span>
217+
<span>In collection:</span>
218+
<a href="{{site.url}}/backgrounds/">
219+
<strong>backgrounds</strong>
220+
</a>
221+
</span>
222+
</p>
191223
</article>
192224

193225
<article class="menu-item list-item" data-property-name="background-origin">
194226
<a class="list-name" href="{{site.url}}/property/background-origin">
195227
<span class="menu-item-name">background-origin</span>
196228
</a>
229+
<p class="list-collections">
230+
<span>
231+
<span>In collection:</span>
232+
<a href="{{site.url}}/backgrounds/">
233+
<strong>backgrounds</strong>
234+
</a>
235+
</span>
236+
</p>
197237
</article>
198238

199239
<article class="menu-item list-item" data-property-name="background-position">
200240
<a class="list-name" href="{{site.url}}/property/background-position">
201241
<span class="menu-item-name">background-position</span>
202242
</a>
243+
<p class="list-collections">
244+
<span>
245+
<span>In collection:</span>
246+
<a href="{{site.url}}/backgrounds/">
247+
<strong>backgrounds</strong>
248+
</a>
249+
</span>
250+
</p>
203251
</article>
204252

205253
<article class="menu-item list-item" data-property-name="background-repeat">
206254
<a class="list-name" href="{{site.url}}/property/background-repeat">
207255
<span class="menu-item-name">background-repeat</span>
208256
</a>
257+
<p class="list-collections">
258+
<span>
259+
<span>In collection:</span>
260+
<a href="{{site.url}}/backgrounds/">
261+
<strong>backgrounds</strong>
262+
</a>
263+
</span>
264+
</p>
209265
</article>
210266

211267
<article class="menu-item list-item" data-property-name="background-size">
212268
<a class="list-name" href="{{site.url}}/property/background-size">
213269
<span class="menu-item-name">background-size</span>
214270
</a>
271+
<p class="list-collections">
272+
<span>
273+
<span>In collection:</span>
274+
<a href="{{site.url}}/backgrounds/">
275+
<strong>backgrounds</strong>
276+
</a>
277+
</span>
278+
</p>
215279
</article>
216280

217281
<article class="menu-item list-item" data-property-name="background">
218282
<a class="list-name" href="{{site.url}}/property/background">
219283
<span class="menu-item-name">background</span>
220284
</a>
285+
<p class="list-collections">
286+
<span>
287+
<span>In collection:</span>
288+
<a href="{{site.url}}/backgrounds/">
289+
<strong>backgrounds</strong>
290+
</a>
291+
</span>
292+
</p>
221293
</article>
222294

223295
<article class="menu-item list-item" data-property-name="border-bottom-color">
@@ -1305,12 +1377,28 @@
13051377
<a class="list-name" href="{{site.url}}/property/word-break">
13061378
<span class="menu-item-name">word-break</span>
13071379
</a>
1380+
<p class="list-collections">
1381+
<span>
1382+
<span>In collection:</span>
1383+
<a href="{{site.url}}/typography/">
1384+
<strong>typography</strong>
1385+
</a>
1386+
</span>
1387+
</p>
13081388
</article>
13091389

13101390
<article class="menu-item list-item" data-property-name="word-spacing">
13111391
<a class="list-name" href="{{site.url}}/property/word-spacing">
13121392
<span class="menu-item-name">word-spacing</span>
13131393
</a>
1394+
<p class="list-collections">
1395+
<span>
1396+
<span>In collection:</span>
1397+
<a href="{{site.url}}/typography/">
1398+
<strong>typography</strong>
1399+
</a>
1400+
</span>
1401+
</p>
13141402
</article>
13151403

13161404
<article class="menu-item list-item" data-property-name="z-index">

‎_includes/menu.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,9 @@
3737
</header>
3838
<nav class="menu-collections">
3939
<ul>
40-
<li><a class="menu-collection-link{% if page.template == 'index' %} menu-collection-link--active{% endif %}" href="{{site.url}}/">All</a></li>
40+
<li><a class="menu-collection-link{% if page.template == 'index' %} menu-collection-link--active{% endif %}" href="{{site.url}}/">All properties</a></li>
4141
<li><a class="menu-collection-link{% if page.collection_name == 'Animations' %} menu-collection-link--active{% endif %}" href="{{site.url}}/animations/">Animations</a></li>
42+
<li><a class="menu-collection-link{% if page.collection_name == 'Backgrounds' %} menu-collection-link--active{% endif %}" href="{{site.url}}/backgrounds/">Backgrounds</a></li>
4243
<li><a class="menu-collection-link{% if page.collection_name == 'Box model' %} menu-collection-link--active{% endif %}" href="{{site.url}}/box-model/">Box model</a></li>
4344
<li><a class="menu-collection-link{% if page.collection_name == 'Flexbox' %} menu-collection-link--active{% endif %}" href="{{site.url}}/flexbox/">Flexbox</a></li>
4445
<li><a class="menu-collection-link{% if page.collection_name == 'Positioning' %} menu-collection-link--active{% endif %}" href="{{site.url}}/positioning/">Positioning</a></li>

‎backgrounds.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
layout: collection
3+
collection_name: "Backgrounds"
4+
menu_list: "backgrounds-list"
5+
description: "style the background of an element with colors and images"
6+
---
7+
8+
{% include collections/backgrounds.html %}

0 commit comments

Comments
 (0)