jekyll-theme-backwhite 1.0.3 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (78) hide show
  1. checksums.yaml +4 -4
  2. data/{LICENSE.txt → LICENSE} +0 -0
  3. data/README.md +1 -1
  4. data/_config.yml +26 -0
  5. data/_includes/back.html +38 -4
  6. data/_includes/head.html +11 -3
  7. data/_layouts/default.html +6 -4
  8. data/_layouts/page.html +10 -0
  9. data/_layouts/post.html +5 -9
  10. data/_sass/fontawesome/_animated.scss +20 -20
  11. data/_sass/fontawesome/_bordered-pulled.scss +20 -20
  12. data/_sass/fontawesome/_core.scss +21 -21
  13. data/_sass/fontawesome/_fixed-width.scss +6 -6
  14. data/_sass/fontawesome/_icons.scss +1410 -1410
  15. data/_sass/fontawesome/_larger.scss +23 -23
  16. data/_sass/fontawesome/_list.scss +18 -18
  17. data/_sass/fontawesome/_mixins.scss +56 -56
  18. data/_sass/fontawesome/_rotated-flipped.scss +24 -24
  19. data/_sass/fontawesome/_screen-reader.scss +5 -5
  20. data/_sass/fontawesome/_shims.scss +2066 -2066
  21. data/_sass/fontawesome/_stacked.scss +31 -31
  22. data/_sass/fontawesome/_variables.scss +1427 -1427
  23. data/_sass/fontawesome/brands.scss +23 -23
  24. data/_sass/fontawesome/fontawesome.scss +16 -16
  25. data/_sass/fontawesome/regular.scss +23 -23
  26. data/_sass/fontawesome/solid.scss +24 -24
  27. data/_sass/fontawesome/v4-shims.scss +6 -6
  28. data/_sass/jekyll-theme-backwhite/_base.scss +15 -17
  29. data/_sass/jekyll-theme-backwhite/_front.scss +15 -2
  30. data/_sass/jekyll-theme-backwhite/_misc.scss +73 -6
  31. data/_sass/jekyll-theme-backwhite/_variables-and-fonts.scss +3 -0
  32. data/assets/fonts/fa-brands-400.svg +3570 -3570
  33. data/assets/fonts/fa-regular-400.svg +803 -803
  34. data/assets/fonts/fa-solid-900.svg +4700 -4700
  35. data/assets/js/backwhite.js +36 -10745
  36. metadata +19 -59
  37. data/CHANGELOG.md +0 -8
  38. data/USAGE.md +0 -951
  39. data/assets/js/backwhite.js.map +0 -1
  40. data/doc-images/back-color-163318.png +0 -0
  41. data/doc-images/back-color-331616.png +0 -0
  42. data/doc-images/back-front-containers.png +0 -0
  43. data/doc-images/back-front-panels.png +0 -0
  44. data/doc-images/back-header.png +0 -0
  45. data/doc-images/block-form.png +0 -0
  46. data/doc-images/buttons.png +0 -0
  47. data/doc-images/code-default.png +0 -0
  48. data/doc-images/code-monaco.png +0 -0
  49. data/doc-images/cutout-blockquote.png +0 -0
  50. data/doc-images/cutout-code.png +0 -0
  51. data/doc-images/cutout-form.png +0 -0
  52. data/doc-images/cutout-header.png +0 -0
  53. data/doc-images/cutout.png +0 -0
  54. data/doc-images/default-resp-tablet.png +0 -0
  55. data/doc-images/default-resp.png +0 -0
  56. data/doc-images/default-syntax.png +0 -0
  57. data/doc-images/default.png +0 -0
  58. data/doc-images/desktop.png +0 -0
  59. data/doc-images/font-family-verdana.png +0 -0
  60. data/doc-images/front-header.png +0 -0
  61. data/doc-images/grid-rows-desktop.png +0 -0
  62. data/doc-images/grid-rows-tablet.png +0 -0
  63. data/doc-images/header-desktop.png +0 -0
  64. data/doc-images/header-links-footer.png +0 -0
  65. data/doc-images/header-links.png +0 -0
  66. data/doc-images/header-mobile-menu.png +0 -0
  67. data/doc-images/header-mobile-page.png +0 -0
  68. data/doc-images/inline-form.png +0 -0
  69. data/doc-images/menu-500.png +0 -0
  70. data/doc-images/mobile-menu.png +0 -0
  71. data/doc-images/mobile-page.png +0 -0
  72. data/doc-images/resp-900.png +0 -0
  73. data/doc-images/resp-tablet-1230.png +0 -0
  74. data/doc-images/responsive-table.png +0 -0
  75. data/doc-images/spacing-unit-16pt.png +0 -0
  76. data/doc-images/spacing-unit-4pt.png +0 -0
  77. data/doc-images/syntax-163318.png +0 -0
  78. data/doc-images/syntax-331616.png +0 -0
