-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbell.html
752 lines (735 loc) · 43.5 KB
/
bell.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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Brutalist Framework || BELL</title>
<meta name="description" content="A javascript and CSS extension library for the brutalist web design trend." />
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@brutalistfwk">
<meta name="twitter:title" content="Brutalist Framework || BELL">
<meta name="twitter:description" content="A javascript and CSS extension library for the brutalist web design trend.">
<meta name="twitter:creator" content="@brutalistfwk">
<!-- Twitter Summary card images must be at least 120x120px -->
<meta name="twitter:image" content="http://www.brutalistframework.com/core/images/bf21.jpg">
<!-- Open Graph data -->
<meta property="og:title" content="Brutalist Framework || BELL" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.brutalistframework.com" />
<meta property="og:image" content="http://www.brutalistframework.com/core/images/bf21.jpg" />
<meta property="og:description" content="A javascript and CSS extension library for the brutalist web design trend." />
<meta property="og:site_name" content="Brutalist Framework" />
<!-- Icons -->
<link rel="shortcut icon" href="core/files/icons/bf44.png" type="image/x-icon" />
<link rel="icon" href="core/files/icons/bf15.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="core/files/icons/bf57.png" />
<!-- CORE CSS -->
<!--<link href="core/css/dev/core.css" type="text/css" rel="stylesheet" media="all"/>-->
<link href="core/css/brutalist.min.css" type="text/css" rel="stylesheet" media="all"/>
<!-- BELL -->
<link href="core/bell/css/bell.css" type="text/css" rel="stylesheet" media="all" />
<link href="core/bell/css/bell-biscuit.css" type="text/css" rel="stylesheet" media="all" />
<!-- Theme CSS -->
<link href="theme/default/css/theme.css" type="text/css" rel="stylesheet" media="all" />
</head>
<body class="black">
<header class="container-fluid triangle-light anim-bg-neon stack-base">
<div class="row"><div class="col-sm-12"><div class="container-1200">
<div class="row no-padding stack1 content" id="scrolltop">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-3 no-padding">
<a href="index.html"><img class="large-thumb crop circle brdr-s-k red-border invert-hover" src="core/files/images/brutalist-framework.jpg" alt="Brutalist Framework" /></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-9 no-padding lucida-text">
<h1 class="page-title border-solid-thick red-border courier-new-text fittext-h1 white-text baffle-prolonged">BELL</h1>
<div class="page-desc border-solid-thick red-border rice-text">
<h2 class="flow-text baffle">Brutal Extension Element Library</h2><br />
<p>Enhance user experience with additional modules.</p>
</div>
</div>
</div>
</div></div></div>
</header>
<div class="monochrome-gradient">
<div class="container-1200 no-padding white">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-9 no-padding">
<!-- MEGAMENU -->
<div class="menu-container glued stack-top">
<div class="menu lucida bold">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#core">CORE</a>
<ul>
<li><a href="flavors.html">Flavors</a></li>
<li><a href="butch.html">BUTCH</a></li>
<li><a href="buix.html">BUIX</a></li>
<li><a href="bfx.html">BFX</a></li>
<li><a href="grid.html">Grid</a></li>
<li><a href="rebar.html">ReBAR</a></li>
<li><a href="bicons.html">bIcons</a></li>
</ul>
</li>
<li><a href="bell.html">BELL</a>
<ul>
<li><a href="bell.html#me">Media Elements</a>
<ul>
<li><a href="bell.html#audio">Audio Player</a></li>
<li><a href="bell.html#gif">Gif Player</a></li>
<li><a href="bell.html#vp">Video Player</a></li>
</ul>
</li>
<li><a href="bell.html#ie">Interface Elements</a>
<ul>
<li><a href="bell.html#megamenu">Megamenu</a></li>
<li><a href="bell.html#printer">Printer</a></li>
<li><a href="bell.html#ei">Exit Intent</a></li>
</ul>
</li>
<li><a href="bell.html#ce">Content Elements</a>
<ul>
<li><a href="bell.html#timeline">Timeline</a></li>
<li><a href="bell.html#presenter">Presenter</a></li>
<li><a href="bell.html#piss">PISS</a></li>
</ul>
</li>
<li><a href="bell.html#biscuit">BISCUIT</a>
<ul>
<li><a href="bell.html#age">Age Verify</a></li>
<li><a href="bell.html#cc">Cookie Consent</a></li>
<li><a href="bell.html#pl">PageLock</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="boilerplates.html">Boilerplates</a></li>
<li><a href="https://github.com/pinecreativelabs/Brutalist-Framework/wiki" target="_blank">About</a>
<ul>
<li><a href="https://github.com/pinecreativelabs/Brutalist-Framework/wiki/Roadmap" target="_blank">Roadmap</a></li>
<li><a href="https://github.com/pinecreativelabs/Brutalist-Framework" target="_blank">Github Repository</a></li>
<li><a href="https://twitter.com/brutalistfwk" target="_blank">Twitter</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- END MEGAMENU -->
<p class="padding"></p>
<div class="padded">
<h3 class="red-text lucida" id="getstarted">Getting Started</h3>
<p><em>BELL</em> is an extension element library for the purpose of adding optional functionality to your brutalist website!</p>
<p>There are three types of elements: <em>media, interface,</em> and <em>content</em>. These all require the following files to be loaded:</p>
<code class="padded bold lucida">/core/bell/css/bell.css<br /><br />/core/bell/js/bell.js</code>
</div>
<hr class="thick tomato" />
<div class="padding">
<h3 class="red-text lucida" id="me">Media Elements</h3>
<!-- Audio Player -->
<h4 class="lucida" id="audio">Audio Player</h4>
<p>A brutally simple responsive audio player.</p>
<div class="row"><div class="col-sm-12 col-md-6">
<audio class="baudio" data-title="Cinemato" data-artist="Unknown Artist">
<!--<source src="https://www.jqueryscript.net/images/sample.ogg" type="audio/ogg">-->
<source src="theme/default/files/av/audio/cinemato.mp3" type="audio/mpeg">
</audio>
<p class="flow-text">Markup</p>
<code class="padded smaller lucida">
<audio class="baudio" data-title="" data-artist=""><br />
<source src="" type="audio/ogg"><br />
<source src="" type="audio/mpeg"><br />
</audio>
</code>
</div><div class="col-sm-12 col-md-6">
<p class="warning padded"><span class="flow-text bold">Customize Colors</span><br />
In your theme CSS file, refer to these classes to override default colors:<br />
<b>.baudio-wrap</b> (background color)<br /><b>.baudio-progress</b> (background color)<br />
<b>.baudio-title</b> (text color)<br /><b>.baudio-artist</b> (text color)
</p>
</div></div>
<p class="padded"></p>
<hr />
<!-- Gif Player -->
<h4 class="lucida" id="gif">Gif Player</h4>
<p>A simple plugin that allows the user to play / pause an animated GIF upon click or hover.</p>
<div class="row">
<div class="col-sm-12 col-md-6">
<h5 class="tahoma flow-text">Play Upon Click</h5>
<p class="info">Apply class <span class="bold bigger">.gifplay</span> directly to <em>img</em> tag.</p>
<img src="theme/default/files/images/kitty/swedekat-glitch.gif" class="gifplay responsive" alt="Glitch KAT" />
</div>
<div class="col-sm-12 col-md-6">
<h5 class="tahoma flow-text">Play Upon Hover</h5>
<p class="info">Apply class <span class="bold bigger">.gifplay-h</span> directly to <em>img</em> tag.</p>
<img src="theme/default/files/images/kitty/swedekat-glitch.gif" class="gifplay-h responsive" alt="Glitchy Kitty" />
</div>
</div>
<p class="padded"></p>
<hr />
<!-- Video Player -->
<h4 class="lucida" id="vp">Video Player</h4>
<p>A brutally simple video player for self-hosted videos, with fullscreen viewer.</p>
<div class="row">
<div class="col-sm-12 col-md-6">
<p class="flow-text">Markup</p>
<code class="padded lucida smaller">
<video src="" poster=""<br /> data-title=""<br />
data-skin="default"<br />
data-overlay="1"<br /> data-color="#ff0000"><br />
</video>
</code>
<p class="warning padded"><strong>Data Variable Options</strong><br />
<strong>src</strong> - path to video file<br /><strong>poster</strong> - (optional) path to placeholder image<br />
<strong>data-title</strong> - (optional) title of video<br /><strong>data-skin</strong> - choose from: <em>default, minimal</em>, or <em>compact</em>.<br />
<strong>data-overlay</strong> - (optional) values: 1 or 2<br /><strong>data-color</strong> - (optional) custom hex color for controls</p>
</div>
<div class="col-sm-12 col-md-6">
<div class="padded anim-bg-water">
<h5 class="navy-t tahoma water-t-s">Default DEMO</h5>
<video poster="" src="theme/default/files/av/video/ocean.mp4" data-skin="default" data-overlay="1" data-title="Wavy Waves"></video>
<h5 class="navy-t tahoma water-t-s">Minimal DEMO</h5>
<video poster="" src="theme/default/files/av/video/ocean.mp4" data-skin="minimal" data-overlay="2"></video>
<h5 class="navy-t tahoma water-t-s">Red Compact DEMO</h5>
<video poster="" src="theme/default/files/av/video/ocean.mp4" data-color="#ff0000" data-skin="compact" data-overlay="1"></video>
</div>
</div>
</div>
<p class="padded"></p>
</div>
<p class="padding"></p>
<hr class="thick tomato" />
<div class="padding">
<h3 class="red-text lucida" id="ie">Interface Elements</h3>
<!-- Megamenu -->
<h4 class="lucida" id="megamenu">Megamenu</h4>
<p>The menu used across this site is a megamenu interface element. It supports multiple child pages, and is compatible with most standard dropdown menus.</p>
<p><span class="bigger bold">Markup</span><br />Simply take a look at the source code on this page, because we're too lazy to write it out here.</p>
<p class="padding"></p>
<hr />
<!-- Printer -->
<h4 class="lucida" id="printer">Printer</h4>
<p>The printer plugin makes a specific element easily printable, with a custom header and footer.</p>
<div class="row" style="margin-top: 20px;"><div class="col-sm-12 col-md-6">
<div class="info padded">
<p class="flow-text bold">Classes</p>
<p><b>.printer</b> - wrap content to be printed within this class<br /><br />
<b>.headprint</b> - (optional) content to displayed as header<br /><br />
<b>.footprint</b> - (optional) content to displayed as footer<br /><br />
<b>button onclick="printer();"</b> - button to launch printer interface.
</p><hr />
<p><span class="bold bigger">PUC (Print Utility Classes)</span><br />
<b>.print-only</b> - content is only displayed when being printed, but is hidden on screens<br /><br />
<b>.screen-only</b> - content is hidden from being printed, and is only visible on screens<br /><br />
<b>.print-monochrome</b> - applied only to print view, all text is black, and images are rendered in grayscale
</p>
</div>
</div><div class="col-sm-12 col-md-6">
<div class="padded grey">
<p class="flow-text rice-text"><b>Example: </b> Hit the "Print Now" button to print this section.</p>
<!-- Content to be printed -->
<div class="printer monochrome">
<h4>Text To Print</h4>
<p>Aliquam faucibus luctus quam a placerat. Donec sit amet cursus ante. Nunc volutpat hendrerit orci non viverra. Nam iaculis vitae risus vel interdum. Phasellus tempus odio ac lectus efficitur, in porta ante vulputate. Suspendisse lobortis sem ligula, non pulvinar lectus dictum ut. Ut eu mi vitae felis semper placerat. Proin eget ante facilisis, faucibus ipsum mattis, volutpat libero. Curabitur tincidunt ex sit amet tellus tincidunt interdum a eget ipsum.</p>
<p class="screen-only"><b>This text will NOT be printed.</b></p>
<p>Sed volutpat volutpat ligula at placerat. Integer ut hendrerit arcu. Praesent id massa et turpis laoreet dictum a laoreet justo. Donec semper magna nec sapien lobortis, tincidunt auctor nunc efficitur. Nullam in massa dictum, hendrerit sem et, lacinia odio.</p>
</div>
<!-- Launch printer interface -->
<button class="btn bold" onclick="printer();">Print Now</button>
<!-- Custom Header (only visible for print) -->
<div class="headprint print-only"><h1>Header Print Test</h1></div>
<!-- Custom Footer (only visible for print -->
<div class="footprint print-only"><p>Footer print test</p></div>
</div>
</div></div>
<p class="padding"></p>
<hr />
<!-- Exit Intent -->
<h4 class="lucida" id="ei">Exit Intent</h4>
<p>Users may choose to leave your page without taking any action (such as clicking on something, viewing a video, or filling out a form). You may wish to make a last-ditch effort to get your visitors to interact with your page and become a potential lead or even a conversion. Visitors may try to "exit" the page by closing the tab or browser.</p>
<p class="indent"><em>Exit Intent</em> displays a popup with content when the user moves their mouse out of the window. This can be your last-chance effort to get them to take some sort of action.</p>
<div class="row">
<div class="col-sm-12 col-md-6">
<p class="flow-text">Markup</p>
<code class="padded lucida smaller">
<div id="unique-id" class="ei-popup" style="display: none;"><br />
<div class="ei-close" onclick="$.stick_close()">X</div><br />
<div class="ei-content"><br />...content...<br /> </div><br />
</div>
</code>
</div>
<div class="col-sm-12 col-md-6">
<p class="flow-text">Initialize</p>
<code class="smaller padded lucida">
<script><br />
$(document).ready(function(){<br />
$.stickToMe({<br />
layer: '#unique-id'<br />
});<br />});<br />
</script>
</code>
<a href="bp/leads.html" target="_blank" class="btn large-btn full-btn sweden invert-hover lucida">Live Example »</a>
</div>
</div>
<p class="padding"></p>
</div>
<p class="padding"></p>
<hr class="thick tomato" />
<div class="padding">
<h3 class="red-text lucida" id="ce">Content Elements</h3>
<!-- Printer -->
<h4 class="lucida" id="timeline">Timeline</h4>
<p>Create a responsive vertical timeline. Ideal for showing a simple process flow chart or event timeline!</p>
<div class="timeline">
<div data-tldate="2017">
<h5 class="flow-text">Brutalist Framework is Born</h5>
<p>Brutalist Framework was created in early 2017 by <a href="http://www.bradfogelstrom.com" target="_blank" class="link">Brad Fogelstrom</a> in response to the emerging brutalist web design trend.</p>
</div>
<div data-tldate="Code">
<h5 class="flow-text">Markup</h5>
<p>Very simple markup. You can put any type of content within each content item. The <em>data-tldate</em> attribute is optional.</p>
<code class="padded smaller lucida">
<div class="timeline"> <br />
<div data-tldate="whatever"><br />
...content...<br />
</div><br />
</div>
</code>
</div>
<div data-tldate="The Next Step">
<h5 class="flow-text disabled">Options</h5>
<p class="info padded">Timeline classes:<br /><strong>.timeline</strong> - default view.<br />
<strong>.timeline-r</strong> - first item aligned on the right<br /><strong>.timeline-na</strong> - no alternation (all items on same side)<br />
<strong>.timeline-san</strong> - default view with slide-in animation upon scrolling<br /><strong>.timeline-r-san</strong> - right-align with slide-in
</p>
</div>
<div data-tldate="July 2017" class="virgin">
<h5 class="flow-text lemon-t red-t-s">Customize</h5><hr class="thick river" />
<p class="lime-t black-t-s">Add a little Flavor simply by applying classes! Be as creative and colorful as you want!</p>
</div>
<div data-tldate="October 2049" class="smoke">
<h5 class="flow-text charcoal-t">BF version 69 Released</h5>
<p class="cherry-vanilla" style="padding: 5px; margin: 0;">
<img src="theme/default/files/images/liminal-blood.jpg" class="responsive" alt="Future 2049" />
<br />A brutal image caption.</p>
</div>
</div>
<p class="padded"></p>
<hr />
<!-- Presenter -->
<h4 class="lucida" id="presenter">Presenter</h4>
<p>Presenter is a touch-enabled, swipe-friendly content slider! Ideal for displaying presentational content.</p>
<div class="presenter-wrap">
<a href="#" class="slide-prev charcoal smoke-t">«</a>
<div class="presenter" style="height: 33vh;"><!-- Specify height of presenter in-line (33% of window height) -->
<div class="pslide lush">
<h5 class="fittext impact seaweed-t black-t-s center">MONEY!</h5>
<p class="flow-text courier-new white-t charcoal-t-s center">You'll get super-duper stupid rich from all the f<span class="baffle-forever">uc</span>king brutal websites you'll build with BF.</p>
</div>
<div class="pslide virgin">
<img src="bp/fashion/poolside.jpg" alt="hottie" class="xlarge-thumb rr15 box-shadow-double right" style="margin-top: 2em;" />
<h5 class="fittext palatino lime-t tangerine-t-s">Fasionable!</h5>
<p class="flow-text tahoma cotton-candy-t charcoal-t-s center">Get a cynical look with our latest avant-garde designs!</p>
<p class="center palatino bold"><a href="#" class="btn large-btn mango-cherry invert-hover ">Shop Now »</a></p>
</div>
<div class="pslide river">
<h5 class="fittext georgia right-t midnight-t water-t-s">Defaults</h5>
<hr class="thick sunset" />
<p class="navy-t arial flow-text">Presenter is fluid-width, so it will fit within any area. You can add as many slides as you want. By default, Presenter does <em>NOT</em> loop back to the beginning.</p>
</div>
<div class="pslide liminal">
<h5 class="fittext lucida right-t lime-t pink-t-s">Code</h5>
<hr class="thick shades" />
<p class="coconut-t arial flow-text">Code markup is pretty straight forward:</p>
<code class="padded smaller lucida">
<div class="presenter-wrap"> <br />
<a href="#" class="slide-prev">«</a><br />
<div class="presenter"><br />
<div class="pslide">...content...</div><br />
</div><br />
<a href="#" class="slide-next">»</a><br />
</div>
</code>
</div>
<div class="pslide vampire">
<img src="bp/horror/vampire-glitch.jpg" alt="Vampire" class="xlarge-thumb rl15 box-shadow-double left" style="margin-top: 2em;" />
<h5 class="fittext georgia right-t black-t red-t-s">Vampires</h5>
<hr class="thick black" />
<p class="red-t arial flow-text right-t">They're everywhere, they are amongst us, and they're offering immortality.</p>
<p class="center palatino bold"><a href="#" class="btn medium-btn red black-t invert-hover box-shadow-triple">Get Turned Today!</a></p>
</div>
<div class="pslide hottie">
<img src="bp/fashion/beauty.jpg" alt="Beauty" class="xlarge-thumb blue-b brdr-a-k right" style="height: 100%; width: auto !important;" />
<h5 class="fittext georgia purple-t pink-t-s">Beauty Club</h5>
<hr class="thick virgin" />
<p class="flow-text eggplant-t tahoma">Save <strong>BILLIONS</strong> on beauty products by joining our exclusive club!</p>
<p class="center georgia bold"><a href="#" class="btn medium-btn skew blue pink-t rr25-hover box-shadow-double">Join Now</a></p>
</div>
</div>
<a href="#" class="slide-next charcoal smoke-t">»</a>
</div>
<p class="padded"></p>
<hr />
<!-- PISS -->
<h4 class="lucida" id="piss">PISS</h4>
<p class="flow-text"><b>P</b>aginated <b>I</b>nline <b>S</b>ynchronous <b>S</b>earch</p>
<p>Sometimes when you have many content items in a very long list, you just need to <em>PISS</em> on it and make it into a searchable paginated interface!</p>
<div class="row"><div class="col-sm-12 col-md-6">
<p class="flow-text">Markup</p>
<code class="smaller lucida padded">
<div class="piss-grid" id="unique-id"><br />
<div class="piss-item">..content 1..</div><br />
<div class="piss-item">..content 2..</div><br /> ...<br />
</div>
</code>
<p class="flow-text">Initialize</p>
<code class="smaller lucida padded">
<script><br />
$(document).ready(function () {<br />
$(".piss-grid").hip({<br /> itemsPerPage:12,<br />
itemsPerRow:3,<br /> itemGaps:'20px',<br />
filter:true,<br /> filterPos:'center',<br /> paginationPos:'center'<br /> });<br />
});<br />
</script>
</code>
</div><div class="col-sm-12 col-md-6">
<p class="info padded"><span class="flow-text bold">TIPS</span><br />
+ Images can be searchable by applying the <em>alt</em> attribute.<br />
+ Numbers and any text are findable<br />
+ Items have a minimum height of 120px<br /><br />
<span class="flow-text bold">DEMO</span><br />In the search field below, start typing and see what results come up! For example, try searching "models". At least 2 items should be displayed.
</p>
</div></div>
<div class="piss-grid pineapple padded">
<div class="piss-item sweden"><span class="flow-text tahoma bold">Sweden</span><br />Win a trip to Stockholm!</div>
<div class="piss-item ireland blood-orange-t"><span class="flow-text georgia spinach-t bold">Ireland</span><br />Land of the redheads!</div>
<div class="piss-item black pink-t"><span class="flow-text">Models</span><br />
<img src="bp/exotic/mkate-heat.jpg" alt="Gelora" class="small-thumb circle crop pink-b brdr-a-k" />
</div>
<div class="piss-item lush"><h5 class="times flow-text spinach-t bold">Finances</h5><p class="white-t">Investments, stocks, bonds</p></div>
<div class="piss-item vampire palatino black-t"><span class="flow-text black-t">Vampires</span><br />
<img src="bp/fear/vampire-glitch.jpg" class="circle crop small-thumb blood-b brdr-a-k" alt="vampire" /><br />
<span class="red-t">are everywhere!</span>
</div>
<div class="piss-item"><img src="bp/fashion/coolkate.jpg" class="responsive" alt="Models" /></div>
<div class="piss-item neapolitan flow-text comic-sans blueberry-t">Ice Cream Flavors!</div>
<div class="piss-item anim-bg-water comic-sans navy-t left-t"><span class="flow-text">Water</span><br />Dihydrogen Monoxide</div>
<div class="piss-item ready"><span class="blink flow-text bold">READY!</span><br />9th block is ready to customize.</div>
<div class="piss-item bbq-fire"><h5 class="flow-text courier-new">BBQ Bonfire!</h5><p class="blink-slow">FREE EVENT!</p></div>
<div class="piss-item">Content 11</div>
<div class="piss-item">Content 12</div>
<div class="piss-item">Content 13</div>
<div class="piss-item">Content 14</div>
<div class="piss-item">Content 15</div>
<div class="piss-item">Content 16</div>
<div class="piss-item midnight"><img src="bp/fashion/poolside-sq.jpg" alt="Fashion Model" class="circle crop medium-thumb" /></div>
<div class="piss-item hottie"><img src="bp/fashion/beauty-butch.jpg" alt="Beauty Model" class="circle crop medium-thumb" /></div>
<div class="piss-item">Content 19</div>
<div class="piss-item"><span class="tahoma flow-text">Twenty Items</span></div>
<div class="piss-item">Content 21</div>
<div class="piss-item">Content 22</div>
<div class="piss-item">Content 23</div>
<div class="piss-item">Content 24</div>
<div class="piss-item">Content 25</div>
<div class="piss-item">Content 26</div>
<div class="piss-item">Content 27</div>
<div class="piss-item">Content 28</div>
<div class="piss-item">Content 29</div>
<div class="piss-item">Content 30</div>
</div>
</div>
<p class="padding"></p>
<hr class="thick tomato" />
<div class="padding">
<h4 class="red-text lucida" id="biscuit">BISCUIT</h4>
<p class="flow-text"><b>B</b>rutally <b>I</b>ntegrated <b>S</b>ecurity & <b>C</b>onsent <b>U</b>ser <b>I</b>nterface <b>T</b>ool</p>
<p>BISCUIT is an additional BELL component that is intended to help create a layer of security for your projects.</p>
<!-- Age Verify -->
<h4 class="lucida" id="age">Age Verify</h4>
<p>Some users may be too young to view brutally mature content, so age verification may be necessary. <em>Age Verify</em> displays a popup that requires the user to enter their birth date. If the user is old enough, they are permitted to view the page (or redirected to another). If they are too young, they are blocked from viewing the page, or are redirected to another page.</p>
<div class="row">
<div class="col-sm-12 col-md-6">
<p class="flow-text">Step 1: Load Scripts</p>
<code class="padded bold lucida">
/core/bell/css/bell-biscuit.css<br /><br />/core/bell/js/biscuit/age.js
</code>
<p class="flow-text">Step 2: Initialize</p>
<code class="smaller padded">
<script><br />
$(document).ready(function(){<br />
$.ageCheck({<br />
minAge: 18,<br />
title: 'Age Verify',<br />
copy:'Must be 18 or older',<br />
redirectTo:'',<br />
redirectOnFail:'',<br />
underAgeMsg:'Not old enough!'<br />
});<br />});<br />
</script>
</code>
</div>
<div class="col-sm-12 col-md-6">
<p class="warning padded"><strong>VARIABLES</strong><br />
<strong>minAge</strong> - numeric age value user must be<br /><strong>title</strong> - text string for popup title<br />
<strong>copy</strong> - text string for popup message<br /><strong>redirectTo</strong> - (optional) URL to re-direct to if old enough<br />
<strong>redirectOnFail</strong> - (optional) URL to redirect to if too young<br /><strong>underAgeMsg</strong> - Text to display if too young.</p>
<a href="bp/ratedx.html" class="btn large-btn full-btn sweden invert-hover lucida">Live Example »</a>
</div>
</div>
<p class="padding"></p>
<hr />
<!-- Chocolate Chip Cookies Consent -->
<h4 class="lucida" id="cc">Cookie Consent</h4>
<p style="margin-bottom: 1em;">Due to <a href="https://gdpr-info.eu/" target="_blank" class="link bold">GDPR</a> compliance requirements, cookie consent bars are a necessity on many websites.</p>
<div class="row">
<div class="col-sm-12 col-md-6">
<p>Simply load the following:</p>
<code class="padded bold lucida">
/core/bell/css/bell-biscuit.css<br /><br />/core/bell/js/biscuit/cookie.js
</code>
<p class="flow-text">Markup</p>
<code class="smaller padded">
<div class="cookie-consent"><br />
<p>...text...</p><br />
<span class="cookie-btn">ACCEPT</span><br />
</div>
</code>
</div>
<div class="col-sm-12 col-md-6">
<p class="warning padded"><strong>EXAMPLE TEXT:</strong><br />
"We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you accept and understand our <a href="">Privacy Policy</a>, and our <a href="">Terms of Service</a>."</p>
<a href="bp/leads.html" target="_blank" class="btn large-btn full-btn sweden invert-hover lucida">Live Example »</a>
</div>
</div>
<p class="padding"></p>
<hr />
<!-- PageLock -->
<h4 class="lucida" id="pl">PageLock</h4>
<p>Some users may try to download images or other media on your page by right-clicking on elements. Hackers may also use right-click to view the page source code, and therefore could potentially exploit the code for malicious purposes. <em>PageLock</em> is a simple script you can load that prevents the ability to right-click. Simply load the following script to activate <em>PageLock</em>:</p>
<code class="padded bold lucida">/core/bell/js/biscuit/pagelock.js</code>
<p class="warning padded"><strong>NOTE:</strong> Even with <em>PageLock</em> enabled, it is still possible for hackers to use developer browser consoles to exploit code. If you wish to <em>only</em> protect images from being downloaded, the core includes a <strong>.guard</strong> class that can be applied to images. This will "protect" them from being downloaded via right-click.</p>
<p class="padded"></p>
</div>
</div>
<!-- Sidebar -->
<!-- Brutally Integrated Security & Consent User Interface Tool: GDPR Cookies, Age, Image protection -->
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-3 no-padding black">
<img src="theme/default/files/images/gelora/brutal-mood-1.jpg" alt="BELL" class="responsive" style="margin-bottom: -6px;" />
<div class="glued">
<div class="row">
<div class="col-xs-12 no-padding">
<nav class="simple blue">
<ul class="courier-new-text flow-text lime-text">
<li class="invert-hover"><a href="#getstarted" class="lime-t">Getting Started</a></li>
<li class="invert-hover"><a href="#me" class="lime-t">Media Elements</a></li>
<li class="invert-hover"><a href="#ie" class="lime-t">Interface Elements</a></li>
<li class="invert-hover"><a href="#ce" class="lime-t">Content Elements</a></li>
<li class="invert-hover"><a href="#biscuit" class="lime-t">BISCUIT</a></li>
</ul>
</nav>
</div>
</div>
<a href="#scrolltop" class="lime invert-hover bold black-text scrolltop lucida-text">Back to Top ↑</a>
<footer class="jagged gray">
<a href="http://eepurl.com/cEW1RX" target="_blank">
<div class="sweden-gradient padded invert-hover">
<h5 class="lucida white-text"><i class="bi bi-amp"></i>Brutal Blast /<span class="blink-182">/</span>/<span class="blink">/</span>/</h5>
<p class="bold">Subscribe to our e-newsletter. <span class="bigger">»</span></p>
</div>
</a>
<div class="padding vanilla-bean-text arial">
<p>A <a href="http://www.pinecreativelabs.com" target="_blank" class="green yellow-text invert-hover">Pine Creative Labs</a> production</p>
<p>Developer: <a href="https://www.linkedin.com/in/bradfogelstrom" target="_blank"><span class="blue yellow-text invert-hover">Brad Fogelstrom</span></a></p>
<ul class="tags">
<li><a href="http://www.twitter.com/brutalistfwk" target="_blank" class="btn white-text blue-candy hue-hover"><strong>Twitter</strong></a></li>
<li><a href="https://github.com/pinecreativelabs/Brutalist-Framework" target="_blank" class="btn black white-text invert-hover"><strong>GitHub</strong></a></li>
</ul>
<p class="white-t tahoma"><small>Brutalist Framework © 2020</small></p>
</div>
</footer>
</div>
</div><!-- End Sidebar -->
</div>
</div>
</div>
<!-- Sticky Download Box -->
<div class="sticky-cta sticky-bottom-right stack-middle virgin jagged2 center" style="padding: 8px; max-width: 180px;">
<nav class="simple bold">
<ul class="lucida flow-text">
<li class="invert-hover"><a href="#core"><i class="bi bi-heart"></i> CORE</a></li>
<li class="invert-hover"><a href="#bell"><i class="bi bi-amp"></i> BELL</a></li>
<li class="invert-hover"><a href="#boilers"><i class="bi bi-heat"></i> BP</a></li>
<li class="invert-hover"><a href="#moar">+ MORE</a></li>
</ul>
</nav>
<a href="#download" data-modal-open>
<div class="skew sweden btn invert-hover">
<p class="skew-right"><span class="flow-text impact">Download</span><br /><span class="lucida"><small>version 2.1</small></span></p>
</div></a>
</div>
<!-- Download Modal -->
<div id="download" style="display:none;">
<div class="container monochrome infinitile" style="max-width: 468px;">
<div class="row">
<div class="col-sm-12 no-padding">
<div class="padded lucida">
<h4>Begin the <span class="blink red-t">Brutality</span></h5>
<p>Released <strong>10/13/2020</strong></p>
<p class="bigger bold"><a href="http://www.brutalistframework.com/versions/Brutalist_Framework_2.1.zip" target="_blank" class="btn full-btn sweden invert-hover">Download 2.1</a></p><hr class="jagged-rule-dark" />
<p style="font-size: 1.15em;"><strong><span style="font-size: 1.3em;">Legacy Versions</span></strong><br />
<a href="http://www.brutalistframework.com/versions/Brutalist_Framework_2.0.zip" target="_blank">2.0.2.0</a> (released 2/20/2020)<br />
<a href="http://www.brutalistframework.com/versions/Brutalist_Framework_1.9.zip" target="_blank">1.9</a> (legacy)<br /><br /></p>
</div>
</div>
</div>
</div>
</div>
<!-- Initiate and display modal itself -->
<div class="modal">
<div class="modal-inner draggable"><!-- Remove "draggable" class to prevent modals from being moveable -->
<span data-modal-close>×</span>
<div class="modal-content"></div>
</div>
</div>
<!-- Core Components Modal -->
<div id="core" class="modal-lite fullscreen">
<div class="modal-content aboutbf infinitile">
<div class="modal-head center"><h2 class="red-t courier-new black-t-s bold">CORE Components</h2></div>
<div class="modal-content-body center">
<p class="flow-text black-t red-t-s lucida" style="margin-bottom: 1em;"></p>
<div class="block-wrap stretch">
<a href="butch.html" class="block b25 padded circle monogradient invert-hover box-shadow-double white-t">
<img src="theme/default/files/images/gelora/brutal-mood-4.jpg" class="crop circle small-thumb brdr-s-k blue-b" alt="BUTCH" />
<span class="red circle black-t white-t-s flow-text">BUTCH</span><br />
<small>Brutalist Utility & Typography Class Helpers</small><br /><br />
</a>
<a href="bfx.html" class="block b25 padded circle monogradient invert-hover white-t box-shadow-double">
<img src="theme/default/files/images/kitty/bfx-kat.jpg" class="crop circle small-thumb brdr-s-k blue-b" alt="BFX" />
<span class="red circle white-t-s black-t flow-text">BFX</span><br />
<small>Brutal Effects</small><br /><br />
</a>
<a href="buix.html" class="block b25 padded circle monogradient invert-hover box-shadow-double white-t">
<img src="theme/default/files/images/gelora/backup-sq.jpg" class="crop circle small-thumb brdr-s-k blue-b" alt="BUIX" />
<span class="red circle white-t-s black-t flow-text">BUIX</span><br />
<small>Brutal User Interface & Experience</small><br /><br />
</a>
<a href="grid.html" class="block b25 padded circle monogradient invert-hover box-shadow-double white-t">
<img src="theme/default/files/images/gelora/fenced.jpg" class="crop circle small-thumb brdr-s-k blue-b" alt="Grids" />
<span class="red circle white-t-s black-t flow-text">Grid</span><br />
<small>B3Grid & Flexbox Grid</small><br /><br />
</a>
<a href="flavors.html" class="block b33 padded circle monogradient invert-hover box-shadow-double white-t">
<img src="theme/default/files/images/gelora/crazy-grin.jpg" class="crop circle small-thumb brdr-s-k blue-b" alt="Flavors" />
<span class="red circle white-t-s black-t flow-text">Flavors</span><br />
<small>Color Classes Library</small><br /><br />
</a>
<a href="rebar.html" class="block b33 padded circle monogradient invert-hover box-shadow-double white-t">
<img src="theme/default/files/images/gelora/rebar.jpg" class="crop circle small-thumb brdr-s-k blue-b" alt="Rebar" />
<span class="red circle white-t-s black-t flow-text">ReBAR</span><br />
<small>Responsive Breakpoint Assisstance Reference</small><br /><br />
</a>
<a href="bicons.html" class="block b33 padded circle monogradient invert-hover box-shadow-double white-t">
<img src="theme/default/files/images/kitty/anarchistkat-sq.jpg" class="crop circle small-thumb brdr-s-k blue-b" alt="bIcons" />
<span class="red circle white-t-s black-t flow-text">bIcons</span><br />
<small>Brutal Icons</small><br /><br />
</a>
</div>
</div>
<div class="modal-footer"><a href="#return1" class="btn large-btn black platinum-t">CLOSE</a></div>
</div>
<div class="overlay"></div>
</div>
<!-- BELL Modal -->
<div id="bell" class="modal-lite fullscreen">
<div class="modal-content anim-bg-hot">
<div class="modal-head center"><h2 class="lemon-t courier-new black-t-s bold blue circle"><i class="bi bi-amp"></i> BELL</h2></div>
<div class="modal-content-body scroll-y center">
<div class="container"><div class="row"><div class="col-sm-12">
<h3 class="fittext-h3 blue-t black-t-s impact">Brutal Extension Element Library</h3>
<p class="flow-text lucida">A collection of javascript plugins to further enhance user experience.</p>
<div class="double-col align-left">
<h4 class="impact">Media Elements</h4>
<ul class="flow-text triangle">
<li><a href="bell.html#audio" class="link bold">Audio Player</a></li>
<li><a href="bell.html#gif" class="link bold">GIF Player</a></li>
<li><a href="bell.html#vp" class="link bold">Video Player</a></li>
</ul>
<h4 class="impact">Interface Elements</h4>
<ul class="flow-text triangle">
<li><a href="bell.html#megamenu" class="link bold">MegaMenu</a></li>
<li><a href="bell.html#printer" class="link bold">Printer</a></li>
<li><a href="bell.html#ei" class="link bold">Exit Intent</a></li>
</ul>
<h4 class="impact">Content Elements</h4>
<ul class="flow-text triangle">
<li><a href="bell.html#timeline" class="link bold">Timeline</a></li>
<li><a href="bell.html#presenter" class="link bold">Presenter</a></li>
<li><a href="bell.html#piss" class="link bold">PISS</a></li>
</ul>
<h4 class="impact">BISCUIT</h4>
<ul class="flow-text triangle">
<li><a href="bell.html#age" class="link bold">Age Verify</a></li>
<li><a href="bell.html#cc" class="link bold">Cookie Consent</a></li>
<li><a href="bell.html#pl" class="link bold">PageLock</a></li>
</ul>
</div>
</div></div></div>
</div>
<div class="modal-footer"><a href="#return1" class="btn large-btn black platinum-t">CLOSE</a></div>
</div>
<div class="overlay"></div>
</div>
<!-- Boilerplates Modal -->
<div id="boilers" class="modal-lite fullscreen">
<div class="modal-content bpmodal">
<div class="modal-head center"><h2 class="deep-orange-t courier-new black-t-s bold"><i class="bi bi-heat"></i> Boilerplates</h2></div>
<div class="modal-content-body">
<div class="container-fluid"><div class="row"><div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<p class="fittext fire-t impact black-t-s">Starting point templates</p>
<ul class="flow-text brutal lucida white-t-s">
<li><a href="bp/email.html" target="_blank" class="link">Email Boilerplate</a></li>
<li><a href="bp/leads.html" target="_blank" class="link">Lead Capture</a></li>
<!--<li><a href="bp/catalog.html" target="_blank" class="link">Commerce Catalog</a></li>
<li><a href="bp/media-gallery.html" target="_blank" class="link">Media Gallery</a></li>-->
<li><a href="bp/microblog.html" target="_blank" class="link">Microblog</a></li>
<li><a href="bp/social.html" target="_blank" class="link">Social</a></li>
<li><a href="bp/horror.html" target="_blank" class="link">Horror</a></li>
<li><a href="bp/vaporwave.html" target="_blank" class="link">Vaporwave</a></li>
<li><a href="bp/ratedx.html" target="_blank" class="link">Rated X</a> <span class="red-t">(18+)</span></li>
</ul>
</div><div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"></div></div></div>
</div>
<div class="modal-footer"><a href="#return1" class="btn large-btn black platinum-t">CLOSE</a></div>
</div>
<div class="overlay"></div>
</div>
<!-- Moar Modal -->
<div id="moar" class="modal-lite fullscreen">
<div class="modal-content shades">
<div class="modal-head center"><h2 class="red-t courier-new black-t-s bold">+ More</h2></div>
<div class="modal-content-body center">
<div class="container-1200"><div class="row"><div class="col-sm-12"><p class="padded"></p>
<p class="fittext helvetica black-t-s navy"><a href="http://eepurl.com/cEW1RX" target="_blank" class="orange-t invert-hover">Join <i class="bi bi-amp"></i> Brutal Blast »</a><br />
<small><span class="white-t">Subscribe to our e-Newsletter</span></small></p>
<p class="fittext lucida black-t-s"><a href="https://github.com/pinecreativelabs/Brutalist-Framework/wiki/Roadmap" target="_blank" class="mono invert-hover">Roadmap</a></p>
<p class="fittext impact black-t-s"><a href="https://www.concrete5.org" target="_blank" class="charcoal smoke-t invert-hover">Concrete5 CMS</a></p>
<p class="fittext tahoma black-t-s"><a href="http://www.bradfogelstrom.com" target="_blank" class="sweden invert-hover">BradFogelstrom.com</a></p>
<p class="padded"></p>
</div></div></div>
</div>
<div class="modal-footer"><a href="#return1" class="btn large-btn black platinum-t allcaps">CLOSE</a></div>
</div>
<div class="overlay"></div>
</div>
<!-- Scripts-->
<script src="core/js/jquery.3.js"></script>
<script src="core/js/brutalist.js"></script>
<script src="core/js/start.brutalizing.js"></script>
<!-- BELL -->
<script src="core/bell/js/bell.js"></script>
<script>
$(document).ready(function () {
$(".piss-grid").hip({itemsPerPage:12,itemsPerRow:3,itemGaps:'20px',filter:true,filterPos:'center',paginationPos:'center'});
});
</script>
<!-- TRACKING -->
</body>
</html>