jekyll-theme-backwhite 1.0.3 → 1.0.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- metadata +2 -43
- data/CHANGELOG.md +0 -8
- data/USAGE.md +0 -951
- data/doc-images/back-color-163318.png +0 -0
- data/doc-images/back-color-331616.png +0 -0
- data/doc-images/back-front-containers.png +0 -0
- data/doc-images/back-front-panels.png +0 -0
- data/doc-images/back-header.png +0 -0
- data/doc-images/block-form.png +0 -0
- data/doc-images/buttons.png +0 -0
- data/doc-images/code-default.png +0 -0
- data/doc-images/code-monaco.png +0 -0
- data/doc-images/cutout-blockquote.png +0 -0
- data/doc-images/cutout-code.png +0 -0
- data/doc-images/cutout-form.png +0 -0
- data/doc-images/cutout-header.png +0 -0
- data/doc-images/cutout.png +0 -0
- data/doc-images/default-resp-tablet.png +0 -0
- data/doc-images/default-resp.png +0 -0
- data/doc-images/default-syntax.png +0 -0
- data/doc-images/default.png +0 -0
- data/doc-images/desktop.png +0 -0
- data/doc-images/font-family-verdana.png +0 -0
- data/doc-images/front-header.png +0 -0
- data/doc-images/grid-rows-desktop.png +0 -0
- data/doc-images/grid-rows-tablet.png +0 -0
- data/doc-images/header-desktop.png +0 -0
- data/doc-images/header-links-footer.png +0 -0
- data/doc-images/header-links.png +0 -0
- data/doc-images/header-mobile-menu.png +0 -0
- data/doc-images/header-mobile-page.png +0 -0
- data/doc-images/inline-form.png +0 -0
- data/doc-images/menu-500.png +0 -0
- data/doc-images/mobile-menu.png +0 -0
- data/doc-images/mobile-page.png +0 -0
- data/doc-images/resp-900.png +0 -0
- data/doc-images/resp-tablet-1230.png +0 -0
- data/doc-images/responsive-table.png +0 -0
- data/doc-images/spacing-unit-16pt.png +0 -0
- data/doc-images/spacing-unit-4pt.png +0 -0
- data/doc-images/syntax-163318.png +0 -0
- data/doc-images/syntax-331616.png +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: bc9d091b9f0ac167c139d45fe2c2437888a23612106e7dc428069437420c0e5f
|
|
4
|
+
data.tar.gz: 59a6d49c4aaff8d94a61d3b0928b37776b7a46cd3beddb2fef0da8240ec06a69
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b463b5026c1a4116c9db79ac00086c3205cdf7cd08ee6270103140b5989b2b34f21cfff638477a957873246f4050786e8993a40b3be0a95a11bb387d03f2952b
|
|
7
|
+
data.tar.gz: 0a8edb0a962c06ac9daad769f0e5623161c22de2b095a9e7aca9659dd740084a2d8becc44760251069fdb9581a8775e6a8d60d1c71a4ed973ddbd481ead84a7c
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-theme-backwhite
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.0.
|
|
4
|
+
version: 1.0.4
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- andydevs
|
|
@@ -59,10 +59,8 @@ executables: []
|
|
|
59
59
|
extensions: []
|
|
60
60
|
extra_rdoc_files: []
|
|
61
61
|
files:
|
|
62
|
-
- CHANGELOG.md
|
|
63
62
|
- LICENSE.txt
|
|
64
63
|
- README.md
|
|
65
|
-
- USAGE.md
|
|
66
64
|
- _includes/back.html
|
|
67
65
|
- _includes/head.html
|
|
68
66
|
- _layouts/default.html
|
|
@@ -113,46 +111,7 @@ files:
|
|
|
113
111
|
- assets/fonts/fa-solid-900.woff2
|
|
114
112
|
- assets/js/backwhite.js
|
|
115
113
|
- assets/js/backwhite.js.map
|
|
116
|
-
|
|
117
|
-
- doc-images/back-color-331616.png
|
|
118
|
-
- doc-images/back-front-containers.png
|
|
119
|
-
- doc-images/back-front-panels.png
|
|
120
|
-
- doc-images/back-header.png
|
|
121
|
-
- doc-images/block-form.png
|
|
122
|
-
- doc-images/buttons.png
|
|
123
|
-
- doc-images/code-default.png
|
|
124
|
-
- doc-images/code-monaco.png
|
|
125
|
-
- doc-images/cutout-blockquote.png
|
|
126
|
-
- doc-images/cutout-code.png
|
|
127
|
-
- doc-images/cutout-form.png
|
|
128
|
-
- doc-images/cutout-header.png
|
|
129
|
-
- doc-images/cutout.png
|
|
130
|
-
- doc-images/default-resp-tablet.png
|
|
131
|
-
- doc-images/default-resp.png
|
|
132
|
-
- doc-images/default-syntax.png
|
|
133
|
-
- doc-images/default.png
|
|
134
|
-
- doc-images/desktop.png
|
|
135
|
-
- doc-images/font-family-verdana.png
|
|
136
|
-
- doc-images/front-header.png
|
|
137
|
-
- doc-images/grid-rows-desktop.png
|
|
138
|
-
- doc-images/grid-rows-tablet.png
|
|
139
|
-
- doc-images/header-desktop.png
|
|
140
|
-
- doc-images/header-links-footer.png
|
|
141
|
-
- doc-images/header-links.png
|
|
142
|
-
- doc-images/header-mobile-menu.png
|
|
143
|
-
- doc-images/header-mobile-page.png
|
|
144
|
-
- doc-images/inline-form.png
|
|
145
|
-
- doc-images/menu-500.png
|
|
146
|
-
- doc-images/mobile-menu.png
|
|
147
|
-
- doc-images/mobile-page.png
|
|
148
|
-
- doc-images/resp-900.png
|
|
149
|
-
- doc-images/resp-tablet-1230.png
|
|
150
|
-
- doc-images/responsive-table.png
|
|
151
|
-
- doc-images/spacing-unit-16pt.png
|
|
152
|
-
- doc-images/spacing-unit-4pt.png
|
|
153
|
-
- doc-images/syntax-163318.png
|
|
154
|
-
- doc-images/syntax-331616.png
|
|
155
|
-
homepage: https://andydevs.github.io/jekyll-theme-backwhite#readme
|
|
114
|
+
homepage: https://www.github.com/andydevs/jekyll-theme-backwhite#readme
|
|
156
115
|
licenses:
|
|
157
116
|
- MIT
|
|
158
117
|
metadata: {}
|
data/CHANGELOG.md
DELETED
data/USAGE.md
DELETED
|
@@ -1,951 +0,0 @@
|
|
|
1
|
-
# Usage
|
|
2
|
-
|
|
3
|
-
## Back and Front Panels
|
|
4
|
-
|
|
5
|
-
The core of this design is the back panel (appearing on the right on desktop, and appearing behind on mobile), and the front panel.
|
|
6
|
-
|
|
7
|
-
These panels are created with `<div class='bw-back'>` and `<div class='bw-front'>` respectively.
|
|
8
|
-
|
|
9
|
-
```html
|
|
10
|
-
<body>
|
|
11
|
-
<div class='bw-back'>
|
|
12
|
-
<p>Back (menu)</p>
|
|
13
|
-
</div>
|
|
14
|
-
<div class='bw-front'>
|
|
15
|
-
<p>Front (content)</p>
|
|
16
|
-
</div>
|
|
17
|
-
</body>
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
Wrap all the content in these panels with their appropriate containers to provide spacing.
|
|
23
|
-
|
|
24
|
-
```html
|
|
25
|
-
<body>
|
|
26
|
-
<div class='bw-back'>
|
|
27
|
-
<div class='bw-back-container'>
|
|
28
|
-
<p>Back (menu)</p>
|
|
29
|
-
</div>
|
|
30
|
-
</div>
|
|
31
|
-
<div class='bw-front'>
|
|
32
|
-
<div class='bw-front-container'>
|
|
33
|
-
<p>Front (content)</p>
|
|
34
|
-
</div>
|
|
35
|
-
</div>
|
|
36
|
-
</body>
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
## Headers
|
|
42
|
-
|
|
43
|
-
Both the back and the front panel in the example have headers at the top. Headers have a title and a series of actions (usually icon buttons).
|
|
44
|
-
|
|
45
|
-
Backwhite comes with fontawesome solid and brand icons. Use them just like you would in any other app.
|
|
46
|
-
|
|
47
|
-
This is an example of a header in the front panel.
|
|
48
|
-
|
|
49
|
-
```html
|
|
50
|
-
<div class='bw-header'>
|
|
51
|
-
<h1 class='bw-title'>Example Header</h1>
|
|
52
|
-
<button class='bw-action'>
|
|
53
|
-
<span class='fas fa-check'></span>
|
|
54
|
-
</button>
|
|
55
|
-
<button class="bw-action">
|
|
56
|
-
<span class="fas fa-times"></span>
|
|
57
|
-
</button>
|
|
58
|
-
</div>
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
This is an example of a header in the back panel.
|
|
64
|
-
|
|
65
|
-
```html
|
|
66
|
-
<div class='bw-header'>
|
|
67
|
-
<button class="bw-action">
|
|
68
|
-
<span class="fas fa-times"></span>
|
|
69
|
-
</button>
|
|
70
|
-
<button class='bw-action'>
|
|
71
|
-
<span class='fas fa-check'></span>
|
|
72
|
-
</button>
|
|
73
|
-
<h1 class='bw-title'>Example Header</h1>
|
|
74
|
-
</div>
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
## Controlling Mobile Sliding
|
|
80
|
-
|
|
81
|
-
The front and back usually start with main headers. These are what will contain the buttons controlling the sliding on mobile. The front panel header would usually contain the title of the page. The back panel header would contain the title of the site. On each of these there would be one button which handles opening and closing.
|
|
82
|
-
|
|
83
|
-
```html
|
|
84
|
-
<body>
|
|
85
|
-
<div class="bw-back">
|
|
86
|
-
<div class="bw-back-container">
|
|
87
|
-
<div class='bw-header'>
|
|
88
|
-
<button class="bw-action bw-show-on-mobile bw-close">
|
|
89
|
-
<span class="fas fa-chevron-left"></span>
|
|
90
|
-
</button>
|
|
91
|
-
<h1 class='bw-title'>Example Header</h1>
|
|
92
|
-
</div>
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
<div class="bw-front">
|
|
96
|
-
<div class="bw-front-container">
|
|
97
|
-
<div class='bw-header'>
|
|
98
|
-
<h1 class='bw-title'>Example Header</h1>
|
|
99
|
-
<button class="bw-action bw-show-on-mobile bw-open">
|
|
100
|
-
<span class="fas fa-chevron-right"></span>
|
|
101
|
-
</button>
|
|
102
|
-
</div>
|
|
103
|
-
</div>
|
|
104
|
-
</div>
|
|
105
|
-
</body>
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
_Desktop_
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
_Mobile Page_
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
_Mobile Menu_
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
`.bw-show-on-mobile` will hide the button on desktop and show it on mobile. `.bw-open` and `.bw-close` are preprogrammed classes which trigger the opening and closing of the menu respectively when clicked. Font awesone's chevron icons are being used here.
|
|
121
|
-
|
|
122
|
-
## Back Menu Links
|
|
123
|
-
|
|
124
|
-
Links are organized on the back menu using a table.
|
|
125
|
-
|
|
126
|
-
```html
|
|
127
|
-
<table class="bw-links">
|
|
128
|
-
<tr>
|
|
129
|
-
<td><a href='#'>About</a></td>
|
|
130
|
-
<td><a href='#'>Contact</a></td>
|
|
131
|
-
<td><a href='#'>Post of the Day</a></td>
|
|
132
|
-
</tr>
|
|
133
|
-
<tr>
|
|
134
|
-
<td><a href='#'>Web Design</a></td>
|
|
135
|
-
<td><a href='#'>Hardware</a></td>
|
|
136
|
-
<td><a href='#'>Machine Learning</a></td>
|
|
137
|
-
</tr>
|
|
138
|
-
<tr>
|
|
139
|
-
<td>
|
|
140
|
-
<a href="#">
|
|
141
|
-
<span class="fab fa-youtube"></span> Youtube
|
|
142
|
-
</a>
|
|
143
|
-
</td>
|
|
144
|
-
<td>
|
|
145
|
-
<a href="#">
|
|
146
|
-
<span class="fab fa-github"></span> Github
|
|
147
|
-
</a>
|
|
148
|
-
</td>
|
|
149
|
-
<td>
|
|
150
|
-
<a href="#">
|
|
151
|
-
<span class="fab fa-linkedin"></span> Linkedin
|
|
152
|
-
</a>
|
|
153
|
-
</td>
|
|
154
|
-
</tr>
|
|
155
|
-
</table>
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
## Back Menu Footer
|
|
161
|
-
|
|
162
|
-
The footer goes in the back menu within a div with the class `.bw-footer`.
|
|
163
|
-
|
|
164
|
-
```html
|
|
165
|
-
<div class="bw-footer">
|
|
166
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
|
167
|
-
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
168
|
-
Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
|
169
|
-
laboris nisi ut aliquip ex ea commodo consequat.
|
|
170
|
-
Duis aute irure dolor in reprehenderit in voluptate
|
|
171
|
-
velit esse cillum dolore eu fugiat nulla pariatur.
|
|
172
|
-
Excepteur sint occaecat cupidatat non proident, sunt in
|
|
173
|
-
culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
174
|
-
</div>
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
## Responsive Tables
|
|
180
|
-
|
|
181
|
-
Tables are scaled so that every cell is as wide as the widest text cell. This means that the tables will overflow over the edge. In backwhite, these tables are wrapped in a horizontal scroll wrapper div to allow for horizontal scrolling between tables.
|
|
182
|
-
|
|
183
|
-
```html
|
|
184
|
-
<div class='bw-horiz-scroll-wrapper'>
|
|
185
|
-
<table>
|
|
186
|
-
<thead>
|
|
187
|
-
<tr>
|
|
188
|
-
<th>Name</th>
|
|
189
|
-
<th>Age</th>
|
|
190
|
-
<th>Town</th>
|
|
191
|
-
<th>Email</th>
|
|
192
|
-
</tr>
|
|
193
|
-
</thead>
|
|
194
|
-
<tbody>
|
|
195
|
-
<tr>
|
|
196
|
-
<td>Joe</td>
|
|
197
|
-
<td>22</td>
|
|
198
|
-
<td>Allentown</td>
|
|
199
|
-
<td>joe@schmoes.goes</td>
|
|
200
|
-
</tr>
|
|
201
|
-
<tr>
|
|
202
|
-
<td>Jim</td>
|
|
203
|
-
<td>20</td>
|
|
204
|
-
<td>Gainsville</td>
|
|
205
|
-
<td>jim@shims.dims</td>
|
|
206
|
-
</tr>
|
|
207
|
-
<tr>
|
|
208
|
-
<td>Steven</td>
|
|
209
|
-
<td>32</td>
|
|
210
|
-
<td>Birmington</td>
|
|
211
|
-
<td>steven@schmultz.gultz</td>
|
|
212
|
-
</tr>
|
|
213
|
-
</tbody>
|
|
214
|
-
</table>
|
|
215
|
-
</div>
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
## Grid Rows
|
|
221
|
-
|
|
222
|
-
Backwhite supports bootstrap-like grid rows. Each grid row is a `.bw-row` div, and can contain any number of `.bw-col-[x]` divs, where x is any number from 1 to 12. To make a complete row, all x values must add up to exactly 12.
|
|
223
|
-
|
|
224
|
-
```html
|
|
225
|
-
<h2>Grid Rows</h2>
|
|
226
|
-
|
|
227
|
-
<div class="bw-row">
|
|
228
|
-
<div class="bw-col-2">
|
|
229
|
-
<h3><code>bw-col-2</code></h3>
|
|
230
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
231
|
-
Nostrum hic nihil, facilis, autem alias eaque iure
|
|
232
|
-
provident reiciendis explicabo magnam doloremque
|
|
233
|
-
officiis sit officia consequatur adipisci? Omnis
|
|
234
|
-
eos eius porro!</p>
|
|
235
|
-
</div>
|
|
236
|
-
<div class="bw-col-2">
|
|
237
|
-
<h3><code>bw-col-2</code></h3>
|
|
238
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
239
|
-
Nostrum hic nihil, facilis, autem alias eaque iure
|
|
240
|
-
provident reiciendis explicabo magnam doloremque
|
|
241
|
-
officiis sit officia consequatur adipisci? Omnis
|
|
242
|
-
eos eius porro!</p>
|
|
243
|
-
</div>
|
|
244
|
-
<div class="bw-col-2">
|
|
245
|
-
<h3><code>bw-col-2</code></h3>
|
|
246
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
247
|
-
Nostrum hic nihil, facilis, autem alias eaque iure
|
|
248
|
-
provident reiciendis explicabo magnam doloremque
|
|
249
|
-
officiis sit officia consequatur adipisci? Omnis
|
|
250
|
-
eos eius porro!</p>
|
|
251
|
-
</div>
|
|
252
|
-
<div class="bw-col-2">
|
|
253
|
-
<h3><code>bw-col-2</code></h3>
|
|
254
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
255
|
-
Nostrum hic nihil, facilis, autem alias eaque iure
|
|
256
|
-
provident reiciendis explicabo magnam doloremque
|
|
257
|
-
officiis sit officia consequatur adipisci? Omnis
|
|
258
|
-
eos eius porro!</p>
|
|
259
|
-
</div>
|
|
260
|
-
<div class="bw-col-2">
|
|
261
|
-
<h3><code>bw-col-2</code></h3>
|
|
262
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
263
|
-
Nostrum hic nihil, facilis, autem alias eaque iure
|
|
264
|
-
provident reiciendis explicabo magnam doloremque
|
|
265
|
-
officiis sit officia consequatur adipisci? Omnis
|
|
266
|
-
eos eius porro!</p>
|
|
267
|
-
</div>
|
|
268
|
-
<div class="bw-col-2">
|
|
269
|
-
<h3><code>bw-col-2</code></h3>
|
|
270
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
271
|
-
Nostrum hic nihil, facilis, autem alias eaque iure
|
|
272
|
-
provident reiciendis explicabo magnam doloremque
|
|
273
|
-
officiis sit officia consequatur adipisci? Omnis
|
|
274
|
-
eos eius porro!</p>
|
|
275
|
-
</div>
|
|
276
|
-
</div>
|
|
277
|
-
|
|
278
|
-
<div class="bw-row">
|
|
279
|
-
<div class="bw-col-4">
|
|
280
|
-
<h3><code>bw-col-4</code></h3>
|
|
281
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
282
|
-
Nostrum hic nihil, facilis, autem alias eaque iure provident
|
|
283
|
-
reiciendis explicabo magnam doloremque officiis sit officia
|
|
284
|
-
consequatur adipisci? Omnis eos eius porro!</p>
|
|
285
|
-
</div>
|
|
286
|
-
<div class="bw-col-4">
|
|
287
|
-
<h3><code>bw-col-4</code></h3>
|
|
288
|
-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
|
|
289
|
-
Tempore unde iure nobis. Quos tempora laudantium beatae,
|
|
290
|
-
aliquam repellat praesentium velit eius voluptatum blanditiis
|
|
291
|
-
sed ullam! Necessitatibus cupiditate inventore similique voluptatem!</p>
|
|
292
|
-
</div>
|
|
293
|
-
<div class="bw-col-4">
|
|
294
|
-
<h3><code>bw-col-4</code></h3>
|
|
295
|
-
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
|
296
|
-
Facilis voluptas natus ipsam voluptatibus aspernatur neque
|
|
297
|
-
minima odit ipsum aliquid et? Dolorum corporis distinctio
|
|
298
|
-
delectus quidem nesciunt unde non ducimus voluptate?</p>
|
|
299
|
-
</div>
|
|
300
|
-
</div>
|
|
301
|
-
|
|
302
|
-
<div class="bw-row">
|
|
303
|
-
<div class="bw-col-6">
|
|
304
|
-
<h3><code>bw-col-6</code></h3>
|
|
305
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
306
|
-
Nostrum hic nihil, facilis, autem alias eaque iure provident
|
|
307
|
-
reiciendis explicabo magnam doloremque officiis sit officia
|
|
308
|
-
consequatur adipisci? Omnis eos eius porro!</p>
|
|
309
|
-
</div>
|
|
310
|
-
<div class="bw-col-6">
|
|
311
|
-
<h3><code>bw-col-6</code></h3>
|
|
312
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
313
|
-
Nostrum hic nihil, facilis, autem alias eaque iure provident
|
|
314
|
-
reiciendis explicabo magnam doloremque officiis sit officia
|
|
315
|
-
consequatur adipisci? Omnis eos eius porro!</p>
|
|
316
|
-
</div>
|
|
317
|
-
</div>
|
|
318
|
-
|
|
319
|
-
<div class="bw-row">
|
|
320
|
-
<div class="bw-col-10">
|
|
321
|
-
<h3><code>bw-col-10</code></h3>
|
|
322
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
323
|
-
Nostrum hic nihil, facilis, autem alias eaque iure provident
|
|
324
|
-
reiciendis explicabo magnam doloremque officiis sit officia
|
|
325
|
-
consequatur adipisci? Omnis eos eius porro! Lorem ipsum dolor
|
|
326
|
-
sit, amet consectetur adipisicing elit. Possimus, unde numquam.
|
|
327
|
-
Fugiat et, sed beatae mollitia magni dolores omnis deserunt,
|
|
328
|
-
inventore dolorem suscipit possimus labore quasi unde temporibus
|
|
329
|
-
adipisci ex!</p>
|
|
330
|
-
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
|
|
331
|
-
Ad molestiae delectus id accusantium alias molestias aspernatur
|
|
332
|
-
animi, unde sequi veritatis. Eveniet est dolorem ullam voluptatum
|
|
333
|
-
odio molestias laudantium dolores ea? Lorem ipsum dolor sit amet
|
|
334
|
-
consectetur adipisicing elit. Adipisci sed, architecto quidem
|
|
335
|
-
possimus amet velit voluptas ex eos placeat, iste provident
|
|
336
|
-
suscipit at ipsam numquam nobis totam natus veniam aliquid?</p>
|
|
337
|
-
</div>
|
|
338
|
-
<div class="bw-col-2">
|
|
339
|
-
<h3><code>bw-col-2</code></h3>
|
|
340
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
341
|
-
Nostrum hic nihil, facilis, autem alias eaque iure provident
|
|
342
|
-
reiciendis explicabo magnam doloremque officiis sit officia
|
|
343
|
-
consequatur adipisci? Omnis eos eius porro!</p>
|
|
344
|
-
</div>
|
|
345
|
-
</div>
|
|
346
|
-
|
|
347
|
-
<div class="bw-row">
|
|
348
|
-
<div class="bw-col-6">
|
|
349
|
-
<h3><code>bw-col-6</code></h3>
|
|
350
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
351
|
-
Nostrum hic nihil, facilis, autem alias eaque iure provident
|
|
352
|
-
reiciendis explicabo magnam doloremque officiis sit officia
|
|
353
|
-
consequatur adipisci? Omnis eos eius porro!</p>
|
|
354
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
|
355
|
-
Iure ad aliquam facere. Sequi illum mollitia excepturi enim!
|
|
356
|
-
Blanditiis explicabo, libero fugiat asperiores velit magni
|
|
357
|
-
voluptatem cumque tempore corporis quia quaerat.</p>
|
|
358
|
-
</div>
|
|
359
|
-
<div class="bw-col-2">
|
|
360
|
-
<h3><code>bw-col-2</code></h3>
|
|
361
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
362
|
-
Nostrum hic nihil, facilis, autem alias eaque iure provident
|
|
363
|
-
reiciendis explicabo magnam doloremque officiis sit officia
|
|
364
|
-
consequatur adipisci? Omnis eos eius porro!</p>
|
|
365
|
-
</div>
|
|
366
|
-
<div class="bw-col-4">
|
|
367
|
-
<h3><code>bw-col-4</code></h3>
|
|
368
|
-
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
|
369
|
-
Facilis voluptas natus ipsam voluptatibus aspernatur neque
|
|
370
|
-
minima odit ipsum aliquid et? Dolorum corporis distinctio
|
|
371
|
-
delectus quidem nesciunt unde non ducimus voluptate? Lorem
|
|
372
|
-
ipsum dolor sit amet consectetur adipisicing elit. Dolores,
|
|
373
|
-
culpa ad in enim earum iste pariatur ratione voluptas esse
|
|
374
|
-
ut officia inventore debitis beatae vel dolore odit nam eius.
|
|
375
|
-
Culpa.</p>
|
|
376
|
-
</div>
|
|
377
|
-
</div>
|
|
378
|
-
|
|
379
|
-
<div class="bw-row">
|
|
380
|
-
<div class="bw-col-12">
|
|
381
|
-
<h3><code>bw-col-12</code></h3>
|
|
382
|
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
383
|
-
Quis dolor eius iure necessitatibus dolores alias ex pariatur!
|
|
384
|
-
Dolores corporis voluptas natus a quos voluptate? Sapiente
|
|
385
|
-
laboriosam fugiat possimus velit atque. Lorem ipsum dolor sit amet
|
|
386
|
-
consectetur adipisicing elit. Ratione sapiente error, repellat
|
|
387
|
-
vel ut distinctio consequatur dolorem quidem molestias nisi
|
|
388
|
-
neque nobis eum eligendi aliquam placeat numquam iusto deleniti
|
|
389
|
-
aspernatur? Lorem ipsum dolor sit, amet consectetur adipisicing elit.
|
|
390
|
-
Vitae numquam quas quaerat? Iusto quaerat exercitationem deleniti
|
|
391
|
-
aliquid quas error tempora eligendi necessitatibus eaque, quo quisquam!
|
|
392
|
-
Est amet ea natus maiores.</p>
|
|
393
|
-
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
|
|
394
|
-
Aut eius laboriosam velit voluptates corrupti illo quia. Autem quos
|
|
395
|
-
excepturi dolore praesentium? Aut fuga fugiat praesentium blanditiis
|
|
396
|
-
eum et iusto facere! Lorem ipsum dolor sit amet consectetur adipisicing
|
|
397
|
-
elit. Quaerat eaque recusandae facilis ut laborum vero repudiandae
|
|
398
|
-
consequatur debitis quam adipisci reprehenderit voluptas, velit
|
|
399
|
-
praesentium provident, pariatur architecto earum molestias repellendus!
|
|
400
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam
|
|
401
|
-
accusantium id impedit pariatur quae sit vel tenetur. Voluptate
|
|
402
|
-
necessitatibus omnis repellat totam eum, quo perspiciatis, ad error
|
|
403
|
-
commodi animi quibusdam!</p>
|
|
404
|
-
</div>
|
|
405
|
-
</div>
|
|
406
|
-
```
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
On a tablet (or a smaller laptop screen), and on mobile, the grid rows align vertically.
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
## Cutouts
|
|
415
|
-
|
|
416
|
-
Another part that backwhite styling provides is cutouts. A cutout is a special emphasised part of the document that appears cut out from the front part, using the back as it's background.
|
|
417
|
-
|
|
418
|
-
```html
|
|
419
|
-
<div class="bw-cutout">
|
|
420
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
421
|
-
Curabitur quis urna nec lorem finibus mattis vel et odio.
|
|
422
|
-
Ut lectus nunc, accumsan eu mi in, finibus dapibus felis.
|
|
423
|
-
Morbi feugiat laoreet turpis ut sollicitudin. Donec id metus
|
|
424
|
-
metus. Etiam vestibulum vitae dolor eu finibus. Vivamus in
|
|
425
|
-
urna vitae purus fringilla porttitor vel sed nisi. Maecenas
|
|
426
|
-
accumsan sapien vitae lectus tincidunt, ac maximus elit dapibus.
|
|
427
|
-
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
|
|
428
|
-
posuere cubilia Curae;</p>
|
|
429
|
-
</div>
|
|
430
|
-
```
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
You can add headers to cutouts as well
|
|
435
|
-
|
|
436
|
-
```html
|
|
437
|
-
<div class="bw-cutout">
|
|
438
|
-
<div class="bw-header">
|
|
439
|
-
<h3 class="bw-title">Cutout Title</h3>
|
|
440
|
-
<button class="bw-action">
|
|
441
|
-
<span class="fas fa-plus"></span>
|
|
442
|
-
</button>
|
|
443
|
-
<button class="bw-action">
|
|
444
|
-
<span class="fas fa-trash"></span>
|
|
445
|
-
</button>
|
|
446
|
-
</div>
|
|
447
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
448
|
-
Curabitur quis urna nec lorem finibus mattis vel et odio.
|
|
449
|
-
Ut lectus nunc, accumsan eu mi in, finibus dapibus felis.
|
|
450
|
-
Morbi feugiat laoreet turpis ut sollicitudin. Donec id metus
|
|
451
|
-
metus. Etiam vestibulum vitae dolor eu finibus. Vivamus in
|
|
452
|
-
urna vitae purus fringilla porttitor vel sed nisi. Maecenas
|
|
453
|
-
accumsan sapien vitae lectus tincidunt, ac maximus elit dapibus.
|
|
454
|
-
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
|
|
455
|
-
posuere cubilia Curae;</p>
|
|
456
|
-
</div>
|
|
457
|
-
```
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
Blockquotes and pre/code sections are automatically formatted as cutouts
|
|
462
|
-
|
|
463
|
-
```html
|
|
464
|
-
<blockquote>
|
|
465
|
-
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi
|
|
466
|
-
officia ipsum optio illum. Sunt fugiat nemo veritatis tempora
|
|
467
|
-
voluptas ea laudantium? Explicabo ipsa error distinctio nihil
|
|
468
|
-
nostrum exercitationem hic tempora.
|
|
469
|
-
</blockquote>
|
|
470
|
-
```
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
```html
|
|
475
|
-
<pre><code>def myfunction(arg1, arg2):
|
|
476
|
-
"""
|
|
477
|
-
Docstring for myfunction
|
|
478
|
-
"""
|
|
479
|
-
return arg1 + arg2, arg1/arg2</code></pre>
|
|
480
|
-
```
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
## Buttons
|
|
485
|
-
|
|
486
|
-
Backwhite provides three button types. `.bw-text-button` is a button formatted simply as text. `.bw-cutout-button` is a button formatted like a cutout. Use this in a front-formatted section. For the back and cutouts, there is `.bw-raised-button`.
|
|
487
|
-
|
|
488
|
-
```html
|
|
489
|
-
<p><button class="bw-text-button">Text Button</button></p>
|
|
490
|
-
<p><button class="bw-cutout-button">Cutout Button</button></p>
|
|
491
|
-
<div class="bw-cutout">
|
|
492
|
-
<p><button class="bw-raised-button">Raised Button</button></p>
|
|
493
|
-
</div>
|
|
494
|
-
```
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
## Forms
|
|
499
|
-
|
|
500
|
-
### Block Forms
|
|
501
|
-
|
|
502
|
-
Backwhite Forms are created with the `bw-form` class.
|
|
503
|
-
|
|
504
|
-
```html
|
|
505
|
-
<form class='bw-form' action='...'>
|
|
506
|
-
|
|
507
|
-
</form>
|
|
508
|
-
```
|
|
509
|
-
|
|
510
|
-
Form entries are organized into rows (in a div called `.bw-form-row`). Each of these rows contain one or more input fields. An input field is actually a group containing a label and an input, contained in a `.bw-input-group`. This handles coupling the input and label and styling them as a single entity. Input groups are automatically scaled to fill the width of the row (using flexbox).
|
|
511
|
-
|
|
512
|
-
```html
|
|
513
|
-
<div class="bw-form-row">
|
|
514
|
-
<div class="bw-input-group">
|
|
515
|
-
<label for="first-name">First Name:</label>
|
|
516
|
-
<input type="text" name="first-name">
|
|
517
|
-
</div>
|
|
518
|
-
|
|
519
|
-
<div class="bw-input-group">
|
|
520
|
-
<label for="last-name">Last Name:</label>
|
|
521
|
-
<input type="text" name="last-name">
|
|
522
|
-
</div>
|
|
523
|
-
</div>
|
|
524
|
-
```
|
|
525
|
-
|
|
526
|
-
`.bw-input-group` also works for selects.
|
|
527
|
-
|
|
528
|
-
```html
|
|
529
|
-
<div class="bw-input-group">
|
|
530
|
-
<label for="race">Race:</label>
|
|
531
|
-
<select name="race">
|
|
532
|
-
<option disabled selected>Select...</option>
|
|
533
|
-
<option value="caucasian">Caucasian</option>
|
|
534
|
-
<option value="african-afam">African/African American</option>
|
|
535
|
-
<option value="asian-pac">Asian/Pacific Islander</option>
|
|
536
|
-
</select>
|
|
537
|
-
</div>
|
|
538
|
-
```
|
|
539
|
-
|
|
540
|
-
Checkbox and file inputs are special and use `.bw-checkbox-group` and `.bw-file-group` respectively.
|
|
541
|
-
|
|
542
|
-
```html
|
|
543
|
-
<div class="bw-checkbox-group">
|
|
544
|
-
<label for="hispanic-latino">Hispanic/Latino</label>
|
|
545
|
-
<input type="checkbox" name="hispanic-latino">
|
|
546
|
-
</div>
|
|
547
|
-
|
|
548
|
-
...
|
|
549
|
-
|
|
550
|
-
<div class="bw-file-group">
|
|
551
|
-
<label for="upload">Upload File:</label>
|
|
552
|
-
<input type="file" name="upload">
|
|
553
|
-
</div>
|
|
554
|
-
```
|
|
555
|
-
|
|
556
|
-
At the bottom, `.bw-button-group` will contain form buttons (this should be contained in it's own `.bw-form-row`).
|
|
557
|
-
|
|
558
|
-
```html
|
|
559
|
-
<div class="bw-form-row">
|
|
560
|
-
<div class="bw-button-group">
|
|
561
|
-
<button class="bw-text-button" type="reset">Reset</button>
|
|
562
|
-
<button class="bw-cutout-button" type="submit">Submit</button>
|
|
563
|
-
</div>
|
|
564
|
-
</div>
|
|
565
|
-
```
|
|
566
|
-
|
|
567
|
-
Here's an example of an entire form:
|
|
568
|
-
|
|
569
|
-
```html
|
|
570
|
-
<h2>Form</h2>
|
|
571
|
-
<form class="bw-form" action="#">
|
|
572
|
-
<div class="bw-form-row">
|
|
573
|
-
<div class="bw-input-group">
|
|
574
|
-
<label for="first-name">First Name:</label>
|
|
575
|
-
<input type="text" name="first-name">
|
|
576
|
-
</div>
|
|
577
|
-
|
|
578
|
-
<div class="bw-input-group">
|
|
579
|
-
<label for="last-name">Last Name:</label>
|
|
580
|
-
<input type="text" name="last-name">
|
|
581
|
-
</div>
|
|
582
|
-
</div>
|
|
583
|
-
|
|
584
|
-
<div class="bw-form-row">
|
|
585
|
-
<div class="bw-input-group">
|
|
586
|
-
<label for="email">Email:</label>
|
|
587
|
-
<input type="email" name="email">
|
|
588
|
-
</div>
|
|
589
|
-
</div>
|
|
590
|
-
|
|
591
|
-
<div class="bw-form-row">
|
|
592
|
-
<div class="bw-input-group">
|
|
593
|
-
<label for="password">Password:</label>
|
|
594
|
-
<input type="password" name="password">
|
|
595
|
-
</div>
|
|
596
|
-
|
|
597
|
-
<div class="bw-input-group">
|
|
598
|
-
<label for="verify">Verify Password:</label>
|
|
599
|
-
<input type="password" name="verify">
|
|
600
|
-
</div>
|
|
601
|
-
</div>
|
|
602
|
-
|
|
603
|
-
<div class="bw-form-row">
|
|
604
|
-
<div class="bw-input-group">
|
|
605
|
-
<label for="age">Age:</label>
|
|
606
|
-
<input type="number" name="age">
|
|
607
|
-
</div>
|
|
608
|
-
|
|
609
|
-
<div class="bw-input-group">
|
|
610
|
-
<label for="gender">Gender:</label>
|
|
611
|
-
<select name="gender">
|
|
612
|
-
<option disabled selected>Select...</option>
|
|
613
|
-
<option value="male">Male</option>
|
|
614
|
-
<option value="female">Female</option>
|
|
615
|
-
<option value="nonbinary">Non-Binary</option>
|
|
616
|
-
</select>
|
|
617
|
-
</div>
|
|
618
|
-
</div>
|
|
619
|
-
|
|
620
|
-
<div class="bw-form-row">
|
|
621
|
-
<div class="bw-input-group">
|
|
622
|
-
<label for="race">Race:</label>
|
|
623
|
-
<select name="race">
|
|
624
|
-
<option disabled selected>Select...</option>
|
|
625
|
-
<option value="caucasian">Caucasian</option>
|
|
626
|
-
<option value="african-afam">African/African American</option>
|
|
627
|
-
<option value="asian-pac">Asian/Pacific Islander</option>
|
|
628
|
-
</select>
|
|
629
|
-
</div>
|
|
630
|
-
|
|
631
|
-
<div class="bw-checkbox-group">
|
|
632
|
-
<label for="hispanic-latino">Hispanic/Latino</label>
|
|
633
|
-
<input type="checkbox" name="hispanic-latino">
|
|
634
|
-
</div>
|
|
635
|
-
</div>
|
|
636
|
-
|
|
637
|
-
<div class="bw-form-row">
|
|
638
|
-
<div class="bw-checkbox-group">
|
|
639
|
-
<label for="active-veteran">Active Military or Veteran</label>
|
|
640
|
-
<input type="checkbox" name="active-veteran">
|
|
641
|
-
</div>
|
|
642
|
-
</div>
|
|
643
|
-
|
|
644
|
-
<div class="bw-form-row">
|
|
645
|
-
<div class="bw-file-group">
|
|
646
|
-
<label for="upload">Upload File:</label>
|
|
647
|
-
<input type="file" name="upload">
|
|
648
|
-
</div>
|
|
649
|
-
</div>
|
|
650
|
-
|
|
651
|
-
<div class="bw-form-row">
|
|
652
|
-
<div class="bw-button-group">
|
|
653
|
-
<button class="bw-text-button" type="reset">Reset</button>
|
|
654
|
-
<button class="bw-cutout-button" type="submit">Submit</button>
|
|
655
|
-
</div>
|
|
656
|
-
</div>
|
|
657
|
-
</form>
|
|
658
|
-
```
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
### Cutout Forms
|
|
663
|
-
|
|
664
|
-
You can also make a form in a cutout. Remember to use `.bw-raised-button` in this form in place of `.bw-cutout-button`.
|
|
665
|
-
|
|
666
|
-
```html
|
|
667
|
-
<div class="bw-cutout">
|
|
668
|
-
<div class="bw-header">
|
|
669
|
-
<h3 class="bw-title">Cutout Form</h3>
|
|
670
|
-
</div>
|
|
671
|
-
|
|
672
|
-
<form class="bw-form" action="#">
|
|
673
|
-
<div class="bw-form-row">
|
|
674
|
-
<div class="bw-input-group">
|
|
675
|
-
<label for="first-name">First Name:</label>
|
|
676
|
-
<input type="text" name="first-name">
|
|
677
|
-
</div>
|
|
678
|
-
|
|
679
|
-
<div class="bw-input-group">
|
|
680
|
-
<label for="last-name">Last Name:</label>
|
|
681
|
-
<input type="text" name="last-name">
|
|
682
|
-
</div>
|
|
683
|
-
</div>
|
|
684
|
-
|
|
685
|
-
<div class="bw-form-row">
|
|
686
|
-
<div class="bw-input-group">
|
|
687
|
-
<label for="email">Email:</label>
|
|
688
|
-
<input type="email" name="email">
|
|
689
|
-
</div>
|
|
690
|
-
</div>
|
|
691
|
-
|
|
692
|
-
<div class="bw-form-row">
|
|
693
|
-
<div class="bw-input-group">
|
|
694
|
-
<label for="password">Password:</label>
|
|
695
|
-
<input type="password" name="password">
|
|
696
|
-
</div>
|
|
697
|
-
|
|
698
|
-
<div class="bw-input-group">
|
|
699
|
-
<label for="verify">Verify Password:</label>
|
|
700
|
-
<input type="password" name="verify">
|
|
701
|
-
</div>
|
|
702
|
-
</div>
|
|
703
|
-
|
|
704
|
-
<div class="bw-form-row">
|
|
705
|
-
<div class="bw-input-group">
|
|
706
|
-
<label for="age">Age:</label>
|
|
707
|
-
<input type="number" name="age">
|
|
708
|
-
</div>
|
|
709
|
-
|
|
710
|
-
<div class="bw-input-group">
|
|
711
|
-
<label for="gender">Gender:</label>
|
|
712
|
-
<select name="gender">
|
|
713
|
-
<option disabled selected>Select...</option>
|
|
714
|
-
<option value="male">Male</option>
|
|
715
|
-
<option value="female">Female</option>
|
|
716
|
-
<option value="nonbinary">Non-Binary</option>
|
|
717
|
-
</select>
|
|
718
|
-
</div>
|
|
719
|
-
</div>
|
|
720
|
-
|
|
721
|
-
<div class="bw-form-row">
|
|
722
|
-
<div class="bw-input-group">
|
|
723
|
-
<label for="race">Race:</label>
|
|
724
|
-
<select name="race">
|
|
725
|
-
<option disabled selected>Select...</option>
|
|
726
|
-
<option value="caucasian">Caucasian</option>
|
|
727
|
-
<option value="african-afam">African/African American</option>
|
|
728
|
-
<option value="asian-pac">Asian/Pacific Islander</option>
|
|
729
|
-
</select>
|
|
730
|
-
</div>
|
|
731
|
-
|
|
732
|
-
<div class="bw-checkbox-group">
|
|
733
|
-
<label for="hispanic-latino">Hispanic/Latino</label>
|
|
734
|
-
<input type="checkbox" name="hispanic-latino">
|
|
735
|
-
</div>
|
|
736
|
-
</div>
|
|
737
|
-
|
|
738
|
-
<div class="bw-form-row">
|
|
739
|
-
<div class="bw-checkbox-group">
|
|
740
|
-
<label for="active-veteran">Active Military or Veteran</label>
|
|
741
|
-
<input type="checkbox" name="active-veteran">
|
|
742
|
-
</div>
|
|
743
|
-
</div>
|
|
744
|
-
|
|
745
|
-
<div class="bw-form-row">
|
|
746
|
-
<div class="bw-file-group">
|
|
747
|
-
<label for="upload">Upload File:</label>
|
|
748
|
-
<input type="file" name="upload">
|
|
749
|
-
</div>
|
|
750
|
-
</div>
|
|
751
|
-
|
|
752
|
-
<div class="bw-form-row">
|
|
753
|
-
<div class="bw-button-group">
|
|
754
|
-
<button class="bw-text-button" type="reset">Reset</button>
|
|
755
|
-
<button class="bw-raised-button" type="submit">Submit</button>
|
|
756
|
-
</div>
|
|
757
|
-
</div>
|
|
758
|
-
</form>
|
|
759
|
-
</div>
|
|
760
|
-
```
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
### Inline Forms
|
|
765
|
-
|
|
766
|
-
Forms can also take up one row. These are created by `.bw-inline-form`. Buttons in this form are automatically pushed to the right (or left depending on ordering) and are automatically formatted. For example, a search bar:
|
|
767
|
-
|
|
768
|
-
```html
|
|
769
|
-
<form class="bw-inline-form" action="#">
|
|
770
|
-
<div class="bw-input-group">
|
|
771
|
-
<label for="q">Search</label>
|
|
772
|
-
<input type="text" name="q">
|
|
773
|
-
</div>
|
|
774
|
-
<div class="bw-button-group">
|
|
775
|
-
<button type="submit">
|
|
776
|
-
<span class="fas fa-search"></span>
|
|
777
|
-
Search
|
|
778
|
-
</button>
|
|
779
|
-
</div>
|
|
780
|
-
</form>
|
|
781
|
-
```
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
## Customization
|
|
786
|
-
|
|
787
|
-
Backwhite's styling is written in SCSS, with variables determining text size and coloring.
|
|
788
|
-
|
|
789
|
-
If you're using scss, you can customize Backwhite. In your main scss file, import backwhite's scss.
|
|
790
|
-
|
|
791
|
-
_main.scss_
|
|
792
|
-
|
|
793
|
-
```scss
|
|
794
|
-
// Declare variables...
|
|
795
|
-
|
|
796
|
-
// Import statement
|
|
797
|
-
@import '[path-to-module]/scss/backwhite.scss'
|
|
798
|
-
```
|
|
799
|
-
|
|
800
|
-
Now, just import the compiled main.css file in your html
|
|
801
|
-
|
|
802
|
-
```html
|
|
803
|
-
<head>
|
|
804
|
-
<!-- meta... -->
|
|
805
|
-
|
|
806
|
-
<!-- instead of [path-to-module]/dist/css/backwhite.css -->
|
|
807
|
-
<link rel='sylesheet' href='[path-to-css]/main.css'/>
|
|
808
|
-
|
|
809
|
-
<!-- this handles sliding and table responsiveness, so still import this! --->
|
|
810
|
-
<script src='[path-to-module]/dist/js/backwhite.js' charset='utf-8'></script>
|
|
811
|
-
</head>
|
|
812
|
-
```
|
|
813
|
-
|
|
814
|
-
### Colors
|
|
815
|
-
|
|
816
|
-
The main theme color is controlled by the `$back-color` variable. Changing this changes the entire coloring of the page! Usually this should be a dark color, so to not clash with the white background.
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
```scss
|
|
820
|
-
$back-color: #333; // Default
|
|
821
|
-
```
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
```scss
|
|
826
|
-
$back-color: #331616;
|
|
827
|
-
```
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
```scss
|
|
832
|
-
$back-color: #163318;
|
|
833
|
-
```
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
### Spacing
|
|
838
|
-
|
|
839
|
-
Spacing is controlled by `$spacing-unit`.
|
|
840
|
-
|
|
841
|
-
```scss
|
|
842
|
-
$spacing-unit: 8pt; // Default
|
|
843
|
-
```
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
```scss
|
|
848
|
-
$spacing-unit: 4pt;
|
|
849
|
-
```
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
```scss
|
|
854
|
-
$spacing-unit: 16pt;
|
|
855
|
-
```
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
### Fonts
|
|
860
|
-
|
|
861
|
-
The main font is controlled with `$font-family`.
|
|
862
|
-
|
|
863
|
-
```scss
|
|
864
|
-
$font-family: "Calibri Light", sans-serif; // Default
|
|
865
|
-
```
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
```scss
|
|
870
|
-
$font-family: "Verdana", sans-serif;
|
|
871
|
-
```
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
Code font is controlled by `$code-font-family`.
|
|
876
|
-
|
|
877
|
-
```scss
|
|
878
|
-
$code-font-family: "Consolas", monospace; // Default
|
|
879
|
-
```
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
_Consolas is provided with Backwhite_
|
|
884
|
-
|
|
885
|
-
```scss
|
|
886
|
-
$code-font-family: "Monaco", monospace;
|
|
887
|
-
```
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
### Font Scales
|
|
893
|
-
|
|
894
|
-
There are 4 font size variables that control the size of different parts of code.
|
|
895
|
-
|
|
896
|
-
```scss
|
|
897
|
-
$large-font-size; // Controls h1 font size
|
|
898
|
-
$medium-font-size; // Controls h2, h3, h4 font size
|
|
899
|
-
$normal-font-size; // Controls normal font size
|
|
900
|
-
$small-font-size; // Controls footer font size
|
|
901
|
-
```
|
|
902
|
-
|
|
903
|
-
### Layout
|
|
904
|
-
|
|
905
|
-
On desktop, the width of the side menu is controlled by `$desktop-menu-size`.
|
|
906
|
-
|
|
907
|
-
```scss
|
|
908
|
-
$desktop-menu-size: 300px; // Default
|
|
909
|
-
```
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
```scss
|
|
914
|
-
$desktop-menu-size: 500px;
|
|
915
|
-
```
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
### Responsiveness
|
|
920
|
-
|
|
921
|
-
#### Mobile
|
|
922
|
-
|
|
923
|
-
To change the breakpoint when the web app switches to mobile styling, use `$mobile-width`
|
|
924
|
-
|
|
925
|
-
```scss
|
|
926
|
-
$mobile-width: 760px; // Default
|
|
927
|
-
```
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
```scss
|
|
932
|
-
$mobile-width: 900px;
|
|
933
|
-
```
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
#### Tablet
|
|
938
|
-
|
|
939
|
-
To change the breakpoint when the web app switches to tablet styling, use `$tablet-width`
|
|
940
|
-
|
|
941
|
-
```scss
|
|
942
|
-
$tablet-width: 1200px; // Default
|
|
943
|
-
```
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
```scss
|
|
948
|
-
$tablet-width: 1230px;
|
|
949
|
-
```
|
|
950
|
-
|
|
951
|
-
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
data/doc-images/back-header.png
DELETED
|
Binary file
|
data/doc-images/block-form.png
DELETED
|
Binary file
|
data/doc-images/buttons.png
DELETED
|
Binary file
|
data/doc-images/code-default.png
DELETED
|
Binary file
|
data/doc-images/code-monaco.png
DELETED
|
Binary file
|
|
Binary file
|
data/doc-images/cutout-code.png
DELETED
|
Binary file
|
data/doc-images/cutout-form.png
DELETED
|
Binary file
|
|
Binary file
|
data/doc-images/cutout.png
DELETED
|
Binary file
|
|
Binary file
|
data/doc-images/default-resp.png
DELETED
|
Binary file
|
|
Binary file
|
data/doc-images/default.png
DELETED
|
Binary file
|
data/doc-images/desktop.png
DELETED
|
Binary file
|
|
Binary file
|
data/doc-images/front-header.png
DELETED
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
data/doc-images/header-links.png
DELETED
|
Binary file
|
|
Binary file
|
|
Binary file
|
data/doc-images/inline-form.png
DELETED
|
Binary file
|
data/doc-images/menu-500.png
DELETED
|
Binary file
|
data/doc-images/mobile-menu.png
DELETED
|
Binary file
|
data/doc-images/mobile-page.png
DELETED
|
Binary file
|
data/doc-images/resp-900.png
DELETED
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|