Skip to content

Commit 288d315

Browse files
talbstalbs
committed
Merge pull request #258 from edx/talbs/elements-lists-v2
Patterns: Lists - Take 2
2 parents 6ac4d68 + 3e40c94 commit 288d315

29 files changed

+1725
-231
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
## unreleased
44
Nothing yet
55

6+
## 0.8.5 (2016-01-13)
7+
* Added a new element, Lists - for use in content and simple navigation
8+
9+
- - -
10+
611
## 0.8.4 (2016-01-13)
712
* bulletproofing text/base link styling
813

‎_includes/navigation.html‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<nav class="pldoc-nav pldoc-nav-patterns pldoc-nav-internal" id="pldoc-nav-patterns" role="navigation" aria-label="Patterns">
2-
<h2 class="pldoc-heading pldoc-nav-title hd-6" id="pldoc-heading-patterns">patterns</h2>
2+
<h2 class="pldoc-nav-title hd-6" id="pldoc-heading-patterns">patterns</h2>
33

4-
<ul class="nav-list list-patterns" aria-labelledby="pldoc-heading-patterns">
4+
<ul class="nav-list list-patterns list-divided" aria-labelledby="pldoc-heading-patterns">
55
{% assign sorted_patterns_posts = site.categories.patterns | sort: 'title' %}
66
{% for post in sorted_patterns_posts %}
7-
<li class="nav-list-item">
7+
<li class="nav-list-item item has-block-link">
88
{% if page.title == "Home" %}
99
<a class="pattern pldoc-link" href="#{{post.slug}}">
1010
{% else %}
@@ -24,30 +24,30 @@ <h2 class="pldoc-heading pldoc-nav-title hd-6" id="pldoc-heading-patterns">patte
2424
</nav>
2525

2626
<nav class="pldoc-nav pldoc-nav-documentation pldoc-nav-external" id="pldoc-nav-documentation" role="navigation" aria-label="Documentation">
27-
<h2 class="pldoc-heading pldoc-nav-title hd-6" id="heading-documentation">Documentation</h2>
28-
<ul class="pldoc-list nav-list list-styleguides" aria-labelledby="heading-documentation">
29-
<li class="nav-list-item">
27+
<h2 class="pldoc-nav-title hd-6" id="heading-documentation">Documentation</h2>
28+
<ul class="pldoc-list nav-list list-styleguides list-divided" aria-labelledby="heading-documentation">
29+
<li class="nav-list-item item has-block-link">
3030
<a class="pldoc-link" rel="external" href="{{ site.data.edx-pattern-library.url_documentation }}/Styleguide:-General">
3131
General Styleguide
3232
<span class="icon icon-external-link" aria-hidden="true"></span>
3333
<span class="sr-only">(Opens in a new window)</span>
3434
</a>
3535
</li>
36-
<li class="nav-list-item">
36+
<li class="nav-list-item item has-block-link">
3737
<a class="pldoc-link" rel="external" href="{{ site.data.edx-pattern-library.url_documentation }}Styleguide:-HTML">
3838
HTMLS Styleguide
3939
<span class="icon icon-external-link" aria-hidden="true"></span>
4040
<span class="sr-only">(Opens in a new window)</span>
4141
</a>
4242
</li>
43-
<li class="nav-list-item">
43+
<li class="nav-list-item item has-block-link">
4444
<a class="pldoc-link" rel="external" href="{{ site.data.edx-pattern-library.url_documentation }}Styleguide:-Sass-&-CSS">
4545
Sass &amp; CSS Styleguide
4646
<span class="icon icon-external-link" aria-hidden="true"></span>
4747
<span class="sr-only">(Opens in a new window)</span>
4848
</a>
4949
</li>
50-
<li class="nav-list-item">
50+
<li class="nav-list-item item has-block-link">
5151
<a class="pldoc-link" rel="external" href="{{ site.data.edx-pattern-library.url_documentation }}Styleguide:-Accessibility">
5252
Accessibility Styleguide
5353
<span class="icon icon-external-link" aria-hidden="true"></span>
@@ -58,17 +58,17 @@ <h2 class="pldoc-heading pldoc-nav-title hd-6" id="heading-documentation">Docume
5858
</nav>
5959

