-
Notifications
You must be signed in to change notification settings - Fork 0
/
chaos-grid-randomize.html
148 lines (125 loc) · 7.5 KB
/
chaos-grid-randomize.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
<!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>Chaos Grid Demo</title>
<meta name="description" content="The anti-grid grid." />
<!-- Icons -->
<link rel="shortcut icon" href="source/icons/bpg48.png" type="image/x-icon" />
<link rel="icon" href="source/icons/bpg.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="source/icons/bpg100.png" />
<!-- CORE CSS -->
<link href="source/blueprintgrid.css" type="text/css" rel="stylesheet" media="all"/>
<link href="source/brutalist.min.css" type="text/css" rel="stylesheet" media="all"/>
<style>
.chaos-grid h1, .chaos-grid h2, .chaos-grid h3, .chaos-grid h4{padding: 4px 0 4px 0; margin: 0;}
</style>
</head>
<body class="infinitile" style="overflow-x:hidden;">
<div class="block-wrap bw100 center" style="margin-bottom: 2em; margin-top: 2em;">
<div class="block bw50 blueprint box-s-k b-s-k charcoal-b rounded">
<h1 class="courier"><i class="bi bi-pinwheel throb spin"></i>cHaOs GrId: rANdoMIze</h1>
<h2 class="flow-text lucida">The anti-grid grid... <em>randomized</em> using vanilla javascript.</h2>
<p style="font-size: 1.25rem; padding: 1.5rem 0 2.5rem 0;">Include <em><strong>source/methods/js/chaos-grid.js</strong></em> before the closing <em>body</em> tag.</p>
<strong><a href="https://github.com/pinecreativelabs/Blueprint-Grid/wiki/Chaos-Grid#randomize" target="_blank" class="btn charcoal rice-t invert-h">Documentation »</a></strong>
<p class="spacer"></p>
</div>
</div>
<div class="padded charcoal center smoke-t lucida">
<h3>.chaos-grid.randomize</h3>
<p><strong>DEMO:</strong> Refresh page to see elements randomly positioned.</p>
</div>
<div class="emptiness padded">
<!-- let the chaos begin! -->
<div class="chaos-grid randomize" style="min-height: 80vh; margin: 0 auto; width: 80vw;">
<div class="padded winter bw25 xs-100 sm-100 butter-t">
<h4 class="lucida flow-text"><i class="bi bi-snowflake"></i> Winter DIV</h4>
<p class="tahoma">I am a normal <em>div</em> element. Using B3Grid, my width is 25% on devices <em>over</em> 480px, and 100% on devices <em>under</em> 480px.</p>
</div>
<article class="padded spring seaweed-t lime-t-s georgia">
<h3 class="flow-text"><i class="bi bi-sprout"></i> Spring Article</h3>
<p>This is a springtime article element, and I have no set width.</p>
</article>
<section class="padded summer sapphire-t">
<h3 class="flow-text"><i class="bi bi-ocean"></i> Summer Surf Section</h3>
<p>This is a sufin' summery section element. <i class="bi bi-surf bi-3x"></i></p>
</section>
<article class="padded autumn bbq-t">
<h3 class="lucida flow-text"><i class="bi bi-fall"></i> Autumn Article</h3><hr />
<p class="tahoma">Autumn is my favorite season.<br /><small>[end of article]</small></p>
</article>
<blockquote class="blueprint padded impact" style="font-size: 1.33em;">I am an impactful blockquote block.</blockquote>
<p class="padded pool-party"><strong><i class="bi bi-wet"></i> PARAGRAPH.</strong><br />I'm just a plain 'ol paragraph element. I am a pool of words.</p>
<figure class="padded brown center">
<img src="source/images/profchaos.png" alt="Professor Chaos" class="spin-r-fast large-thumb crop" />
<figcaption class="comic bold butter-t">Professor Chaos</figcaption>
</figure>
<div class="psychedelic padded rounded"><img src="source/images/spiral.png" alt="spiral" class="invert xlarge-thumb spin-fast" /></div>
<a href="#" class="cherry-vanilla bold lucida flow-text padded hue-h">I am<br />a link</a>
<img src="source/images/emprint_blue.jpg" alt="Blue Emily" class="jumbo-thumb" />
<article class="padded rice charcoal-t cellophane bw33 xs-100 sm-100 md-100">
<h2 class="impact flow-text"><i class="bi bi-article"></i> Cellophane News</h2>
<p class="courier">The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.</p>
</article>
<img src="source/images/profchaos.png" alt="Professor Chaos" class="spin-fast xlarge-thumb crop" />
<section class="padded seaweed-slime bw25 xs-100 sm-100 md-100">
<h3 class="flow-text tahoma">Section</h3>
<p class="lucida">I am a section element. I take up 25% of the width on large devices and up.</p>
</section>
</div><!-- end chaos-grid wrapper -->
</div>
<p class="padding"></p>
<p class="padding"></p>
<p class="padding"></p>
<div class="padded charcoal center smoke-t lucida">
<h3>.chaos-grid.randomize.tilt</h3>
<p style="margin-bottom: 3rem;"><strong>DEMO:</strong> Elements should be skewed and rotated in random positions.</p>
</div>
<div class="emptiness padded">
<!-- let the chaos begin! -->
<div class="chaos-grid randomize tilt" style="min-height: 80vh; margin: 0 auto; width: 80vw;">
<div class="padded winter bw25 xs-100 sm-100 butter-t">
<h4 class="lucida flow-text"><i class="bi bi-snowflake"></i> Winter DIV</h4>
<p class="tahoma">I am a normal <em>div</em> element. Using B3Grid, my width is 25% on devices <em>over</em> 480px, and 100% on devices <em>under</em> 480px.</p>
</div>
<article class="padded spring seaweed-t lime-t-s georgia">
<h3 class="flow-text"><i class="bi bi-sprout"></i> Spring Article</h3>
<p>This is a springtime article element, and I have no set width.</p>
</article>
<section class="padded summer sapphire-t">
<h3 class="flow-text"><i class="bi bi-ocean"></i> Summer Surf Section</h3>
<p>This is a sufin' summery section element. <i class="bi bi-surf bi-3x"></i></p>
</section>
<article class="padded autumn bbq-t">
<h3 class="lucida flow-text"><i class="bi bi-fall"></i> Autumn Article</h3><hr />
<p class="tahoma">Autumn is my favorite season.<br /><small>[end of article]</small></p>
</article>
<blockquote class="blueprint padded impact" style="font-size: 1.33em;">I am an impactful blockquote block.</blockquote>
<p class="padded pool-party"><strong><i class="bi bi-wet"></i> PARAGRAPH.</strong><br />I'm just a plain 'ol paragraph element. I am a pool of words.</p>
<figure class="padded brown center">
<img src="source/images/profchaos.png" alt="Professor Chaos" class="spin-r-fast large-thumb crop" />
<figcaption class="comic bold butter-t">Professor Chaos</figcaption>
</figure>
<div class="psychedelic padded rounded"><img src="source/images/spiral.png" alt="spiral" class="invert xlarge-thumb spin-fast" /></div>
<a href="#" class="cherry-vanilla bold lucida flow-text padded hue-h">I am<br />a link</a>
<img src="source/images/emprint_blue.jpg" alt="Blue Emily" class="jumbo-thumb" />
<article class="padded rice charcoal-t cellophane bw33 xs-100 sm-100 md-100">
<h2 class="impact flow-text"><i class="bi bi-article"></i> Cellophane News</h2>
<p class="courier">The news is that cellophane is a thin film of regenerated cellulose. It's usually transparent and is used primarily as a packaging material.</p>
</article>
<img src="source/images/profchaos.png" alt="Professor Chaos" class="spin-fast xlarge-thumb crop" />
<section class="padded seaweed-slime bw25 xs-100 sm-100 md-100">
<h3 class="flow-text tahoma">Section</h3>
<p class="lucida">I am a section element. I take up 25% of the width on large devices and up.</p>
</section>
</div><!-- end chaos-grid wrapper -->
</div>
<p class="padding"></p>
<p class="padding"></p>
<p class="padding"></p>
<p class="padding"></p>
<p class="padding"></p>
<script src="source/methods/js/chaos-grid.js"></script>
</body>
</html>