/
index.html
107 lines (100 loc) · 4.56 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<title>Trichotomy - Index</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
type="text/css"
media="screen"
href="main.css" />
<link rel="stylesheet"
type="text/css"
media="screen"
href="demo/trichotomy.min.css" />
<link rel="stylesheet"
type="text/css"
media="screen"
href="demo/demo.css" />
</head>
<body>
<div class="trichotomy vertical">
<div class="demo-top">
Trichotomy UI
</div>
<div class="trichotomy horizontal">
<div class="centerpiece">
<h1>Trichotomy UI</h1>
<a href="https://github.com/tgv1975/trichotomy/"
target="_blank">GitHub repo</a>
<hr>
<h2>Examples</h2>
<ul>
<li><a href="demo/doc/index.html">Live documentation</a></li>
<li><a href="demo/holy-grail/index.html">Holy Grail</a></li>
<li><a href="demo/overlay-sidebar/">Overlay Sidebar</a></li>
<li><a href="demo/adjacent-sidebars/">Adjacent Sidebars</a></li>
</ul>
<h2>The Concept</h2>
<p>We often divide things into <b>three parts</b> when we conceptualize about them.</p>
<p>House: Foundation, storeys, roof.</p>
<p>Tree: Roots, trunk, branches.</p>
<p>Arbitrary stretch in space: Front, middle, back; or time: Begining, middle, end.</p>
<p>This conceptual pattern arises even when the three parts are not readily identifiable.
For instance, for a window opening we get the upper rail, window panes, and stool. The first and
last elements can be easily discarded, conceptually, because the window panes are what <i>really</i> defines a
window, but they are there nevertheless, even if mostly hidden.</p>
<p>In UI design, there is the classic trichotomy of the interface <sup><a href="#footnotes">*</a></sup>:</p>
<h4>Header, Center(piece), Footer</h4>
<p>Simpler UIs have to use this pattern only once, at the top level: the app's shell, its main layout. But as the
UI gets more complex, there arises a need to repeat this pattern, over and over. Think
<a href="http://www.houseofwhitetie.com/reaper/imperial/wt_imperial.html"
target="_blank">DAW interfaces</a> that can get pretty complex.
</p>
<p>Therefore it would be useful to define an implementation of this concept/pattern into web design, using current
technologies, based on these principles:
<ol>
<li>Most non-trivial layouts require separation into well-defined regions.</li>
<li>Most separation can be achieved by trichotomy (the classic header-body-footer combo).</li>
<li>Trichotomies can be composed and merged, giving the concept a fractalic nature, which obliges any
possible implementation to remain <b>simple</b>, and gain complexity by repetition, not special cases.</li>
</ol>
</p>
<h2>This implementation</h2>
<p>
It's nothing new. But it brings to the table a few advantages: utmost simplicity while retaining meaning in
relation to the underlying concept; scalability; disregard of all else but the underlying concept, including
prettiness - that is the concern of the frontend library you may chose for the task.
</p>
<p>
Any consumer may simply import <b><a href="trichotomy.css"
target="_blank">trichotomy.css</a></b> and use the container
classes (<i>.trichotomy,
.vertical,
.horizontal</i>) and the <i>.centerpiece</i> class. The rest takes care of itself by the magic of <b>flex</b>.
The implementation does not rely on any framework, it's pure HTML5/CSS3. This should make it play nice with all
frontend frameworks (Bootstrap, Semantic UI, etc.), the use of which along with this is, in fact, encouraged.
</p>
<h2>Caveats</h2>
<p>Dynamic functionality, some of the actual sizing, obviously the final styling, are all the responsibility of the
consumer.</p>
<h2>TODO</h2>
<ul>
<li>Define and solve horizontal overlays, which would cover the case of dynamic hiding of headers/footers.</li>
<li>Offer build and installation instructions.</li>
<li>More complex examples.</li>
<li>Offer ready-made HTML templates.</li>
<li>Complex integrations: Bootstrap 4 and Angular/React as a turnkey solution for fundamental layout needs. </li>
</ul>
<hr>
<a name="footnotes"></a>
<sup>*</sup> Although no one ever called it that before.
</div>
</div>
<div class="demo-bottom">This footer sticks to the bottom of the viewport.</div>
</div>
</body>
</html>