Merge lp:~stephen-stewart/ulysses/fix-test-page into lp:ulysses

Proposed by Stephen Stewart
Status: Merged
Merged at revision: 11
Proposed branch: lp:~stephen-stewart/ulysses/fix-test-page
Merge into: lp:ulysses
Diff against target: 956 lines (+439/-496)
1 file modified
test/index.html (+439/-496)
To merge this branch: bzr merge lp:~stephen-stewart/ulysses/fix-test-page
Reviewer Review Type Date Requested Status
Jonas G. Drange (community) Approve
Review via email: mp+197358@code.launchpad.net

Commit message

fix up test page

Description of the change

Make the test page only about the framework CSS, no elements or classnames which are not part of the lib.

Add in the missing CSS modules.

AS a note, font awesome is in principal great, but the icons are a little weak. We will maybe look to using some of the SVG icons defined by the web team, but for now I've just used unicode to fill the blanks.

To post a comment you must log in.
Revision history for this message
Jonas G. Drange (jonas-drange) :
review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'test/index.html'
2--- test/index.html 2013-11-30 13:03:01 +0000
3+++ test/index.html 2013-12-02 12:38:43 +0000
4@@ -11,513 +11,456 @@
5 <link rel="stylesheet" href="/css/normalize.css">
6 <link rel="stylesheet" href="/css/base.css">
7 <link rel="stylesheet" href="/css/buttons.css">
8+<link rel="stylesheet" href="/css/dropdowns.css">
9+<link rel="stylesheet" href="/css/feedback.css">
10 <link rel="stylesheet" href="/css/forms.css">
11 <link rel="stylesheet" href="/css/layout.css">
12 <link rel="stylesheet" href="/css/navigation.css">
13-<link rel="stylesheet" href="/css/feedback.css">
14+<link rel="stylesheet" href="/css/pagination.css">
15+
16+<!--
17+
18+This page is for testing.
19+
20+THIS IS NOT A STYLEGUIDE
21+
22+Do not add inline styles.
23+Do not add a style block to the head.
24+Use only styles linked from the CSS framework.
25+Do not add JavaScript.
26+
27+Have a nice day :)
28+
29+-->
30
31 </head>
32 <body>
33
34 <div class="ues-container">
35- <div class="section" id="typography">
36- <h1>Typography</h1>
37-
38- <h2>Headline Styles</h2>
39-
40- <h1 class="ues-hdisplay">Display Headline</h1>
41- <h1 class="ues-hmain">Main Headline</h1>
42- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
43- <h1 class="ues-hmedium">Medium Headline</h1>
44- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
45- <h1 class="ues-hlight">Light Headline</h1>
46- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
47-
48- <h2>Multiline Headlines</h2>
49- <div style="width:320px">
50- <h1 class="ues-hdisplay">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
51- <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
52- <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
53- <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
54- </div>
55-
56- <h2>Block Content</h2>
57-
58- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
59- <p>Reiciendis soluta ab, soluta molestiae nesciunt ipsum est quis debitis voluptas qui at sed quo? Praesentium voluptate voluptatum placeat ea molestiae doloribus deserunt?</p>
60- <p>Exercitationem eum esse quos minus, maiores suscipit cupiditate delectus reprehenderit illo quidem distinctio esse nam aliquam fugit, reiciendis veritatis a expedita nisi deserunt rem repellat quos placeat illum, minima est iusto itaque iure? Odit facere possimus architecto sunt facilis voluptatibus eaque maiores necessitatibus, dolor deserunt est.</p>
61-
62-
63- <h3>Lead body copy</h3>
64- <p class=ues-lead>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
65- <p>architecto ab dolor explicabo inventore fugit quis doloribus minus nesciunt cumque sint</p>
66-
67- <h3>Text Alignment</h3>
68- <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
69- <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
70- <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
71-
72- <h3>Lists</h3>
73-
74- <h4>Ordered &amp; Unordered</h4>
75+ <section>
76+ <h1>Typography</h1>
77+
78+ <h2>Headline Styles</h2>
79+
80+ <h1 class="ues-hdisplay">Display Headline</h1>
81+ <h1 class="ues-hmain">Main Headline</h1>
82+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
83+ <h1 class="ues-hmedium">Medium Headline</h1>
84+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
85+ <h1 class="ues-hlight">Light Headline</h1>
86+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
87+
88+ <h2>Multiline Headlines</h2>
89+ <div style="width:320px">
90+ <h1 class="ues-hdisplay">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
91+ <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
92+ <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
93+ <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
94+ </div>
95+
96+ <h2>Block Content</h2>
97+
98+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
99+ <p>Reiciendis soluta ab, soluta molestiae nesciunt ipsum est quis debitis voluptas qui at sed quo? Praesentium voluptate voluptatum placeat ea molestiae doloribus deserunt?</p>
100+ <p>Exercitationem eum esse quos minus, maiores suscipit cupiditate delectus reprehenderit illo quidem distinctio esse nam aliquam fugit, reiciendis veritatis a expedita nisi deserunt rem repellat quos placeat illum, minima est iusto itaque iure? Odit facere possimus architecto sunt facilis voluptatibus eaque maiores necessitatibus, dolor deserunt est.</p>
101+
102+
103+ <h3>Lead body copy</h3>
104+ <p class=ues-lead>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
105+ <p>architecto ab dolor explicabo inventore fugit quis doloribus minus nesciunt cumque sint</p>
106+
107+ <h3>Text Alignment</h3>
108+ <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
109+ <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
110+ <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
111+
112+ <h3>Lists</h3>
113+
114+ <h4>Ordered &amp; Unordered</h4>
115+ <ul class=ues-list>
116+ <li>Apples</li>
117+ <li>Oranges</li>
118+ <li>Pears</li>
119+ </ul>
120+
121+ <ol class=ues-list>
122+ <li>Apples</li>
123 <ul class=ues-list>
124- <li>Apples</li>
125- <li>Oranges</li>
126- <li>Pears</li>
127- </ul>
128-
129- <ol class=ues-list>
130- <li>Apples</li>
131- <ul class=ues-list>
132- <li>Cox</li>
133- <li>Gala</li>
134- <li>Bræburn</li>
135- </ul>
136- <li>Oranges</li>
137- <li>Pears</li>
138- </ol>
139-
140- <h4>Bordered</h4>
141- <ul class="ues-list ues-list-bordered">
142- <li>excepturi dolore quo et quisquam atque neque at labore molestias quia nemo</li>
143- <li>architecto nam sapiente voluptate molestiae ducimus fugiat iure natus nihil quod officia</li>
144- <li>debitis nemo quos enim illo mollitia quidem numquam incidunt corrupti blanditiis consequuntur</li>
145- <li>impedit ipsa dignissimos quasi quaerat doloribus maxime libero voluptatum itaque molestias ab</li>
146- <li>quidem perspiciatis asperiores exercitationem facilis tenetur sapiente vero nemo consequatur odit nulla</li>
147- </ul>
148-
149- <h4>Inline Lists</h4>
150- <ul class="ues-list ues-list-inline">
151- <li>Apple</li>
152- <li>Orange</li>
153- <li>Pear</li>
154- </ul>
155-
156- <h4>Definition Lists</h4>
157- <dl class="ues-list">
158- <dt>Apple</dt>
159- <dd>dicta possimus iusto voluptatibus blanditiis totam incidunt excepturi mollitia quia aliquid eius</dd>
160- <dd>enim architecto velit corporis doloremque soluta sapiente eum ad optio dolorem sit</dd>
161- <dt>Orange</dt>
162- <dd>accusantium mollitia facilis nostrum iusto et iure unde dolorum alias corporis ullam</dd>
163- <dt>Pear</dt>
164- <dd>sint ullam exercitationem aliquid saepe ratione labore neque quis molestias dolorem inventore</dd>
165- </dl>
166-
167- </div>
168-
169- <div class="section" id="buttons">
170- <p>
171- <button>No class</button>
172- <button class=ues-button>Default button</button>
173- <button class="ues-button ues-button-primary">Primary button</button>
174- <button class="ues-button ues-button-tertiary">Tertiary button</button>
175- </p>
176-
177- <p>
178- <button class="ues-button"><i class="fa fa-credit-card"></i> <span>Change Payment Method</span></button>
179- <button class="ues-button ues-button-primary"><i class="fa fa-shopping-cart"></i> <span>Checkout</span></button>
180- </p>
181-
182- <p>
183- <a class="ues-button" href="#">Link</a>
184- <button class=ues-button type=button>Button</button>
185- <input class=ues-button type=button value=Input>
186- <input class=ues-button type=submit value=Submit>
187- </p>
188-
189- <p>
190- <button class=ues-button-large>Large Button</button>
191- <button class=ues-button>Default Button</button>
192- <button class=ues-button-small>Small Button</button>
193- </p>
194-
195- <p><button class=ues-button-block>Default Block Button</button></p>
196- <p><button class="ues-button-block ues-button-primary">Primary Block Button</button></p>
197-
198- <p>
199- <div class="ues-button-group">
200- <button>Left</button>
201- <button>Middle</button>
202- <button>Right</button>
203- </div>
204- </p>
205-
206- <p>
207- <div class="ues-button-toolbar">
208- <div class="ues-button-group">
209- <button>A</button>
210- <button>B</button>
211- <button>C</button>
212- </div>
213- <div class="ues-button-group">
214- <button>D</button>
215- <button>E</button>
216- </div>
217- <div class="ues-button-group">
218- <button>F</button>
219- </div>
220- </div>
221- </p>
222- </div>
223-
224- <div class="section" id="dropdowns">
225- <h1>Dropdowns</h1>
226-
227- <div class="ues-box example">
228- <!-- Link or button to toggle dropdown -->
229- <div class="ues-dropdown clear">
230- <ul class="ues-dropdown-menu">
231- <li><a tabindex="-1" href="#">Action</a></li>
232- <li><a tabindex="-1" href="#">Another action</a></li>
233- <li><a tabindex="-1" href="#">Something else here</a></li>
234- <li class="ues-dropdown-divider"></li>
235- <li><a tabindex="-1" href="#">Separated link</a></li>
236- </ul>
237- </div>
238- <div class="ues-dropdown clear">
239- <!-- Link or button to toggle dropdown -->
240- <ul class="ues-dropdown-menu">
241- <li class="ues-dropdown-header">Dropdown header</li>
242- <li><a tabindex="-1" href="#">Action</a></li>
243- <li><a tabindex="-1" href="#">Another action</a></li>
244- <li><a tabindex="-1" href="#">Something else here</a></li>
245- <li class="ues-dropdown-divider"></li>
246- <li class="ues-dropdown-header">Dropdown header</li>
247- <li><a tabindex="-1" href="#">Separated link</a></li>
248- </ul>
249- </div>
250- </div>
251- <h2>Button Dropdowns</h2>
252- <div class="ues-box example">
253- <div class="ues-button-group">
254- <button type="button" class="ues-button ues-dropdown-toggle">
255- Do Something &#x25BC;
256- </button>
257- <ul class="ues-dropdown-menu">
258- <li><a tabindex="-1" href="#">Action</a></li>
259- <li><a tabindex="-1" href="#">Another action</a></li>
260- <li><a tabindex="-1" href="#">Something else here</a></li>
261- <li class="ues-dropdown-divider"></li>
262- <li><a tabindex="-1" href="#">Separated link</a></li>
263- </ul>
264- </div>
265- </div>
266- <div class="ues-box example">
267- <div class="ues-button-group">
268- <button type="button" class="ues-button">
269- Action
270- </button>
271- <button type="button" class="ues-button ues-dropdown-toggle">
272- &#x25BC;
273- </button>
274- <ul class="ues-dropdown-menu">
275- <li><a tabindex="-1" href="#">Action</a></li>
276- <li><a tabindex="-1" href="#">Another action</a></li>
277- <li><a tabindex="-1" href="#">Something else here</a></li>
278- <li class="ues-dropdown-divider"></li>
279- <li><a tabindex="-1" href="#">Separated link</a></li>
280- </ul>
281- </div>
282- </div>
283-
284- </div>
285-
286- <div class="section" id="navigation">
287- <h1>Navigation</h1>
288-
289- <h2>Horizontal Menu</h2>
290- <div class="ues-box example">
291- <ul class="ues-menu ues-menu-horizontal">
292- <li><a href="">Dashboard</a></li>
293- <li><a href="">Files</a></li>
294- <li><a href="">Photos</a></li>
295- <li><a href="">Music</a></li>
296- </ul>
297- </div>
298-
299- <h2>Vertical Menu</h2>
300- <div class="ues-box example">
301- <ul class="ues-menu">
302- <li><a href="">Dashboard</a></li>
303- <li class="ues-menu-selected"><a href="">Files</a></li>
304- <li><a href="">Photos</a></li>
305- <li><a href="">Music</a></li>
306- </ul>
307- </div>
308-
309- <h2>Navbar</h2>
310- <div class="ues-box example">
311- <div class="ues-navbar">
312- <ul class="ues-menu ues-menu-horizontal">
313- <li><a href="">Dashboard</a></li>
314- <li><a href="">Files</a></li>
315- <li><a href="">Photos</a></li>
316- <li><a href="">Music</a></li>
317- </ul>
318- </div>
319- </div>
320-
321- <h2>Navbar with Title/Graphic and right text</h2>
322- <div class="ues-box example">
323- <div class="ues-navbar">
324- <div class="ues-navbar-brand">
325- <a href="/">[BRAND]</a>
326- </div>
327- <ul class="ues-menu ues-menu-horizontal">
328- <li><a href="">Dashboard</a></li>
329- <li><a href="">Files</a></li>
330- <li><a href="">Photos</a></li>
331- <li><a href="">Music</a></li>
332- </ul>
333- <p class="ues-navbar-text">Signed in as Lobo.</p>
334- </div>
335- </div>
336-
337- </div>
338-
339- <div class="section" id="pagination">
340- <h1>Pagination</h1>
341-
342- <h2>Pagination</h2>
343- <div class="ues-box example">
344- <ul class="ues-pagination">
345- <li class="-disabled"><span><i class="fa fa-angle-double-left"></i></span></li>
346- <li class="-active"><a href="#">1</a></li>
347- <li><a href="#">2</a></li>
348- <li><a href="#">3</a></li>
349- <li><a href="#">4</a></li>
350- <li><a href="#">5</a></li>
351- <li><a href="#"><i class="fa fa-angle-double-right"></i></a></li>
352- </ul>
353- </div>
354- <h2>Pagination with break</h2>
355- <div class="ues-box example">
356- <ul class="ues-pagination">
357- <li class="-disabled"><span><i class="fa fa-angle-double-left"></i></span></li>
358- <li class="-active"><a href="#">1</a></li>
359- <li><a href="#">2</a></li>
360- <li><a href="#">3</a></li>
361- <li class="ues-pagination-break"><span>…</span></li>
362- <li><a href="#">8</a></li>
363- <li><a href="#">9</a></li>
364- <li><a href="#">10</a></li>
365- <li><a href="#"><i class="fa fa-angle-double-right"></i></a></li>
366- </ul>
367- </div>
368-
369- </div>
370-
371- <div class="section" id="forms">
372- <h1>Forms</h1>
373-
374- <article>
375- <h2>Default Forms</h2>
376- <p>By default individual form controls receive styling, with minimal classing and
377- without any required base class on the <code class=tag>form</code> or large
378- changes in markup.</p>
379-
380- <p>Results in stacked, left-aligned labels on top of form controls.</p>
381-
382- <div class="ues-box example" title="Default Form">
383- <form action>
384- <fieldset>
385- <label>Username:</label>
386- <input type=text>
387-
388- <label>Password:</label>
389- <input type=text>
390- <label><input type=checkbox>Keep me signed in</label>
391- <div class=ues-form-help>Form help text</div>
392- </fieldset>
393- </form>
394- </div>
395-
396- <div class="ues-box example">
397- <fieldset>
398- <legend>Payment Details</legend>
399-
400- <label><input checked type=radio name=foo>Credit Card</label>
401- <label><input type=radio name=foo>Paypal</label>
402-
403- <label>Name/username:</label>
404- <input type=text placeholder="Type something…">
405-
406- <label class=ues-inline><input type=radio name=bar>Foo</label>
407- <label class=ues-inline><input checked type=radio name=bar>Bar</label>
408-
409- <label>Card Number:</label>
410- <input type=text>
411-
412- <label>CCV:</label>
413- <input type=text>
414- <div class=ues-form-help>Form help text</div>
415-
416- <label>Select:</label>
417- <select>
418- <option value>Select One</option>
419- <option value=1>Select One</option>
420- <option value=2>Foo</option>
421- <option value=3>Bar</option>
422- <option value=4>Baz</option>
423- </select>
424- <label>Select:</label>
425- <select class=ues-inline>
426- <option value=2>Foo</option>
427- <option value=3 selected>Bar</option>
428- <option value=4>Baz</option>
429- </select>
430- <span class=ues-form-help>Inline form help text</span>
431-
432- </fieldset>
433- <fieldset>
434- <label><input type=checkbox>Agree to ToS</label>
435- </fieldset>
436- <button type=submit class=ues-button>Submit</button>
437- </form>
438- </div>
439- </article>
440- <article>
441- <h2>Inline Form</h2>
442- <p>Simple inline form</p>
443- <div class="ues-box example" title="Inline Form">
444- <form action class=ues-form-inline>
445- <fieldset>
446- <input type=text placeholder="Type something…">
447- <input type=text placeholder="Type something…">
448- <label><input type=checkbox>Remember me?</label>
449- <button type=submit class=ues-button>Submit</button>
450- </fieldset>
451- </form>
452- </div>
453- </article>
454- <article>
455- <h2>Required Inputs</h2>
456- <p>To mark a form control as required, add the <code>required</code> attribute. </p>
457- <div class="ues-box example" title="Required Inputs">
458- <form action class=ues-form-inline>
459- <input type=text placeholder="Type something…" required="true">
460- </form>
461- </div>
462- </article>
463- <article>
464- <h2>Disabled Inputs</h2>
465- <p>To mark a form control as disabled, add the <code>disabled</code> attribute. </p>
466- <div class="ues-box example" title="Disabled Inputs">
467- <form action class=ues-form-inline>
468- <input type=text placeholder="Type something…" disabled="true">
469- </form>
470- </div>
471- </article>
472- <article>
473- <h2>Readonly Inputs</h2>
474- <p>To make a form input read-only, add the <code>readonly</code> attribute. The
475- difference between <code>disabled</code> and <code>readonly</code> is read-only inputs are still
476- focusable. This allows people to interact with the input and select its
477- text, whereas disabled controls are not interactive.</p>
478- <div class="ues-box example" title="Readonly Inputs">
479- <form action class=ues-form-inline>
480- <input type=text readonly="true" value="http://ubuntuone.com/abcdef1234">
481- </form>
482- </div>
483- </article>
484- <article>
485- <h2>Checkboxes &amp; Radios</h2>
486- <div class="ues-box example">
487- <form action>
488- <fieldset>
489- <legend>Radio inputs default, stacked</legend>
490- <label><input checked type=radio name=foo>Credit Card</label>
491- <label><input type=radio name=foo>Paypal</label>
492- </fieldset>
493- <fieldset>
494- <legend>Radio inputs inline, stacked</legend>
495- <label class=ues-inline><input type=radio name=bar>Foo</label>
496- <label class=ues-inline><input checked type=radio name=bar>Bar</label>
497- </fieldset>
498- <fieldset>
499- <legend>Checkbox default, stacked</legend>
500- <label><input checked type=checkbox name=foo1>Credit Card</label>
501- <label><input type=checkbox name=foo2>Paypal</label>
502- </fieldset>
503- <fieldset>
504- <legend>Checkbox inline, stacked</legend>
505- <label class=ues-inline><input type=checkbox name=bar1>Foo</label>
506- <label class=ues-inline><input checked type=checkbox name=bar2>Bar</label>
507- </fieldset>
508- </form>
509- </div>
510- </article>
511-
512- </div>
513-
514- <div class="section" id="layout">
515- <h1>Layout</h1>
516-
517- <h2>AKA Panels and Wells… TODO</h2>
518- <p>Rename these classes!</p>
519- <div class=doc-example>
520- <div class=ues-box-solid style="width:320px">
521- <h2 class=ues-box-solid-h>Callout Headline</h2>
522- <p>lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore</p>
523- <h3>A Headline</h3>
524- <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
525- <h2 class=ues-box-solid-h>Callout Headline</h2>
526- <p>lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore</p>
527- <h3>A Headline</h3>
528- <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
529- </div>
530- </div>
531-
532- </div>
533-
534- <div class="section" id="testing">
535- <h1>Testing</h1>
536-
537- <h2>Common Page Objects</h2>
538-
539- <h3>Page Heading</h3>
540-
541- <div class="ues-box example">
542- <h1 data-qa-id="page-heading">My Page Heading</h1>
543- </div>
544-
545-
546- </div>
547-
548- <div class="section" id="feedback" style="margin-bottom: 2em">
549- <h1>Feedback</h1>
550-
551-
552- <h2>Static messages, warnings, errors, notices</h2>
553-
554- <div class="doc-example">
555-
556- <p class="ues-message ues-message-inline">Message</p>
557-
558- <p class="ues-message ues-message-inline ues-disabled">Disabled</p>
559-
560- <p class="ues-message ues-message-inline ues-success">Success</p>
561-
562- <p class="ues-message ues-message-inline ues-warning">Warning</p>
563-
564- <p class="ues-message ues-message-inline ues-error">Error</p>
565-
566- <p class="ues-message ues-message-inline ues-error ues-error-pulsating">Pulsating error</p>
567-
568- <p class="ues-message ues-message-inline ues-information">Information</p>
569-
570- <p id="msg-closeable" class="ues-message ues-message-closeable">Closable</p>
571-
572- <p class="ues-message ues-message-bordered ues-information">Block element with border</p>
573-
574- <p class="ues-message ues-message-bordered ues-warning">Warning with an <a href="#feedback">important link</a></p>
575-
576-
577- </div>
578-
579+ <li>Cox</li>
580+ <li>Gala</li>
581+ <li>Bræburn</li>
582+ </ul>
583+ <li>Oranges</li>
584+ <li>Pears</li>
585+ </ol>
586+
587+ <h4>Bordered</h4>
588+ <ul class="ues-list ues-list-bordered">
589+ <li>excepturi dolore quo et quisquam atque neque at labore molestias quia nemo</li>
590+ <li>architecto nam sapiente voluptate molestiae ducimus fugiat iure natus nihil quod officia</li>
591+ <li>debitis nemo quos enim illo mollitia quidem numquam incidunt corrupti blanditiis consequuntur</li>
592+ <li>impedit ipsa dignissimos quasi quaerat doloribus maxime libero voluptatum itaque molestias ab</li>
593+ <li>quidem perspiciatis asperiores exercitationem facilis tenetur sapiente vero nemo consequatur odit nulla</li>
594+ </ul>
595+
596+ <h4>Inline Lists</h4>
597+ <ul class="ues-list ues-list-inline">
598+ <li>Apple</li>
599+ <li>Orange</li>
600+ <li>Pear</li>
601+ </ul>
602+
603+ <h4>Definition Lists</h4>
604+ <dl class="ues-list">
605+ <dt>Apple</dt>
606+ <dd>dicta possimus iusto voluptatibus blanditiis totam incidunt excepturi mollitia quia aliquid eius</dd>
607+ <dd>enim architecto velit corporis doloremque soluta sapiente eum ad optio dolorem sit</dd>
608+ <dt>Orange</dt>
609+ <dd>accusantium mollitia facilis nostrum iusto et iure unde dolorum alias corporis ullam</dd>
610+ <dt>Pear</dt>
611+ <dd>sint ullam exercitationem aliquid saepe ratione labore neque quis molestias dolorem inventore</dd>
612+ </dl>
613+</section>
614+
615+
616+<section>
617+ <h1>Buttons</h1>
618+ <p>
619+ <button>No class</button>
620+ <button class=ues-button>Default button</button>
621+ <button class="ues-button ues-button-primary">Primary button</button>
622+ <button class="ues-button ues-button-tertiary">Tertiary button</button>
623+ </p>
624+
625+ <p>
626+ <button class="ues-button">&#9731; <span>Change Payment Method</span></button>
627+ <button class="ues-button ues-button-primary">&#9731; <span>Checkout</span></button>
628+ </p>
629+
630+ <p>
631+ <a class="ues-button" href="#">Link</a>
632+ <button class=ues-button type=button>Button</button>
633+ <input class=ues-button type=button value=Input>
634+ <input class=ues-button type=submit value=Submit>
635+ </p>
636+
637+ <p>
638+ <button class=ues-button-large>Large Button</button>
639+ <button class=ues-button>Default Button</button>
640+ <button class=ues-button-small>Small Button</button>
641+ </p>
642+
643+ <p><button class=ues-button-block>Default Block Button</button></p>
644+ <p><button class="ues-button-block ues-button-primary">Primary Block Button</button></p>
645+
646+ <p>
647+ <div class="ues-button-group">
648+ <button>Left</button>
649+ <button>Middle</button>
650+ <button>Right</button>
651+ </div>
652+ </p>
653+
654+ <p>
655+ <div class="ues-button-toolbar">
656+ <div class="ues-button-group">
657+ <button>A</button>
658+ <button>B</button>
659+ <button>C</button>
660+ </div>
661+ <div class="ues-button-group">
662+ <button>D</button>
663+ <button>E</button>
664+ </div>
665+ <div class="ues-button-group">
666+ <button>F</button>
667+ </div>
668+ </div>
669+ </p>
670+
671+ <h1>Dropdowns</h1>
672+
673+ <!-- Link or button to toggle dropdown -->
674+ <div class="ues-dropdown clear">
675+ <ul class="ues-dropdown-menu">
676+ <li><a tabindex="-1" href="#">Action</a></li>
677+ <li><a tabindex="-1" href="#">Another action</a></li>
678+ <li><a tabindex="-1" href="#">Something else here</a></li>
679+ <li class="ues-dropdown-divider"></li>
680+ <li><a tabindex="-1" href="#">Separated link</a></li>
681+ </ul>
682+ </div>
683+ <div class="ues-dropdown clear">
684+ <!-- Link or button to toggle dropdown -->
685+ <ul class="ues-dropdown-menu">
686+ <li class="ues-dropdown-header">Dropdown header</li>
687+ <li><a tabindex="-1" href="#">Action</a></li>
688+ <li><a tabindex="-1" href="#">Another action</a></li>
689+ <li><a tabindex="-1" href="#">Something else here</a></li>
690+ <li class="ues-dropdown-divider"></li>
691+ <li class="ues-dropdown-header">Dropdown header</li>
692+ <li><a tabindex="-1" href="#">Separated link</a></li>
693+ </ul>
694+ </div>
695+ <h2>Button Dropdowns</h2>
696+ <div class="ues-button-group">
697+ <button type="button" class="ues-button ues-dropdown-toggle">
698+ Do Something &#x25BC;
699+ </button>
700+ <ul class="ues-dropdown-menu">
701+ <li><a tabindex="-1" href="#">Action</a></li>
702+ <li><a tabindex="-1" href="#">Another action</a></li>
703+ <li><a tabindex="-1" href="#">Something else here</a></li>
704+ <li class="ues-dropdown-divider"></li>
705+ <li><a tabindex="-1" href="#">Separated link</a></li>
706+ </ul>
707+ </div>
708+ <div class="ues-button-group">
709+ <button type="button" class="ues-button">
710+ Action
711+ </button>
712+ <button type="button" class="ues-button ues-dropdown-toggle">
713+ &#x25BC;
714+ </button>
715+ <ul class="ues-dropdown-menu">
716+ <li><a tabindex="-1" href="#">Action</a></li>
717+ <li><a tabindex="-1" href="#">Another action</a></li>
718+ <li><a tabindex="-1" href="#">Something else here</a></li>
719+ <li class="ues-dropdown-divider"></li>
720+ <li><a tabindex="-1" href="#">Separated link</a></li>
721+ </ul>
722+ </div>
723+</section>
724+
725+
726+<section>
727+ <h1>Navigation</h1>
728+
729+ <h2>Horizontal Menu</h2>
730+ <ul class="ues-menu ues-menu-horizontal">
731+ <li><a href="">Dashboard</a></li>
732+ <li><a href="">Files</a></li>
733+ <li><a href="">Photos</a></li>
734+ <li><a href="">Music</a></li>
735+ </ul>
736+
737+ <h2>Vertical Menu</h2>
738+ <ul class="ues-menu">
739+ <li><a href="">Dashboard</a></li>
740+ <li class="ues-menu-selected"><a href="">Files</a></li>
741+ <li><a href="">Photos</a></li>
742+ <li><a href="">Music</a></li>
743+ </ul>
744+
745+ <h2>Navbar</h2>
746+ <div class="ues-navbar">
747+ <ul class="ues-menu ues-menu-horizontal">
748+ <li><a href="">Dashboard</a></li>
749+ <li><a href="">Files</a></li>
750+ <li><a href="">Photos</a></li>
751+ <li><a href="">Music</a></li>
752+ </ul>
753+ </div>
754+
755+ <h2>Navbar with Title/Graphic and right text</h2>
756+ <div class="ues-navbar">
757+ <div class="ues-navbar-brand">
758+ <a href="/">[BRAND]</a>
759+ </div>
760+ <ul class="ues-menu ues-menu-horizontal">
761+ <li><a href="">Dashboard</a></li>
762+ <li><a href="">Files</a></li>
763+ <li><a href="">Photos</a></li>
764+ <li><a href="">Music</a></li>
765+ </ul>
766+ <p class="ues-navbar-text">Signed in as Lobo.</p>
767+ </div>
768+
769+ <h2>Default Pagination</h2>
770+ <ul class="ues-pagination">
771+ <li class="-disabled"><span>&#x2190;</span></li>
772+ <li class="-active"><a href="#">1</a></li>
773+ <li><a href="#">2</a></li>
774+ <li><a href="#">3</a></li>
775+ <li><a href="#">4</a></li>
776+ <li><a href="#">5</a></li>
777+ <li><a href="#">&#x2192;</a></li>
778+ </ul>
779+ <h2>Pagination with break</h2>
780+ <ul class="ues-pagination">
781+ <li class="-disabled"><span>&#x2190;</span></li>
782+ <li class="-active"><a href="#">1</a></li>
783+ <li><a href="#">2</a></li>
784+ <li><a href="#">3</a></li>
785+ <li class="ues-pagination-break"><span>…</span></li>
786+ <li><a href="#">8</a></li>
787+ <li><a href="#">9</a></li>
788+ <li><a href="#">10</a></li>
789+ <li><a href="#">&#x2192;</a></li>
790+ </ul>
791+</section>
792+
793+
794+<section>
795+ <h1>Forms</h1>
796+
797+ <article>
798+ <h2>Default Forms</h2>
799+ <p>By default individual form controls receive styling, with minimal classing and
800+ without any required base class on the <code class=tag>form</code> or large
801+ changes in markup.</p>
802+
803+ <p>Results in stacked, left-aligned labels on top of form controls.</p>
804+
805+ <form action>
806+ <fieldset>
807+ <label>Username:</label>
808+ <input type=text>
809+
810+ <label>Password:</label>
811+ <input type=text>
812+ <label><input type=checkbox>Keep me signed in</label>
813+ <div class=ues-form-help>Form help text</div>
814+ </fieldset>
815+ </form>
816+
817+ <fieldset>
818+ <legend>Payment Details</legend>
819+
820+ <label><input checked type=radio name=foo>Credit Card</label>
821+ <label><input type=radio name=foo>Paypal</label>
822+
823+ <label>Name/username:</label>
824+ <input type=text placeholder="Type something…">
825+
826+ <label class=ues-inline><input type=radio name=bar>Foo</label>
827+ <label class=ues-inline><input checked type=radio name=bar>Bar</label>
828+
829+ <label>Card Number:</label>
830+ <input type=text>
831+
832+ <label>CCV:</label>
833+ <input type=text>
834+ <div class=ues-form-help>Form help text</div>
835+
836+ <label>Select:</label>
837+ <select>
838+ <option value>Select One</option>
839+ <option value=1>Select One</option>
840+ <option value=2>Foo</option>
841+ <option value=3>Bar</option>
842+ <option value=4>Baz</option>
843+ </select>
844+ <label>Select:</label>
845+ <select class=ues-inline>
846+ <option value=2>Foo</option>
847+ <option value=3 selected>Bar</option>
848+ <option value=4>Baz</option>
849+ </select>
850+ <span class=ues-form-help>Inline form help text</span>
851+
852+ </fieldset>
853+ <fieldset>
854+ <label><input type=checkbox>Agree to ToS</label>
855+ </fieldset>
856+ <button type=submit class=ues-button>Submit</button>
857+ </form>
858+</article>
859+<article>
860+ <h2>Inline Form</h2>
861+ <p>Simple inline form</p>
862+ <form action class=ues-form-inline>
863+ <fieldset>
864+ <input type=text placeholder="Type something…">
865+ <input type=text placeholder="Type something…">
866+ <label><input type=checkbox>Remember me?</label>
867+ <button type=submit class=ues-button>Submit</button>
868+ </fieldset>
869+ </form>
870+</article>
871+<article>
872+ <h2>Required Inputs</h2>
873+ <p>To mark a form control as required, add the <code>required</code> attribute. </p>
874+ <form action class=ues-form-inline>
875+ <input type=text placeholder="Type something…" required="true">
876+ </form>
877+</article>
878+<article>
879+ <h2>Disabled Inputs</h2>
880+ <p>To mark a form control as disabled, add the <code>disabled</code> attribute. </p>
881+ <form action class=ues-form-inline>
882+ <input type=text placeholder="Type something…" disabled="true">
883+ </form>
884+</article>
885+<article>
886+ <h2>Readonly Inputs</h2>
887+ <form action class=ues-form-inline>
888+ <input type=text readonly="true" value="http://ubuntuone.com/abcdef1234">
889+ </form>
890+</article>
891+<article>
892+ <h2>Checkboxes &amp; Radios</h2>
893+ <form action>
894+ <fieldset>
895+ <legend>Radio inputs default, stacked</legend>
896+ <label><input checked type=radio name=foo>Credit Card</label>
897+ <label><input type=radio name=foo>Paypal</label>
898+ </fieldset>
899+ <fieldset>
900+ <legend>Radio inputs inline, stacked</legend>
901+ <label class=ues-inline><input type=radio name=bar>Foo</label>
902+ <label class=ues-inline><input checked type=radio name=bar>Bar</label>
903+ </fieldset>
904+ <fieldset>
905+ <legend>Checkbox default, stacked</legend>
906+ <label><input checked type=checkbox name=foo1>Credit Card</label>
907+ <label><input type=checkbox name=foo2>Paypal</label>
908+ </fieldset>
909+ <fieldset>
910+ <legend>Checkbox inline, stacked</legend>
911+ <label class=ues-inline><input type=checkbox name=bar1>Foo</label>
912+ <label class=ues-inline><input checked type=checkbox name=bar2>Bar</label>
913+ </fieldset>
914+ </form>
915+</article>
916+</section>
917+
918+
919+<section>
920+<h1>Layout</h1>
921+
922+<div class="ues-box ues-box-solid" style="width:320px">
923+ <h3>A Headline</h3>
924+ <p>lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore</p>
925+ <h3>A Headline</h3>
926+ <p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
927 </div>
928
929+<h1>Feedback</h1>
930+
931+
932+<h2>Static messages, warnings, errors, notices</h2>
933+
934+<p class="ues-message ues-message-inline">Message</p>
935+
936+<p class="ues-message ues-message-inline ues-disabled">Disabled</p>
937+
938+<p class="ues-message ues-message-inline ues-success">Success</p>
939+
940+<p class="ues-message ues-message-inline ues-warning">Warning</p>
941+
942+<p class="ues-message ues-message-inline ues-error">Error</p>
943+
944+<p class="ues-message ues-message-inline ues-error ues-error-pulsating">Pulsating error</p>
945+
946+<p class="ues-message ues-message-inline ues-information">Information</p>
947+
948+<p id="msg-closeable" class="ues-message ues-message-closeable">Closable</p>
949+
950+<p class="ues-message ues-message-bordered ues-information">Block element with border</p>
951+
952+<p class="ues-message ues-message-bordered ues-warning">Warning with an <a href="#feedback">important link</a></p>
953+</section>
954
955 </body>
956 </html>

Subscribers

People subscribed via source and target branches