6060
<nav class="pldoc-nav pldoc-nav-project pldoc-nav-external" id="pldoc-nav-project" role="navigation" aria-label="About">
61-
<h2 class="pldoc-heading pldoc-nav-title hd-6" id="pldoc-heading-about">About This Project</h2>
61+
<h2 class="pldoc-nav-title hd-6" id="pldoc-heading-about">About This Project</h2>
6262

63-
<ul class="nav-list list-project" aria-labelledby="pldoc-heading-about">
64-
<li class="nav-list-item">
63+
<ul class="nav-list list-project list-divided" aria-labelledby="pldoc-heading-about">
64+
<li class="nav-list-item item has-block-link">
6565
<a class="pldoc-link" rel="external" href="{{ site.data.edx-pattern-library.url_github }}">
6666
View on Github
6767
<span class="icon icon-external-link" aria-hidden="true"></span>
6868
<span class="sr-only">(Opens in a new window)</span>
6969
</a>
7070
</li>
71-
<li class="nav-list-item">
71+
<li class="nav-list-item item has-block-link">
7272
<a class="pldoc-link" rel="external" href="{{ site.data.edx-pattern-library.url_project }}">
7373
Project Planning
7474
<span class="icon icon-external-link" aria-hidden="true"></span>

‎_includes/pattern.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,21 @@
44
<header class="pldoc-pattern-header">
55
<h1 class="pldoc-heading pldoc-pattern-title hd-4">{{ post.title }}</h1>
66

7-
<ul class="pldoc-list pldoc-pattern-meta copy-micro de-emphasized">
8-
<li class="meta meta-updated">
7+
<ul class="list-inline pldoc-pattern-meta copy-micro de-emphasized">
8+
<li class="item meta meta-updated">
99
<span class="pldoc-pattern-meta-updated-label">Last updated on </span>
1010
<time class="pldoc-pattern-meta-updated-value" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%-m/%-d/%Y" }}</time>
1111
</li>
12-
<li class="meta meta-permalink">
12+
<li class="item meta meta-permalink">
1313
<a class="pldoc-link" href="{{post.url}}">Permalink <span class="sr-only">to {{ post.slug }}</span></a>
1414
</li>
1515
{% if post.url_example %}
16-
<li class="meta meta-examplelink">
16+
<li class="item meta meta-examplelink">
1717
<a class="pldoc-link" href="{{ site.url_example }}{{ post.url_example }}"><span class="sr-only">View </span>Detailed Example</a>
1818
</li>
1919
{% endif %}
2020
{% if post.url_documentation %}
21-
<li class="meta meta-doclink">
21+
<li class="item meta meta-doclink">
2222
<a class="pldoc-link" href="{{ site.data.edx-pattern-library.url_documentation }}{{ post.url_documentation }}"><span class="sr-only">View </span>Documentation</a>
2323
</li>
2424
{% endif %}
@@ -43,7 +43,7 @@ <h2 class="alert-title">{{ post.title }} requires the edX UI Toolkit</h2>
4343

4444
<div class="pldoc-tab-wrapper">
4545
{% if post.tags contains "pattern" %}
46-
<ul class="pldoc-tab-labels pldoc-list pldoc-pattern-navigation">
46+
<ul class="pldoc-tab-labels pldoc-pattern-navigation">
4747
<li class="pldoc-tab-label">
4848
<button class="pldoc-link pldoc-link-preview is-active" data-href="#{{post.slug}}-preview">Preview</button>
4949
</li>

