-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
223 lines (215 loc) · 10.8 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<link rel="icon" href="./Pyrite2.png">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<title>PyritePlate</title>
<script src="./script.js"></script>
</head>
<body>
<main class="container" id="main">
<div class="avoid-container hero grid">
<div class="md3">
<img src="./Pyrite2.png">
</div>
<div class="md9">
<h1>PyritePlate</h1>
<small>or, that shit I keep doing</small>
<p>The boilerplate CSS I normally write and rewrite on my projects, now all together in one shiny spot. Yeeey.</p>
<p>If you somehow got here & wanna grab code, bear in mind it's not my cleanest stuff - not fully responsive, lazily done... it's the sort of shit I use on personal projects just for fun.</p>
</div>
</div>
<div class="outside">
<nav id="nav">
</nav>
</div>
<h2>The boilerplate's boilerplate <button class="sm" onclick="copyCSS(this, 'boilerplate')">Copy CSS</button></h2>
<p>This CSS sets up the basic variables for color, spacing & sizing, plus a couple of helpers like <code>.primary</code> & <code>.secondary</code> that make your <span class="primary">text go all funny</span>.</p>
<p>You also get <code>.bg-primary</code>, <code>.bg-secondary</code> & <code>.bg-gray</code> that make your <span class="bg-primary">backgrounds be super cool</span>.</p>
<hr/>
<h2>Containers <button class="sm" onclick="copyCSS(this, 'wrappers')">Copy CSS</button></h2>
<p>There's a <code>.container</code> that's wrapping all this shit.</p>
<pre data-lang="HTML"><code><div class="container">
Your content here
</div></code></pre>
<div class="bg-secondary avoid-container">
<p>avoiding stuff is my specialty, though. you can do it too:</p>
<pre data-lang="HTML"><code><div class="avoid-container">
all the problems that you're avoiding, here!
</div></code></pre>
</div>
<hr/>
<h2>Buttons <button class="sm" onclick="copyCSS(this, 'buttons')">Copy CSS</button></h2>
<p>For buttons, just use the standard html tag. Add <code>.outline</code>, <code>.primary</code> or <code>.secondary</code> for extra flair. It will be a tad lighter if it's <code>disabled</code>.</p>
<p><code>.sm</code> buttons will be smaller, and thus, cuter.</p>
<p>
<button>Learn more</button>
<button class="outline">Sign in</button>
<button class="outline primary">Sign up</button>
<button disabled>can't click me!</button>
<button class="outline" disabled>dum dum</button>
<button class="outline primary" disabled>dum dum</button>
<button class="primary" disabled>dum</button>
<button class="sm primary">tiny babe</button>
</p>
<hr/>
<h2>Links <button class="sm" onclick="copyCSS(this, 'links')">Copy CSS</button></h2>
<p>URLs like <a href="#">this one</a> will style themselves to be cute.</p>
<p>Links with the <code>.button</code> class will be styled as buttons, and will react to the standard button helper classes.</p>
<p>
<a href="#" class="button">Not a button</a>
<a href="#" class="button outline">would've fool'd ya tho</a>
</p>
<hr/>
<h2>Forms <button class="sm" onclick="copyCSS(this, 'forms')">Copy CSS</button></h2>
<p>I don't normally do forms so there's very few shit imma do here.</p>
<div class="control">
<label>Name</label>
<input placeholder="Enter your whatever">
</div>
<pre data-lang="HTML"><code><div class="control">
<label>Name</label>
<input placeholder="Enter your whatever">
</div></code></pre>
<br>
<p>Add the <code>.error</code> class to style shit when users mess up, and use a <code>.message</code> to display any error texts.</p>
<div class="control error">
<label>E-mail</label><span class="message">Something's awfully wrong! >:c</span>
<input placeholder="Enter your whatever" value="something stupid">
</div>
<p>Radio button and checkboxes don't need anything fancy, just add a label tag to them.</p>
<div class="control">
<input type="radio" name="options" id="option-1"><label for="option-1">Option 1</label>
<input type="radio" name="options" id="option-2"><label for="option-2">Option 2</label>
<input type="radio" name="options" id="option-3"><label for="option-3">Option 3</label>
</div>
<div class="control">
<input type="checkbox" name="moptions" id="moption-1"><label for="moption-1">Multi-Option 1</label>
<input type="checkbox" name="moptions" id="moption-2"><label for="moption-2">Multi-Option 2</label>
<input type="checkbox" name="moptions" id="moption-3"><label for="moption-3">Multi-Option 3</label>
</div>
<div class="control">
<label>Check this out</label>
<textarea placeholder="You could write something fairly long here!"></textarea>
</div>
<div class="control">
<label>Find this useful?</label>
<select>
<option>Very much</option>
<option>Somewhat</option>
<option>Not at all</option>
</select>
</div>
<hr/>
<h2>Grids, ugh <button class="sm" onclick="copyCSS(this, 'grid')">Copy CSS</button></h2>
<p>The standard 12 column magic, by the grace of a <code>.grid</code> parent <code>.md#</code> for each cell. Breaks to <code>.sm#</code> at <strong>1024px</strong>, and to <code>.lg#</code> at <strong>2048px</strong>.</p>
<p>Use <code>.start#</code>, <code>.sm-start#</code> and <code>.lg-start#</code> to offset your cells, indicating on which column should your cell start.</p>
<div class="grid example">
<div class="md2 lg12 bg-primary"><code>.md2.lg12</code></div>
<div class="md4 bg-primary"><code>.md4</code></div>
<div class="md1 bg-primary"><code>.md1</code></div>
<div class="md1 start9 bg-primary"><code>.md1.start9</code></div>
<div class="md3 sm6 bg-primary"><code>.md3.sm6</code></div>
</div><br>
<pre data-lang="HTML"><code><div class="grid example">
<div class="md2 lg12">.md2.lg12</div>
<div class="md4">.md4</div>
<div class="md1">.md1</div>
<div class="md1 start9">.md1.start9</div>
<div class="md3 sm6">.md3.sm6</div>
</div></code></pre>
<hr/>
<h2>Separator <button class="sm" onclick="copyCSS(this, 'separator')">Copy CSS</button></h2>
<p>Sometimes, your content can be really different from other content. Sometimes you wanna split it in sections! Just use the hr HTML tag and you're all set, right?</p>
<hr/>
<p>That's ok, that's why i tweaked this shit! The <code>data-text</code> attribute will allow you to add some text to it, too.</p>
<hr data-text="Don't panic!"/>
<p>Breathe in, breathe out, kick someone's ass. Everything's gonna be just ggggggreat.</p>
<hr class="primary" data-text="of course,"/>
<p>This supports the standard colors</p>
<hr class="secondary" data-text="both of them"/>
<pre data-lang="HTML"><code><hr class="secondary" data-text="both of them"/></code></pre>
<hr/>
<h2>Cards! <button class="sm" onclick="copyCSS(this, 'cards')">Copy CSS</button></h2>
<div class="grid">
<div class="md4 sm12 card">Finally, <strong class="primary">something cute</strong> for yer beautiful eyes to look at,
<hr data-text="fancily supporting"/>
the beloved separator!
</div>
<div class="md4 sm12 card">
<div class="title">It can have a title</div>
I mean, aside from your regular <strong class="secondary">gorg content</strong>.
</div>
<div class="md4 sm12 card hoverable">
<div class="title">Of course</div>
It can be hoverable if you need it to.
</div>
<pre data-lang="HTML" class="md4 sm12"><code><div class="card">
Finally, <strong class="primary">something cute</strong> for yer beautiful eyes to look at,
<hr data-text="fancily supporting"/>
the beloved separator!
</div></code></pre>
<pre data-lang="HTML" class="md4 sm12"><code><div class="card">
<div class="title">It can have a title</div>
I mean, aside from your regular <strong class="secondary">gorg content</strong>.
</div></code></pre>
<pre data-lang="HTML" class="md4 sm12"><code><div class="card hoverable">
<div class="title">Of course</div>
It can be hoverable if you need it to.
</div></code></pre>
</div>
<hr/>
<h2>Tables <button class="sm" onclick="copyCSS(this, 'tables')">Copy CSS</button></h2>
<p>Officially going overboard, yeyyy! Just use the standard HTML stuff, it's been properly styled and cutiefied.</p>
<table>
<thead>
<tr>
<th>Book</th>
<th>Author</th>
<th>Cool quote</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Color of Magic</td>
<td>Terry Pratchett</td>
<td>"It is at this point that normal language gives up, and goes and has a drink."</td>
</tr>
<tr>
<td>The Hobbit, or There and Back Again</td>
<td>J. R. R. Tolkien</td>
<td>"Trolls simply detest the very sight of dwarves (uncooked)."</td>
</tr>
<tr>
<td>Stardust</td>
<td>Neil Gaiman</td>
<td>"There was a skyness to the sky and a nowness to the world that he had never seen or felt or realized before."</td>
</tr>
</tbody>
</table>
<hr/>
<h2>Pills <button class="sm" onclick="copyCSS(this, 'pills')">Copy CSS</button></h2>
<div class="grid">
<div class="md6 sm12">
<p>
At any given time you can bet I'm thinking about why pills are such a cute concept.
</p>
<div class="pill primary">prescription</div>
<div class="pill secondary">only</div>
<div class="pill">pills</div>
</div>
<div class="md6 sm12">
<pre data-lang="HTML"><code><div class="pill primary">prescription</div>
<div class="pill secondary">only</div>
<div class="pill">pills</div></code></pre>
</div>
</div>
<footer class="bg-black avoid-container grid">
<p class="md11">Hey there. That's it for now. Hope you found this helpful! c:</p>
<a href="https://github.com/pyritewolf/pyriteplate" class="button sm md1"><i class="lab la-github"></i></a>
</footer>
</main>
</body>
</html>