metadata CHANGED
@@ -1,57 +1,57 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-theme-backwhite
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.3
4
+ version: 2.0.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - andydevs
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-02-14 00:00:00.000000000 Z
11
+ date: 2020-07-09 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
15
15
  requirement: !ruby/object:Gem::Requirement
16
16
  requirements:
17
- - - "~>"
17
+ - - ">="
18
18
  - !ruby/object:Gem::Version
19
- version: '3.8'
19
+ version: '0'
20
20
  type: :runtime
21
21
  prerelease: false
22
22
  version_requirements: !ruby/object:Gem::Requirement
23
23
  requirements:
24
- - - "~>"
24
+ - - ">="
25
25
  - !ruby/object:Gem::Version
26
- version: '3.8'
26
+ version: '0'
27
27
  - !ruby/object:Gem::Dependency
28
28
  name: bundler
29
29
  requirement: !ruby/object:Gem::Requirement
30
30
  requirements:
31
- - - "~>"
31
+ - - ">="
32
32
  - !ruby/object:Gem::Version
33
- version: '1.16'
33
+ version: '0'
34
34
  type: :development
35
35
  prerelease: false
36
36
  version_requirements: !ruby/object:Gem::Requirement
37
37
  requirements:
38
- - - "~>"
38
+ - - ">="
39
39
  - !ruby/object:Gem::Version
40
- version: '1.16'
40
+ version: '0'
41
41
  - !ruby/object:Gem::Dependency
42
42
  name: rake
43
43
  requirement: !ruby/object:Gem::Requirement
44
44
  requirements:
45
- - - "~>"
45
+ - - ">="
46
46
  - !ruby/object:Gem::Version
47
- version: '12.0'
47
+ version: '0'
48
48
  type: :development
49
49
  prerelease: false
50
50
  version_requirements: !ruby/object:Gem::Requirement
51
51
  requirements:
52
- - - "~>"
52
+ - - ">="
53
53
  - !ruby/object:Gem::Version
54
- version: '12.0'
54
+ version: '0'
55
55
  description:
56
56
  email:
57
57
  - akanshul97@gmail.com
@@ -59,13 +59,13 @@ executables: []
59
59
  extensions: []
60
60
  extra_rdoc_files: []
61
61
  files:
62
- - CHANGELOG.md
63
- - LICENSE.txt
62
+ - LICENSE
64
63
  - README.md
65
- - USAGE.md
64
+ - _config.yml
66
65
  - _includes/back.html
67
66
  - _includes/head.html
68
67
  - _layouts/default.html
68
+ - _layouts/page.html
69
69
  - _layouts/post.html
70
70
  - _sass/fontawesome/_animated.scss
71
71
  - _sass/fontawesome/_bordered-pulled.scss
@@ -112,47 +112,7 @@ files:
112
112
  - assets/fonts/fa-solid-900.woff
113
113
  - assets/fonts/fa-solid-900.woff2
114
114
  - assets/js/backwhite.js
115
- - assets/js/backwhite.js.map
116
- - doc-images/back-color-163318.png
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
115
+ homepage: https://www.github.com/andydevs/jekyll-theme-backwhite#readme
156
116
  licenses:
157
117
  - MIT
158
118
  metadata: {}
@@ -171,7 +131,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
171
131
  - !ruby/object:Gem::Version
172
132
  version: '0'
173
133
  requirements: []
174
- rubygems_version: 3.0.2
134
+ rubygems_version: 3.0.3
175
135
  signing_key:
176
136
  specification_version: 4
177
137
  summary: Backwhite theme as a jekyll package
