-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcomponents.html
144 lines (142 loc) · 10.1 KB
/
components.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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Girl Effect: Theming</title>
<link rel="icon" type="image/x-icon" href="/docs-static/img/favicon.ico" sizes="32x32">
<link rel="stylesheet" type="text/css" href="/docs-static/css/style.css">
</head>
<body>
<div class="wrapper">
<nav role="navigation">
<img src="/docs-static/img/logo.jpg" class="logo">
<ul>
<li><a href="/">Introduction</a></li>
<li><a href="/components.html" class="on">Components</a></li>
<li><a href="/pages.html">Pages</a></li>
</ul>
</nav>
<div id="content" class="content" role="main">
<h1>Components</h1>
<p>Remember that can change these attributes to whatever you like. You can read more <a href="/pages.html" class="on">here</a> about implementing your own theme.</p>
<h2 id="global">Global</h2>
<p>We use the following global elements:</p>
<ul>
<li><span class="code">*</span> for box-sizing</li>
<li><span class="code">html, body</span> for resets, global font sizes and colours</li>
<li><span class="code">#wrap</span> has modifier classes for themes, so if your theme is called "Springster", the class appended to <span class="code">#wrap</span> is <span class="code">.Springster</span>.</li>
<li><span class="code">#wrap</span> has modifier classes for every page, for example, Login has a <span class="code">.Login</span> class where you can target a page specifically.</li>
<li><span class="code">.Container</span> is the element which contains <span class="code">.Header</span>, <span class="code">.Content</span> and <span class="code">.Footer</span></li>
</ul>
<hr />
<h2 id="header">Header</h2>
<p>The header has 3 main elements: branding, title and links, with one or two children:</p>
<ul>
<li><span class="code">.Header</span> is the parent container where you can define things like background colour and images.</li>
<li><span class="code">.Header-branding</span> is the container of the logo.</li>
<li><span class="code">.Header-branding-image</span> is the class of the logo.</li>
<li><span class="code">.Header-title</span> is the container of the <span class="code">h1</span> in the title.</li>
<li><span class="code">.Header-links</span> is an extra section for navigational links.</li>
</ul>
<hr />
<h2 id="footer">Footer</h2>
<p>Footers are generally pretty straight forward, so it only has the <span class="code">.Footer</span> parent class with one <span class="code">p</span> child element which contains the text.</p>
<hr />
<h2 id="typography">Typography</h2>
<p>We use the following typographic elements throughout:</p>
<ul>
<li><span class="code">body, textarea, select</span> for resets & globals, add or remove at will</li>
<li><span class="code">a, a:visited</span> for links</li>
<li><span class="code">h1</span> for page titles</li>
<li><span class="code">h2</span> for sub titles</li>
<li><span class="code">p, ul</span> for text</li>
<li><span class="code">hr</span> for dividers</li>
<li><span class="code">.center</span> for centre-aligning text</li>
</ul>
<p>You might want to have more than that, especially for enhanced phones, so you can add anything you want. For instance:</p>
<ul>
<li><span class="code">@font-face</span> for custom fonts which you'll just reference in your elements</li>
</ul>
<hr />
<h2 id="list">List</h2>
<p>The <span class="code">.List</span> element is used in the OIDC Authorize page. It's just a text <span class="code">ul</span>, but the classes are there for you to change:</p>
<ul>
<li><span class="code">.List</span> is the parent class</li>
<li><span class="code">li</span> is the child, which contains <span class="code">strong</span> and <span class="code">small</span> elements</li>
</ul>
<hr />
<h2 id="tokens">Tokens</h2>
<p>The <span class="code">.Tokens</span> element is used in the 2FA Tokens page. It's just a text <span class="code">ul</span>, but the classes are there for you to change:</p>
<ul>
<li><span class="code">.Tokens</span> is the parent class</li>
<li><span class="code">li</span> is the child</li>
</ul>
<hr />
<h2 id="forms">Forms</h2>
<p>There are quite a few forms, and most form elements that you are used to get used one way or another:</p>
<ul>
<li><span class="code">.Form</span> is the parent class of any form</li>
<li><span class="code">.Form-item</span> is the parent class of every form item, and contains the <span class="code">.Field-label</span> and <span class="code">.Field-item</span> elements</li>
<li>Please note the <span class="code">.Field--required</span> class (for validation) is a sibling of <span class="code">.Form-item</span>. Everyone likes to surface errors in different ways, so this provides that added flexibility</li>
<li><span class="code">.Field-item</span> is the parent of the <span class="code">input</span> or <span class="code">select</span> etc</li>
<li>Please note upon server-side validation, 2 more child elements get created inside <span class="code">.Field-item</span>. They are <span class="code">.errorlist</span> which is a <span class="code">ul</span> that contains the errors, and <span class="code">.Field-message</span> which might contain some text about the error or an additional validation message.
</ul>
<hr />
<h2 id="messages">Messages</h2>
<p>There are general messages used for success and errors:</p>
<ul>
<li><span class="code">.Messages</span> is the parent class. It's a <span class="code">div</span> element.</li>
<li>Each message is a <span class="code">div</span> element and has a <span class="code">.Message</span> class.</li>
<li>The modifiers for success and error messages are <span class="code">.Message--success</span> and <span class="code">.Message--error</span>.</li>
</ul>
<hr />
<h2 id="buttons">Buttons</h2>
<p>You can probably argue buttons should be part of forms, but they can be used outside forms too:</p>
<ul>
<li><span class="code">.Form-buttons</span> is the parent class of the button container in a form</li>
<li><span class="code">.Button</span> is the class of an <span class="code">input</span> or any <span class="code">a</span> that appears like a button</li>
</ul>
<hr />
<h2 id="additional">Additional</h2>
<p>Below forms there are sometimes a need for additional navigation or supplementary text:</p>
<ul>
<li><span class="code">.Additional-text</span> is applied on <span class="code">p</span> elements below forms, where applicable</li>
</ul>
<hr />
<h2 id="menu">Menu</h2>
<p>The menu is located at the bottom of some pages (where required, like on the Edit Profile page):</p>
<ul>
<li><span class="code">.Menu</span> is the parent class of the menu.</li>
<li><span class="code">.Menu-title</span> is a child of <span class="code">.Menu</span> and the menu's title</li>
<li><span class="code">.Menu-list</span> is a child of <span class="code">.Menu</span> and the parent of the menu items. It is a <span class="code">ul</span> element.</li>
<li><span class="code">.Menu-item</span> is a child of <span class="code">.Menu-list</span> and the element of each menu item. It is a <span class="code">li</span> element.</li>
</ul>
<hr />
<h2 id="qr">QR</h2>
<p>The QR image gets generated within the 2FA section. The elements are:</p>
<ul>
<li><span class="code">.QR</span> is the parent and is a <span class="code">p</span> element.</li>
<li><span class="code">.QR-image</span> is a child of <span class="code">.QR</span> and is an <span class="code">img</span> element</li>
</ul>
</div>
<aside class="sidebar">
<h3><a href="#global">Global</a></h3>
<h3><a href="#header">Header</a></h3>
<h3><a href="#footer">Footer</a></h3>
<h3><a href="#typography">Typography</a></h3>
<h3><a href="#list">List</a></h3>
<h3><a href="#tokens">Tokens</a></h3>
<h3><a href="#forms">Forms</a></h3>
<h3><a href="#messages">Messages</a></h3>
<h3><a href="#buttons">Buttons</a></h3>
<h3><a href="#additional">Additional</a></h3>
<h3><a href="#menu">Menu</a></h3>
<h3><a href="#qr">QR</a></h3>
</aside>
</div>
<footer role="contentinfo">
© Girl Effect | Company No.07516619 | Charity No.1141155
</footer>
</body>
</html>