‎_posts/patterns/2015-12-21-lists.md‎

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
1+
---
2+
layout: pattern
3+
title: Lists
4+
date: 2016-01-06 00:00:00
5+
6+
categories: patterns
7+
tags:
8+
- atomic
9+
- pattern
10+
- lists
11+
12+
slug: lists
13+
14+
url_styles: "patterns/_lists.scss"
15+
url_documentation: Styleguide:-Lists
16+
17+
description: Lists are used to group related content in a number of settings and cases.
18+
19+
info: Lists are used to group related content in a number of settings (e.g. ordered, unordered) and cases (e.g. definitions, links, etc.).
20+
---
21+
22+
<h3 class="hd-6 example-set-hd">Bulleted List</h3>
23+
24+
<div class="example-set-description copy copy-meta">
25+
<p>Bulleted, or unordered , lists show a loose association with no sequential meaning. Its important to note that list-based styling can be applied to non-semantic list markup, but only when appropriate (and when leveraging any necessary role attributes).</p>
26+
</div>
27+
28+
<div class="example-set">
29+
<ul class="list-bulleted">
30+
<li class="item">Apples</li>
31+
<li class="item">Apricots</li>
32+
<li class="item">Bananas</li>
33+
<li class="item">Blackberries</li>
34+
<li class="item">Blueberries</li>
35+
<li class="item">Cherries</li>
36+
<li class="item">Coconuts</li>
37+
<li class="item">Cranberries</li>
38+
<li class="item">Figs</li>
39+
<li class="item">Oranges</li>
40+
<li class="item">Plums</li>
41+
</ul>
42+
43+
<ul class="list-bulleted list-circle">
44+
<li class="item">Blueberries</li>
45+
<li class="item">Cherries</li>
46+
<li class="item">Coconuts</li>
47+
<li class="item">Cranberries</li>
48+
</ul>
49+
50+
<div class="list-bulleted" role="list">
51+
<p class="item" role="listitem">Designed on top of an ocean, the town of Darnassea is home to dark elves lead by Colonel Alduin. This town wasn't built by an ocean by accident, as it has ancient, lost technologies, which is of great importance to the people of Darnassea and its success.</p>
52+
<p class="item" role="listitem">Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming.</p>
53+
<p class="item">Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.</p>
54+
</div>
55+
56+
<ul class="list-bulleted list-disc no-indent">
57+
<li class="item">Figs (No Indent)</li>
58+
<li class="item">Oranges (No Indent)</li>
59+
<li class="item">Plums (No Indent)</li>
60+
</ul>
61+
</div>
62+
63+
<h3 class="hd-6 example-set-hd">Ordered Lists</h3>
64+
65+
<div class="example-set-description copy copy-meta">
66+
<p>Ordered lists show a sequentially-based association between items. Its important to note that list-based styling can be applied to non-semantic list markup, but only when appropriate (and when leveraging any necessary role attributes).</p>
67+
</div>
68+
69+
<div class="example-set">
70+
<ol class="list-ordered">
71+
<li class="item">Apples</li>
72+
<li class="item">Apricots</li>
73+
<li class="item">Bananas</li>
74+
<li class="item">Blackberries</li>
75+
<li class="item">Blueberries</li>
76+
<li class="item">Cherries</li>
77+
<li class="item">Coconuts</li>
78+
<li class="item">Cranberries</li>
79+
<li class="item">Figs</li>
80+
<li class="item">Oranges</li>
81+
<li class="item">Plums</li>
82+
</ol>
83+
84+
<div class="list-ordered" role="list">
85+
<p class="item" role="listitem">Designed on top of an ocean, the town of Darnassea is home to dark elves lead by Colonel Alduin. This town wasn't built by an ocean by accident, as it has ancient, lost technologies, which is of great importance to the people of Darnassea and its success.</p>
86+
<p class="item" role="listitem">Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming.</p>
87+
<p class="item" role="listitem">Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success.</p>
88+
</div>
89+
90+
<ol class="list-ordered no-indent">
91+
<li class="item">Figs (No Indent)</li>
92+
<li class="item">Oranges (No Indent)</li>
93+
<li class="item">Plums (No Indent)</li>
94+
</ol>
95+
</div>
96+
97+
98+
<h3 class="hd-6 example-set-hd">Unstyled Lists</h3>
99+
<div class="example-set">
100+
<ul class="list-unstyled">
101+
<li class="item">Apples</li>
102+
<li class="item">Apricots</li>
103+
<li class="item">
104+
<a href="https://solidthreads.com/media/catalog/product/i/m/image_78.jpg">Bananas</a>
105+
</li>
106+
<li class="item">Blackberries</li>
107+
</ul>
108+
</div>
109+
110+
111+
<h3 class="hd-6 example-set-hd">Inline List</h3>
112+
<div class="example-set">
113+
<ol class="list-inline">
114+
<li class="item">Install</li>
115+
<li class="item">Configure</li>
116+
<li class="item">Create New File</li>
117+
<li class="item">
118+
<a href="https://solidthreads.com/media/catalog/product/i/m/image_78.jpg">Begin Authoring</a>
119+
</li>
120+
</ol>
121+
</div>
122+
123+
<h3 class="hd-6 example-set-hd">Nested Lists</h3>
124+
<div class="example-set">
125+
<ul>
126+
<li class="item">
127+
Apples
128+
129+
<ul>
130+
<li>Red Delicious</li>
131+
<li>Macintosh</li>
132+
<li>Granny Smith</li>
133+
<li>Honey Crisp</li>
134+
</ul>
135+
</li>
136+
<li class="item">Apricots</li>
137+
<li class="item">Bananas</li>
138+
<li class="item">Blackberries</li>
139+
</ul>
140+
141+
<ol>
142+
<li class="item">Blueberries</li>
143+
<li class="item">
144+
Cherries
145+
146+
<ol>
147+
<li>Bing</li>
148+
<li>Balaton</li>
149+
<li>Ulster</li>
150+
<li>Maraschino</li>
151+
</ol>
152+
</li>
153+
<li class="item">Coconuts</li>
154+
<li class="item">Cranberries</li>
155+
</ol>
156+
</div>
157+
158+
<h3 class="hd-6 example-set-hd">Definition Lists</h3>
159+
<div class="example-set">
160+
<dl>
161+
<dt class="hd-3">RSS (hd-3)</dt>
162+
<dd>An XML format for aggregating information from websites whose
163+
content is frequently updated.</dd>
164+
<dt class="hd-3">Weblog (hd-3)</dt>
165+
<dd>Contraction of the term "web log", a weblog is a
166+
website that is periodically updated, like a journal</dd>
167+
</dl>
168+
169+
<dl>
170+
<dt class="hd-6">Founders: (hd-6)</dt>
171+
<dd class="copy-meta">Clark Kent (meta copy)</dd>
172+
<dd class="copy-meta">Bruce Wayne (meta copy)</dd>
173+
<dd class="copy-meta">Diana Prince (meta copy)</dd>
174+
<dt class="hd-6">Members: (hd-6)</dt>
175+
<dd class="copy-meta">Hal Jordan (meta copy)</dd>
176+
<dd class="copy-meta">Barry Allen (meta copy)</dd>
177+
<dd class="copy-meta">J'onn J'onzz (meta copy)</dd>
178+
</dl>
179+
</div>
180+
181+
<h3 class="hd-6 example-set-hd">List with Visual Dividers</h3>
182+
<div class="example-set">
183+
<ul class="list-divided">
184+
<li class="item">Apples</li>
185+
<li class="item">Apricots</li>
186+
<li class="item">
187+
<a href="https://solidthreads.com/media/catalog/product/i/m/image_78.jpg">Bananas</a>
188+
</li>
189+
<li class="item">Blackberries</li>
190+
</ul>
191+
192+
<ul class="list-divided">
193+
<li class="item has-block-link">
194+
<a href="http://ux.edx.org/">Apples (Block-level links)</a>
195+
</li>
196+
<li class="item has-block-link">
197+
<a href="http://ux.edx.org/">Apricots (Block-level links)</a>
198+
</li>
199+
<li class="item has-block-link">
200+
<a href="http://ux.edx.org/">Bananas (Block-level links)</a>
201+
</li>
202+
</ul>
203+
</div>
204+
205+
<h3 class="hd-6 example-set-hd">Lists with Complex Content</h3>
206+
207+
<div class="example-set-description copy copy-meta">
208+
<p>Light scaffolding for more complex UI/visually appearing lists is provided. Please note that the best semantic markup for the situation should be chosen when leveraging this extension.</p>
209+
</div>
210+
211+
<div class="example-set">
212+
<div class="list" role="list">
213+
<div class="item item-complex" role="listitem">
214+
<h2 class="item-hd">Home</h2>
215+
<p class="item-copy">You know, where the heart is</p>
216+
</div>
217+
<div class="item item-complex" role="listitem">
218+
<span class="item-hd">Darnassea</span>
219+
<p class="item-copy">Designed on top of an ocean, the town of Darnassea is home to dark elves lead by Colonel Alduin.
220+
This town wasn't built by an ocean by accident, as it has ancient, lost technologies, which is of great importance to the people of Darnassea and its success.</p>
221+
</div>
222+
<div class="item item-complex" role="listitem">
223+
<h2 class="item-hd hd-2">Complex Item Heading (hd-2)</h2>
224+
<p class="item-copy-large">Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming (large copy).</p>
225+
</div>
226+
<div class="item item-complex" role="listitem">
227+
<h2 class="item-hd hd-5">Darkwell (hd-5)</h2>
228+
<p class="item-copy-meta">Raised inside a geyser field, the port of Darkwell is home to vikings lead by Mrs. Chilson. This port wasn't built by a geyser field by accident, as it has rare resources, which is of great importance to the people of Darkwell and its success (meta copy).</p>
229+
</div>
230+
</div>
231+
</div>
232+
233+
<h3 class="hd-6 example-set-hd">Grouped Lists</h3>
234+
235+
<div class="example-set-description copy copy-meta">
236+
<p>Grouped lists more strongly show a relationship between items. Additionally, they can be used in tandem with block-level link styling.</p>
237+
</div>
238+
239+
<div class="example-set">
240+
<ul class="list-grouped">
241+
<li class="item">Apples</li>
242+
<li class="item">Apricots</li>
243+
<li class="item"><a href="http://ux.edx.org">Bananas</a></li>
244+
<li class="item">Blackberries</li>
245+
</ul>
246+
247+
<div class="list-grouped" role="list">
248+
<div class="item item-complex" role="listitem">
249+
<span class="item-hd">Darnassea</span>
250+
<p class="item-copy">Designed on top of an ocean, the town of Darnassea is home to dark elves lead by Colonel Alduin.
251+
This town wasn't built by an ocean by accident, as it has ancient, lost technologies, which is of great importance to the people of Darnassea and its success</p>
252+
</div>
253+
<div class="item item-complex" role="listitem">
254+
<h5 class="item-hd hd-2">Darkwell (hd-2)</h5>
255+
<p class="item-copy-large">Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming (large copy).</p>
256+
</div>
257+
</div>
258+
259+
<ul class="list-grouped">
260+
<li class="item has-block-link">
261+
<a href="http://ux.edx.org/">Apples (Block-level links)</a>
262+
</li>
263+
<li class="item has-block-link">
264+
<a href="http://ux.edx.org/">Apricots (Block-level links)</a>
265+
</li>
266+
<li class="item item-complex">
267+
<h5 class="item-hd hd-2">Darkwell (hd-2)</h5>
268+
<p class="item-copy-large">Darkwell has a troubled economy, which is mainly supported by jewelcrafting, fishing and fletching. But their biggest strengths are intricate jewelcrafting and rare herbalism. However, Darkwell lacks people skilled in farming (large copy).</p>
269+
</li>
270+
<li class="item has-block-link">
271+
<a href="http://ux.edx.org/">Bananas (Block-level links)</a>
272+
</li>
273+
</ul>
274+
</div>

0 commit comments

Comments
 (0)