This repository has been archived by the owner on Apr 2, 2020. It is now read-only.
/
index.html
executable file
·93 lines (93 loc) · 3.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
<title>Offline Pattern Library</title>
<meta content='width=device-width' name='viewport'>
<link href='styles/style.css' rel='stylesheet'>
</head>
<body>
<div id='sw-alert'>
This page is now available offline
</div>
<div class='hero'>
<div class='row'>
<h1>Offline pattern library</h1>
<h2>A collection of layout components built using flexbox, which gracefully fallback in unsupported browsers</h2>
</div>
</div>
<div class='row example-container'>
<div class='col-3'>
<h3>Cards</h3>
<p>Cards that will display at a uniform height regardless of how much content they contain.</p>
</div>
<div class='col-9'>
<div class='card-container'>
<div class='card-outer'>
<div class='card'>
<div class='card__photo'></div>
<div class='card__inner'>
<div class='card__content'></div>
<div class='card__content card__content--short'></div>
</div>
</div>
</div>
<div class='card-outer'>
<div class='card'>
<div class='card__photo'></div>
<div class='card__inner'>
<div class='card__content'></div>
<div class='card__content'></div>
<div class='card__content'></div>
<div class='card__content card__content--short'></div>
</div>
</div>
</div>
<div class='card-outer'>
<div class='card'>
<div class='card__photo'></div>
<div class='card__inner'>
<div class='card__content'></div>
<div class='card__content'></div>
<div class='card__content card__content--short'></div>
</div>
</div>
</div>
<div class='card-outer'>
<div class='card'>
<div class='card__photo'></div>
<div class='card__inner'>
<div class='card__content'></div>
<div class='card__content card__content--short'></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='row example-container'>
<div class='col-3'>
<h3>Media object</h3>
<p>Used for displaying an image to one side, with descriptive content to the other.</p>
</div>
<div class='col-9'>
<div class='media'>
<a class='media__object media__object--left' href='#'>
<img src='http://placehold.it/60x60'>
</a>
<div class='media__body'>
Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
</div>
</div>
</div>
</div>
<!-- /Scripts -->
<script src='scripts/script.js'></script>
<script>
// Register ServiceWorker
navigator.serviceWorker.register('sw.js', {
scope: './'
});
</script>
<script src='logging.js'></script>
</body>
</html>