« back to all changes in this revision
Viewing changes to test/index.html
- browse files at revision 28
- compare with another revision
- download diff
- download tarball
- view history from revision 28
- Committer: Stephen Stewart
- Date: 2014-03-11 19:04:47 UTC
- mfrom: (18.2.23 navbars)
- Revision ID: stephen.stewart@canonical.com-20140311190447-yc7qhp57uy2z0ytv
merge lp:~stephen-stewart/ulysses/navbars
- files added:
- public/icons
- src/icons
- test/visual/screenshots
- test/visual/screenshots/desktop
- test/visual/screenshots/smallscreen
- files removed:
- test/visual/screenshots
- files renamed:
- test/visual/config/phantomcss-tests.js => test/visual/config/desktop.js
- files modified:
- Gruntfile.js
added
removed
test/index.html
5
5
<title>Ulysses CSS Test Page</title>
6
6
7
7
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
8
9
8
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,300,700' rel='stylesheet' type='text/css'>
10
11
9
<link rel="stylesheet" href="/css/ulysses.css">
12
10
13
11
<!--
28
26
</head>
29
27
<body>
30
28
31
<div class="ues-container">
29
<div class="ues-page">
30
<section>
31
<h1>Icons</h1>
32
<div style="background-color:#dd4814">
33
<i class="ues-icon-menu"></i>
34
</div>
35
<i class="ues-icon-menu orange"></i>
36
</section>
32
37
<section>
33
38
<h1>Typography</h1>
34
39
247
252
<li><a href="">Music</a></li>
248
253
</ul>
249
254
250
<h2>Navbar</h2>
251
<div class="ues-navbar">
252
<ul class="ues-menu ues-menu-horizontal">
253
<li><a href="">Dashboard</a></li>
254
<li><a href="">Files</a></li>
255
<li><a href="">Photos</a></li>
256
<li><a href="">Music</a></li>
257
</ul>
258
</div>
259
260
<h2>Primary navbar, works on small screens</h2>
261
<div class="ues-navbar ues-navbar-primary-nav">
262
<div class="ues-navbar-toggle">
263
<a href=""><span></span></a>
264
</div>
265
<div class="ues-navbar-brand">
266
<a href="/">[BRAND]</a>
267
</div>
268
<div class="ues-navbar-toggle-user">
269
<a href=""></a>
270
</div>
271
<ul class="ues-menu ues-menu-horizontal">
272
<li><a href="">Dashboard</a></li>
273
<li><a href="">Files</a></li>
274
<li><a href="">Photos</a></li>
275
<li><a href="">Music</a></li>
276
</ul>
277
<ul class="ues-menu ues-menu-horizontal ues-menu-user">
278
<li><span>Signed in as Lobo</span></li>
279
<li><a href="">My account</a></li>
280
<li><a href="">Log out</a></li>
281
</li>
282
</div>
283
284
<h2>Navbar with Title/Graphic and right text</h2>
285
<div class="ues-navbar">
286
<div class="ues-navbar-brand">
287
<a href="/">[BRAND]</a>
288
</div>
289
<ul class="ues-menu ues-menu-horizontal">
290
<li><a href="">Dashboard</a></li>
291
<li><a href="">Files</a></li>
292
<li><a href="">Photos</a></li>
293
<li><a href="">Music</a></li>
294
</ul>
295
<p class="ues-navbar-text">Signed in as Lobo.</p>
296
</div>
255
<h2>Navbar with brand + primary nav</h2>
256
<div id="navbar" class="ues-navbar" data-qa="navbar-simple">
257
<div class="ues-navbar-header">
258
259
<div class="ues-navbar-brand">
260
<a href="/">[INSERT BRAND IMAGE OR TEXT]</a>
261
</div>
262
</div>
263
<div class="ues-navbar-collapse">
264
<div class="ues-navbar-primary-nav">
265
<ul class="ues-navbar-menu">
266
<li><a href="">Dashboard</a></li>
267
<li><a href="">Files</a></li>
268
<li><a href="">Photos</a></li>
269
<li><a href="">Music</a></li>
270
</ul>
271
</div>
272
</div>
273
</div>
274
275
<h2>Inverted Navbar + primary nav</h2>
276
<div class="ues-navbar ues-navbar-invert" data-qa="navbar-invert">
277
<div class="ues-navbar-header">
278
<div class="ues-navbar-brand">
279
<a href="/">[INSERT BRAND IMAGE OR TEXT]</a>
280
</div>
281
</div>
282
<div class="ues-navbar-collapse">
283
<div class="ues-navbar-primary-nav">
284
<ul class="ues-navbar-menu">
285
<li><a href="">Dashboard</a></li>
286
<li><a href="">Files</a></li>
287
<li><a href="">Photos</a></li>
288
<li><a href="">Music</a></li>
289
</ul>
290
</div>
291
</div>
292
</div>
293
294
<h2>Navbar with brand + primary nav + secondary nav</h2>
295
<div class="ues-navbar" data-qa="navbar-full">
296
<div class="ues-navbar-header">
297
<div class="ues-navbar-brand">
298
<a href="/">[INSERT BRAND IMAGE OR TEXT]</a>
299
</div>
300
</div>
301
<div class="ues-navbar-collapse">
302
<div class="ues-navbar-primary-nav">
303
<ul class="ues-navbar-menu">
304
<li><a href="">Dashboard</a></li>
305
<li><a href="">Files</a></li>
306
<li><a href="">Photos</a></li>
307
<li><a href="">Music</a></li>
308
</ul>
309
</div>
310
<div class="ues-navbar-secondary-nav">
311
<ul class="ues-navbar-menu">
312
<li><a href="">Account</a></li>
313
<li><a href="">Settings</a></li>
314
<li><a href="">Logout</a></li>
315
</ul>
316
</div>
317
</div>
318
</div>
319
320
<h2>Navbar with brand + secondary nav</h2>
321
<div class="ues-navbar-header">
322
<div class="ues-navbar">
323
<div class="ues-navbar-brand">
324
<a href="/">[INSERT BRAND IMAGE OR TEXT]</a>
325
</div>
326
</div>
327
</div>
328
<div class="ues-navbar-collapse">
329
<div class="ues-navbar-secondary-nav">
330
<ul class="ues-navbar-menu">
331
<li><a href="">Account</a></li>
332
<li><a href="">Settings</a></li>
333
<li><a href="">Logout</a></li>
334
</ul>
335
</div>
336
</div>
337
338
<h2>Navbar with brand + secondary nav button</h2>
339
<div class="ues-navbar-header">
340
<div class="ues-navbar" data-qa="navbar-button">
341
<div class="ues-navbar-brand">
342
<a href="/">[INSERT BRAND IMAGE OR TEXT]</a>
343
</div>
344
</div>
345
<div class="ues-navbar-collapse">
346
<div class="ues-navbar-secondary-nav">
347
<div class="ues-navbar-text">
348
Login
349
</div>
350
</div>
351
</div>
352
</div>
353
354
<h2>Breadcrumb</h2>
355
<ol class="ues-breadcrumb" data-qa="breadcrumb">
356
<li><a href="">Categories</a></li>
357
<li><a href="">Games</a></li>
358
<li class="active">Side Scrolling Shoot 'Em Ups</li>
359
</ol>
360
297
361
298
362
<h2>Default Pagination</h2>
299
363
<ul class="ues-pagination">
300
<li class="-disabled"><span>←</span></li>
301
<li class="-active"><a href="#">1</a></li>
364
<li class="ues-disabled"><a>←</a></li>
365
<li class="ues-active"><a href="#">1</a></li>
302
366
<li><a href="#">2</a></li>
303
367
<li><a href="#">3</a></li>
304
368
<li><a href="#">4</a></li>
305
369
<li><a href="#">5</a></li>
306
370
<li><a href="#">→</a></li>
307
371
</ul>
372
308
373
<h2>Pagination with break</h2>
309
374
<ul class="ues-pagination">
310
<li class="-disabled"><span>←</span></li>
311
<li class="-active"><a href="#">1</a></li>
375
<li class="ues-disabled"><a>←</a></li>
376
<li class="ues-active"><a href="#">1</a></li>
312
377
<li><a href="#">2</a></li>
313
378
<li><a href="#">3</a></li>
314
379
<li class="ues-pagination-break"><span>…</span></li>
331
396
332
397
<p>Results in stacked, left-aligned labels on top of form controls.</p>
333
398
334
<form action>
399
<form action data-qa="default-form">
335
400
<fieldset>
336
401
<label>Username:</label>
337
402
<input type=text>
341
406
<label><input type=checkbox>Keep me signed in</label>
342
407
<div class=ues-form-help>Form help text</div>
343
408
</fieldset>
344
</form>
345
346
<fieldset>
347
<legend>Payment Details</legend>
348
349
<label><input checked type=radio name=foo>Credit Card</label>
350
<label><input type=radio name=foo>Paypal</label>
351
352
<label>Name/username:</label>
353
<input type=text placeholder="Type something…">
354
355
<label class=ues-inline><input type=radio name=bar>Foo</label>
356
<label class=ues-inline><input checked type=radio name=bar>Bar</label>
357
358
<label>Card Number:</label>
359
<input type=text>
360
361
<label>CCV:</label>
362
<input type=text>
363
<div class=ues-form-help>Form help text</div>
364
365
<label>Select:</label>
366
<select>
367
<option value>Select One</option>
368
<option value=1>Select One</option>
369
<option value=2>Foo</option>
370
<option value=3>Bar</option>
371
<option value=4>Baz</option>
372
</select>
373
<label>Select:</label>
374
<select class=ues-inline>
375
<option value=2>Foo</option>
376
<option value=3 selected>Bar</option>
377
<option value=4>Baz</option>
378
</select>
379
<span class=ues-form-help>Inline form help text</span>
380
381
</fieldset>
382
<fieldset>
383
<label><input type=checkbox>Agree to ToS</label>
384
</fieldset>
385
<button type=submit class=ues-button>Submit</button>
409
410
<fieldset>
411
<legend>Payment Details</legend>
412
413
<label><input checked type=radio name=foo>Credit Card</label>
414
<label><input type=radio name=foo>Paypal</label>
415
416
<label>Name/username:</label>
417
<input type=text placeholder="Type something…">
418
419
<label class=ues-inline><input type=radio name=bar>Foo</label>
420
<label class=ues-inline><input checked type=radio name=bar>Bar</label>
421
422
<label>Card Number:</label>
423
<input type=text>
424
425
<label>CCV:</label>
426
<input type=text>
427
<div class=ues-form-help>Form help text</div>
428
429
<label>Select:</label>
430
<select>
431
<option value>Select One</option>
432
<option value=1>Select One</option>
433
<option value=2>Foo</option>
434
<option value=3>Bar</option>
435
<option value=4>Baz</option>
436
</select>
437
<label>Select:</label>
438
<select class=ues-inline>
439
<option value=2>Foo</option>
440
<option value=3 selected>Bar</option>
441
<option value=4>Baz</option>
442
</select>
443
<span class=ues-form-help>Inline form help text</span>
444
445
</fieldset>
446
<fieldset>
447
<label><input type=checkbox>Agree to ToS</label>
448
</fieldset>
449
<button type=submit class=ues-button>Submit</button>
386
450
</form>
387
451
</article>
388
452
<article>
389
453
<h2>Inline Form</h2>
390
454
<p>Simple inline form</p>
391
<form action class=ues-form-inline>
455
<form action class=ues-form-inline data-qa="inline-form">
392
456
<fieldset>
393
457
<input type=text placeholder="Type something…">
394
458
<input type=text placeholder="Type something…">
419
483
</article>
420
484
<article>
421
485
<h2>Checkboxes & Radios</h2>
422
<form action>
486
<form action data-qa="checkboxes-and-radios">
423
487
<fieldset>
424
488
<legend>Radio inputs default, stacked</legend>
425
489
<label><input checked type=radio name=foo>Credit Card</label>
447
511
448
512
<section>
449
513
<h1>Layout, including Pure (ues-) Grids</h1>
514
<style scoped>
515
.ues-box {
516
margin:0 5px;
517
}
518
</style>
450
519
451
<div class="ues-g-r">
520
<div class="ues-g-r" data-qa="grids">
452
521
<div class="ues-u-1-5">
453
<div class="ues-box ues-box-solid">
454
<h3>A Headline</h3>
455
<p>lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore</p>
456
</div>
522
<h3>Outer 1/5</h3>
523
<p>lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore</p>
457
524
</div>
458
525
<div class="ues-u-4-5">
459
<div class="ues-box">
460
<h3>A Headline</h3>
461
<p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
526
<div class="ues-g-r">
527
<div class="ues-u-1-2">
528
<h3>Inner 1/2 of 4/5</h3>
529
<p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
530
</div>
531
<div class="ues-u-1-2">
532
<h3>Inner 2/2 of 4/5</h3>
533
<p>lorem ipsum dolor sit amet consectetur adipisicing elit</p>
534
</div>
462
535
</div>
463
536
</div>
464
537
</div>
465
538
539
</section>
540
541
<section>
542
466
543
<h1>Feedback</h1>
467
544
468
545
469
546
<h2>Static messages, warnings, errors, notices</h2>
470
547
548
<article data-qa="notifications">
471
549
<p class="ues-message ues-message-inline">Message</p>
472
550
473
551
<p class="ues-message ues-message-inline ues-disabled">Disabled</p>
487
565
<p class="ues-message ues-message-bordered ues-information">Block element with border</p>
488
566
489
567
<p class="ues-message ues-message-bordered ues-warning">Warning with an <a href="#feedback">important link</a></p>
568
</article>
490
569
</section>
491
570
492
571
<section>
493
572
494
<h1>Tables</h1>
495
496
<h2>Default table</h2>
497
498
<table class="ues-table">
499
500
<thead>
501
<tr>
502
<th>Fruit</th>
503
<th>Weight</th>
504
<th>Colour</th>
505
</tr>
506
</thead>
507
508
<tbody>
509
<tr>
510
<td>Apple</td>
511
<td>150g</td>
512
<td>Red|Green</td>
513
</tr>
514
<tr>
515
<td>Orange</td>
516
<td>200g</td>
517
<td>Orange</td>
518
</tr>
519
</tbody>
520
521
</table>
522
523
<h2>Small table</h2>
524
525
<table class="ues-table ues-table-small">
526
527
<thead>
528
<tr>
529
<th>Fruit</th>
530
<th>Weight</th>
531
<th>Colour</th>
532
</tr>
533
</thead>
534
535
<tbody>
536
<tr>
537
<td>Apple</td>
538
<td>150g</td>
539
<td>Red|Green</td>
540
</tr>
541
<tr>
542
<td>Orange</td>
543
<td>200g</td>
544
<td>Orange</td>
545
</tr>
546
</tbody>
547
548
</table>
549
550
<h2>Bordered Table</h2>
551
552
<table class="ues-table ues-table-bordered">
553
554
<thead>
555
<tr>
556
<th>Fruit</th>
557
<th>Weight</th>
558
<th>Colour</th>
559
</tr>
560
</thead>
561
562
<tbody>
563
<tr>
564
<td>Apple</td>
565
<td>150g</td>
566
<td>Red|Green</td>
567
</tr>
568
<tr>
569
<td>Orange</td>
570
<td>200g</td>
571
<td>Orange</td>
572
</tr>
573
</tbody>
574
575
</table>
576
577
<h2>Horizontal border</h2>
578
579
<table class="ues-table ues-table-horizontal">
580
581
<thead>
582
<tr>
583
<th>Fruit</th>
584
<th>Weight</th>
585
<th>Colour</th>
586
</tr>
587
</thead>
588
589
<tbody>
590
<tr>
591
<td>Apple</td>
592
<td>150g</td>
593
<td>Red|Green</td>
594
</tr>
595
<tr>
596
<td>Orange</td>
597
<td>200g</td>
598
<td>Orange</td>
599
</tr>
600
</tbody>
601
602
</table>
603
604
<h2>Striped</h2>
605
606
<table class="ues-table ues-table-striped">
607
608
<thead>
609
<tr>
610
<th>Fruit</th>
611
<th>Weight</th>
612
<th>Colour</th>
613
</tr>
614
</thead>
615
616
<tbody>
617
<tr>
618
<td>Apple</td>
619
<td>150g</td>
620
<td>Red|Green</td>
621
</tr>
622
<tr>
623
<td>Orange</td>
624
<td>200g</td>
625
<td>Orange</td>
626
</tr>
627
<tr>
628
<td>Banana</td>
629
<td>110g</td>
630
<td>Yellow</td>
631
</tr>
632
<tr>
633
<td>Strawberry</td>
634
<td>5g</td>
635
<td>Red</td>
636
</tr>
637
<tr>
638
<td>Tomato</td>
639
<td>80g</td>
640
<td>Red</td>
641
</tr>
642
<tr>
643
<td>Pineapple</td>
644
<td>600g</td>
645
<td>Greenyellow</td>
646
</tr>
647
<tr>
648
<td>Basket</td>
649
<td>130g</td>
650
<td>Brown</td>
651
</tr>
652
</tbody>
653
654
</table>
655
656
<h2>Caption, colgroup, cols, tfoot</h2>
657
658
<table class="ues-table">
659
660
<caption>Fruits and their attributes</caption>
661
662
<colgroup>
663
<col span="1" class="object">
664
<col span="2" class="attributes">
665
</colgroup>
666
667
<thead>
668
<tr>
669
<th>Fruit</th>
670
<th>Weight</th>
671
<th>Colour</th>
672
</tr>
673
</thead>
674
675
<tfoot>
676
<tr>
677
<td>Averages</td>
678
<td>175g</td>
679
<td>Bright colours</td>
680
</tr>
681
</tfoot>
682
683
<tbody>
684
<tr>
685
<td>Apple</td>
686
<td>150g</td>
687
<td>Red|Green</td>
688
</tr>
689
<tr>
690
<td>Orange</td>
691
<td>200g</td>
692
<td>Orange</td>
693
</tr>
694
</tbody>
695
696
697
</table>
573
<h1>Tables</h1>
574
575
<h2>Default table</h2>
576
577
<table class="ues-table">
578
579
<thead>
580
<tr>
581
<th>Fruit</th>
582
<th>Weight</th>
583
<th>Colour</th>
584
</tr>
585
</thead>
586
587
<tbody>
588
<tr>
589
<td>Apple</td>
590
<td>150g</td>
591
<td>Red|Green</td>
592
</tr>
593
<tr>
594
<td>Orange</td>
595
<td>200g</td>
596
<td>Orange</td>
597
</tr>
598
</tbody>
599
600
</table>
601
602
<h2>Small table</h2>
603
604
<table class="ues-table ues-table-small">
605
606
<thead>
607
<tr>
608
<th>Fruit</th>
609
<th>Weight</th>
610
<th>Colour</th>
611
</tr>
612
</thead>
613
614
<tbody>
615
<tr>
616
<td>Apple</td>
617
<td>150g</td>
618
<td>Red|Green</td>
619
</tr>
620
<tr>
621
<td>Orange</td>
622
<td>200g</td>
623
<td>Orange</td>
624
</tr>
625
</tbody>
626
627
</table>
628
629
<h2>Bordered Table</h2>
630
631
<table class="ues-table ues-table-bordered">
632
633
<thead>
634
<tr>
635
<th>Fruit</th>
636
<th>Weight</th>
637
<th>Colour</th>
638
</tr>
639
</thead>
640
641
<tbody>
642
<tr>
643
<td>Apple</td>
644
<td>150g</td>
645
<td>Red|Green</td>
646
</tr>
647
<tr>
648
<td>Orange</td>
649
<td>200g</td>
650
<td>Orange</td>
651
</tr>
652
</tbody>
653
654
</table>
655
656
<h2>Horizontal border</h2>
657
658
<table class="ues-table ues-table-horizontal">
659
660
<thead>
661
<tr>
662
<th>Fruit</th>
663
<th>Weight</th>
664
<th>Colour</th>
665
</tr>
666
</thead>
667
668
<tbody>
669
<tr>
670
<td>Apple</td>
671
<td>150g</td>
672
<td>Red|Green</td>
673
</tr>
674
<tr>
675
<td>Orange</td>
676
<td>200g</td>
677
<td>Orange</td>
678
</tr>
679
</tbody>
680
681
</table>
682
683
<h2>Striped</h2>
684
685
<table class="ues-table ues-table-striped">
686
687
<thead>
688
<tr>
689
<th>Fruit</th>
690
<th>Weight</th>
691
<th>Colour</th>
692
</tr>
693
</thead>
694
695
<tbody>
696
<tr>
697
<td>Apple</td>
698
<td>150g</td>
699
<td>Red|Green</td>
700
</tr>
701
<tr>
702
<td>Orange</td>
703
<td>200g</td>
704
<td>Orange</td>
705
</tr>
706
<tr>
707
<td>Banana</td>
708
<td>110g</td>
709
<td>Yellow</td>
710
</tr>
711
<tr>
712
<td>Strawberry</td>
713
<td>5g</td>
714
<td>Red</td>
715
</tr>
716
<tr>
717
<td>Tomato</td>
718
<td>80g</td>
719
<td>Red</td>
720
</tr>
721
<tr>
722
<td>Pineapple</td>
723
<td>600g</td>
724
<td>Greenyellow</td>
725
</tr>
726
<tr>
727
<td>Basket</td>
728
<td>130g</td>
729
<td>Brown</td>
730
</tr>
731
</tbody>
732
733
</table>
734
735
<h2>Caption, colgroup, cols, tfoot</h2>
736
737
<table class="ues-table">
738
739
<caption>Fruits and their attributes</caption>
740
741
<colgroup>
742
<col span="1" class="object">
743
<col span="2" class="attributes">
744
</colgroup>
745
746
<thead>
747
<tr>
748
<th>Fruit</th>
749
<th>Weight</th>
750
<th>Colour</th>
751
</tr>
752
</thead>
753
754
<tfoot>
755
<tr>
756
<td>Averages</td>
757
<td>175g</td>
758
<td>Bright colours</td>
759
</tr>
760
</tfoot>
761
762
<tbody>
763
<tr>
764
<td>Apple</td>
765
<td>150g</td>
766
<td>Red|Green</td>
767
</tr>
768
<tr>
769
<td>Orange</td>
770
<td>200g</td>
771
<td>Orange</td>
772
</tr>
773
</tbody>
774
775
776
</table>
698
777
699
778
700
779
</section>
Loggerhead is a web-based interface for Breezy
Version: 2.0.1