@@ -1,8 +0,0 @@
1
- #### v1.0.3
2
-
3
- - Updated changelog
4
-
5
- #### v1.0.2
6
-
7
- - Added homepage and documentation to packages
8
- - Added CHANGELOG
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
- ![Back Front Panels](./doc-images/back-front-panels.png)
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
- ![Back Front Containers](./doc-images/back-front-containers.png)
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
- ![Front Header](./doc-images/front-header.png)
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
- ![Back Header](./doc-images/back-header.png)
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
- ![Header Desktop](./doc-images/header-desktop.png)
111
-
112
- _Mobile Page_
113
-
114
- ![Header Mobile Page](./doc-images/header-mobile-page.png)
115
-
116
- _Mobile Menu_
117
-
118
- ![Header Mobile Menu](./doc-images/header-mobile-menu.png)
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
- ![Header Links](./doc-images/header-links.png)
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
- ![Header Links Footer](./doc-images/header-links-footer.png)
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
- ![Responsive Table](./doc-images/responsive-table.png)
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
- ![Grid Rows Desktop](./doc-images/grid-rows-desktop.png)
409
-
410
- On a tablet (or a smaller laptop screen), and on mobile, the grid rows align vertically.
411
-
412
- ![Grid Rows Tablet](./doc-images/grid-rows-tablet.png)
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
- ![Cutout](./doc-images/cutout.png)
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
- ![Cutout Header](./doc-images/cutout-header.png)
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
- ![Cutout Blockquote](./doc-images/cutout-blockquote.png)
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
- ![Cutout Code](./doc-images/cutout-code.png)
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
- ![Buttons](./doc-images/buttons.png)
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
- ![Block Form](./doc-images/block-form.png)
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
- ![Cutout Form](./doc-images/cutout-form.png)
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
- ![Inline Form](./doc-images/inline-form.png)
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
- ![Default](./doc-images/default.png)
824
-
825
- ```scss
826
- $back-color: #331616;
827
- ```
828
-
829
- ![Back Color is #331616](./doc-images/back-color-331616.png)
830
-
831
- ```scss
832
- $back-color: #163318;
833
- ```
834
-
835
- ![Back Color is #163318](./doc-images/back-color-163318.png)
836
-
837
- ### Spacing
838
-
839
- Spacing is controlled by `$spacing-unit`.
840
-
841
- ```scss
842
- $spacing-unit: 8pt; // Default
843
- ```
844
-
845
- ![Default](./doc-images/default.png)
846
-
847
- ```scss
848
- $spacing-unit: 4pt;
849
- ```
850
-
851
- ![Spacing Unit is 4pt](./doc-images/spacing-unit-4pt.png)
852
-
853
- ```scss
854
- $spacing-unit: 16pt;
855
- ```
856
-
857
- ![Spacing Unit is 16pt](./doc-images/spacing-unit-16pt.png)
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
- ![Default](./doc-images/default.png)
868
-
869
- ```scss
870
- $font-family: "Verdana", sans-serif;
871
- ```
872
-
873
- ![Font Family Verdana](./doc-images/font-family-verdana.png)
874
-
875
- Code font is controlled by `$code-font-family`.
876
-
877
- ```scss
878
- $code-font-family: "Consolas", monospace; // Default
879
- ```
880
-
881
- ![Code Default](./doc-images/code-default.png)
882
-
883
- _Consolas is provided with Backwhite_
884
-
885
- ```scss
886
- $code-font-family: "Monaco", monospace;
887
- ```
888
-
889
- ![Code Monaco](./doc-images/code-monaco.png)
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
- ![Default](./doc-images/default.png)
912
-
913
- ```scss
914
- $desktop-menu-size: 500px;
915
- ```
916
-
917
- ![Menu Size 500](./doc-images/menu-500.png)
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
- ![Default Responsive](./doc-images/default-resp.png)
930
-
931
- ```scss
932
- $mobile-width: 900px;
933
- ```
934
-
935
- ![Responsive 900](./doc-images/resp-900.png)
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
- ![Default Responsive Tablet](./doc-images/default-resp-tablet.png)
946
-
947
- ```scss
948
- $tablet-width: 1230px;
949
- ```
950
-
951
- ![Responsive Tablet 1230](./doc-images/resp-tablet-1230.png)