-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
124 lines (111 loc) · 4.98 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Unigrid Style Guide</title>
<meta name="description" content="Unigrid Style Guide">
<meta name="Grzegorz Junka" content="Cells, Rows, and Tables">
<style>
dt {
margin: 1em auto 0.3em;
}
</style>
</head>
<body>
<div class="main-container">
<section class="main-container-tittle">
<div class="main-container-tittle-box">
<h1>Unigrid Style Guide</h1>
<p>Unigrid is a React component that implements a configurable table composed of lower-level
multipurpose
reusable
components.</p>
</div>
</section>
<section class="main-container-description">
<div class="main-container-description-box">
<h2 id="unigrid">Unigrid</h2>
<p>Uses tag <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table"><table></a>.
The
main
component, contains the following components:</p>
<dl>
<dt><a href="#unigrid-header"><b>UnigridHeader</b></a> (optional)</dt>
<dd>Semantically it's the main header of the whole table.</dd>
<dt><a href="#unigrid-segment"><b>UnigridSegment</b></a> (zero or more)</dt>
<dd>Semantically it's the body of the table, all the rows between <a
href="#unigrid-header"><b>UnigridHeader</b></a>
and <a href="#unigrid-footer"><b>UnigridFooter</b></a>. A simple table will contain exactly one
<a href="#unigrid-segment"><b>UnigridSegment</b></a>. A "multitable" (tables within
tables)
will
contain
multiple <a href="#unigrid-segment"><b>UnigridSegment</b></a> components, one for each nested
table.
</dd>
<dt><a href="#unigrid-footer"><b>UnigridFooter</b></a> (optional)</dt>
<dd>Semantically it's the main footer of the whole table.</dd>
</dl>
<p>More complex tables, e.g. containing multiple headers or footers, or more than one level of nested
tables,
should
be implemented by splitting the complex table into multiple separate <a href="#unigrid"><b>Unigrid</b></a>
components. Those components should then be placed on a page within a new dedicated component built
using
non-table
tags (i.e. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"><div></a>
or
similar
that
are semantically correct depending on the context within the page). <a href="#unigrid"><b>Unigrid</b></a>
components
<b>can not</b> be nested (can not be contained within other Unigrid components).
</p>
</div>
</section>
<section class="main-container-details">
<div class="main-container-details-box">
<h2 id="unigrid-header">UnigridHeader</h2>
<p>Uses tag <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead"><thead></a>.
Contains
zero
or more <a href="#unigrid-row"><b>UnigridRow</b></a> components.</p>
<h2 id="unigrid-segment">UnigridSegment</h2>
<p>Uses tag <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody"><tbody></a>.
Contains
zero
or more <a href="#unigrid-row"><b>UnigridRow</b></a> components, each of which can contain either <a
href="#unigrid-header-cell"><b>UnigridHeaderCell</b></a> or <a href="#unigrid-cell"><b>UnigridCell</b></a>
components.</p>
<h2 id="unigrid-footer">UnigridFooter</h2>
<p>Uses tag <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot"><tfoot></a>.
Contains
zero
or more <a href="#unigrid-row"><b>UnigridRow</b></a> components.</p>
<h2 id="unigrid-row">UnigridRow</h2>
<p>Uses tag <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr"><tr></a>.
Contains zero
or
more of either <a href="#unigrid-header-cell"><b>UnigridHeaderCell</b></a> or <a
href="#unigrid-cell"><b>UnigridCell</b></a> (or a mix of them). It's the basic component to
build rows
of
the
table.</p>
<h2 id="unigrid-header-cell">UnigridHeaderCell</h2>
<p>Uses tag <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th"><th></a>. This
is the
parent
component for all types of cell components that can be shown in the table or segment headers.</p>
<h2 id="unigrid-cell">UnigridCell</h2>
<p>Uses tag <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td"><td></a>. This
is the
parent
component for all types of cell components that can be shown in rows of table segments.</p>
</div>
</section>
<div id="app"></div>
<script src="./bundle.js"></script>
</div>
</body>
</html>