-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
401 lines (398 loc) · 17 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
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
<!-- TODO: remove this before v1 -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/modern-normalize" />
<link rel="stylesheet" href="./clam.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap">
<title>Clam.css</title>
<style>
/* Still considering whether to add these to the main file */
main > * {
max-width: 768px;
}
main > * + section {
margin-top: 2rem;
}
section > * + * {
margin-top: 0.5rem;
}
hr {
margin: 2rem 0;
}
</style>
</head>
<body>
<header>
<nav>
<a href="/">Clam.css</a>
<a
href="https://github.com/rmrt1n/clam.css"
target="_blank"
class="btn"
>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.49933 0.25C3.49635 0.25 0.25 3.49593 0.25 7.50024C0.25 10.703 2.32715 13.4206 5.2081 14.3797C5.57084 14.446 5.70302 14.2222 5.70302 14.0299C5.70302 13.8576 5.69679 13.4019 5.69323 12.797C3.67661 13.235 3.25112 11.825 3.25112 11.825C2.92132 10.9874 2.44599 10.7644 2.44599 10.7644C1.78773 10.3149 2.49584 10.3238 2.49584 10.3238C3.22353 10.375 3.60629 11.0711 3.60629 11.0711C4.25298 12.1788 5.30335 11.8588 5.71638 11.6732C5.78225 11.205 5.96962 10.8854 6.17658 10.7043C4.56675 10.5209 2.87415 9.89918 2.87415 7.12104C2.87415 6.32925 3.15677 5.68257 3.62053 5.17563C3.54576 4.99226 3.29697 4.25521 3.69174 3.25691C3.69174 3.25691 4.30015 3.06196 5.68522 3.99973C6.26337 3.83906 6.8838 3.75895 7.50022 3.75583C8.1162 3.75895 8.73619 3.83906 9.31523 3.99973C10.6994 3.06196 11.3069 3.25691 11.3069 3.25691C11.7026 4.25521 11.4538 4.99226 11.3795 5.17563C11.8441 5.68257 12.1245 6.32925 12.1245 7.12104C12.1245 9.9063 10.4292 10.5192 8.81452 10.6985C9.07444 10.9224 9.30633 11.3648 9.30633 12.0413C9.30633 13.0102 9.29742 13.7922 9.29742 14.0299C9.29742 14.2239 9.42828 14.4496 9.79591 14.3788C12.6746 13.4179 14.75 10.7025 14.75 7.50024C14.75 3.49593 11.5036 0.25 7.49933 0.25Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
GitHub
</a>
</nav>
</header>
<main>
<section>
<h1>Clam.css</h1>
<p>
Clam.css provides a good-enough set of styles to kick off your new
project. It's meant for building prototypes, where you want to build
stuff quickly instead of wrestling with CSS. It styles plain HTML, so
you don't need to learn a new framework or remember any class names.
</p>
<p>
Clam.css is also mobile responsive and has a dark mode which follows
your system's theme. If you found a bug or have a feature request,
please
<a href="https://github.com/rmrt1n/clam.css/issues">
create an issue on GitHub</a
>.
</p>
</section>
<section>
<h2>Quick start</h2>
<p>
Clam.css is a single CSS file, so to use it you just need to include
it in your HTML file. You can do this by including it from a CDN or by
installing it from NPM. You can also download the source code directly
and put it in your project.
</p>
<div class="space-y-2">
<h3>Straight from the CDN</h3>
<p>
The simplest way to use Clam.css is to include it directly from the
CDN. Just copy the code below and paste it in the
<code><head></code> of your HTML file. Clam.css uses modern
normalize for normalization, so you should include it as well.
</p>
<pre><code><link rel="stylesheet" href="https://unpkg.com/modern-normalize" />
<link rel="stylesheet" href="https://unpkg.com/clam.css" /></code></pre>
</div>
<div class="space-y-2">
<h3>Install from NPM</h3>
<p>
Another option is to install Clam.css from NPM using your preffered
package manager (npm, yarn, pnpm, bun, etc.).
</p>
<pre><code>pnpm add clam.css</code></pre>
<p>
Usage might depend on the javascript framework you're using. In
Next.js, you can add this line to your root layout:
</p>
<pre><code>import "clam.css"</code></pre>
</div>
</section>
<section>
<h2>Docs</h2>
<div class="space-y-2">
<h3>Typography</h3>
<p>
Clam.css uses Inter as the default font and 1.5 as the default line
height. I think this configuration is good enough for most sites. I
didn't include styles for the <code>h5</code> and
<code>h6</code> tags because I personally never found myself needing
them at all. Very rarely would you need a heading below
<code>h4</code>.
</p>
<div>
<h1>Heading 1 <code>2.25rem</code></h1>
<h2>Heading 2 <code>1.5rem</code></h2>
<h3>Heading 3 <code>1.25rem</code></h3>
<h4>Heading 4 <code>1rem</code></h4>
<p>
In case you didn't know, you can do alot with plain HTML, such as
<strong>make text bold</strong>, <em>italic</em>,
<u>underline text</u>, <s>strikethroughs</s>,
<code> inline code</code>, and even <mark>highlight text</mark>.
Use links to link to <a href="#">other parts of your page</a> or
to an external site like <a href="https://github.com">GitHub</a>.
</p>
</div>
</div>
<hr />
<div class="space-y-2">
<h3>Buttons</h3>
<p>
Clam.css provides two styles of buttons, <code>default</code> and
<code>primary</code>. All buttons are styled as
<code>default</code> by default. If you want to use
<code>primary</code>, you need to add the
<code>btn-primary</code> class.
</p>
<div class="space-x-2">
<button>Default button</button>
<button class="btn-primary">Primary button</button>
</div>
<p>
You can also style links as buttons. To do this, you need to add the
<code>btn</code> class to your <code>a</code> tag. I want to keep
Clam.css simple to use, so there won't be a lot of class names to
remember.
</p>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap">
<a href="#" class="btn">This is a button link</a>
<a href="#" class="btn btn-primary"
>This is a primary button link
</a>
</div>
</div>
<hr />
<div class="space-y-2">
<h3>Forms and inputs</h3>
<p>
Clam.css overrides the default styles of some input elements (radio
buttons, checkboxes, and select/dropdowns) because they're IMO,
ridiculously hard to style. or dropdown input. Note that forms don't
have the border, rounded corners, and shadows by default. This is
from the <code>.card</code> class that will be covered in later
sections.
</p>
<form class="card" style="max-width: 640px">
<strong>This is an example form</strong>
<div>
<label for="email">Email</label>
<input
id="email"
type="email"
placeholder="johndoe@example.com"
/>
</div>
<div>
<label for="password">Password</label>
<input id="password" type="password" />
</div>
<div>
<label for="ta">Description</label>
<textarea id="ta" rows="4" placeholder="Your description...">
</textarea>
</div>
<fieldset>
<legend>Account type</legend>
<input type="radio" id="opt1" name="option" value="1" />
<label for="opt1" style="margin-right: 1rem">Regular</label>
<input type="radio" id="opt2" name="option" value="2" />
<label for="opt2">Admin</label>
</fieldset>
<div>
<label for="select">Country</label>
<select id="country">
<option value="">Select a country from the dropdown</option>
<option value="1">Indonesia</option>
<option value="2">Malaysia</option>
<option value="3">Singapore</option>
<option value="4">Thailand</option>
<option value="5">Vietnam</option>
</select>
</div>
<div>
<input type="checkbox" id="accept" />
<label for="accept">Accept terms and conditions</label>
</div>
<button type="button">Submit</button>
</form>
</div>
<hr />
<div class="space-y-2">
<h3>Images</h3>
<p>
Images are responsive by default. The rounded corners aren't
default, if you want them, you'll have to add it yourself. Corner
radius is one of the CSS variables I used, so if you want to give
some element rounded corners, simply copy paste this into its style
attribute: <code>border-radius: var(--border-radius)</code>
</p>
<figure>
<img
src="img.jpg"
alt="a picture of a giant clam"
style="border-radius: var(--border-radius)"
/>
<figcaption>
Photo by
<a
href="https://unsplash.com/@francesco_ungaro?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
>Francesco Ungaro</a
>
on
<a
href="https://unsplash.com/photos/brown-clamp-QHK1On-31qQ?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
>Unsplash</a
>
</figcaption>
</figure>
</div>
<hr />
<div class="space-y-2">
<h3>Cards</h3>
<p>
Cards are the one of the things that I always use for my
applications. So even though I initially wanted to make Clam.css
fully classless, I couldn't because there's no way to get cards
easily without writing some CSS. I added the <code>card</code> class
for this reason. <code>article</code> elements also get this styling
by default.
</p>
<div class="card">
<h4>Cards are awesome</h4>
<p>
Add the <code>card</code> class to any element you want to give
them the card style.
</p>
</div>
</div>
<hr />
<div class="space-y-2">
<h3>Utility classes</h3>
<p>These are some utility classes that I always find myself using
in my projects, so I'm including them here. These should help lessen
the amount of CSS you need to write for layouts.</p>
<div class="card">
<h4><code>.danger</code></h4>
<p>This class applies the <code>--danger</code> variable as the color
of the element. Useful for error messages.</p>
<p>Example:</p>
<p class="danger">Oh no! An unexpected error occured!</p>
</div>
<div class="card">
<h4><code>.space-x-2, space-x-4</code></h4>
<p>This is the tailwind class for adding even horizontal margins between elements in a block container.</p>
<p>Example:</p>
<div>
<p style="margin-bottom: .25rem"><code>.space-x-2</code></p>
<div class="space-x-2">
<button>Button 1</button>
<button>Button 2</button>
</div>
</div>
<div>
<p style="margin-bottom: .25rem"><code>.space-x-4</code></p>
<div class="space-x-4">
<button>Button 1</button>
<button>Button 2</button>
</div>
</div>
</div>
<div class="card">
<h4><code>.space-y-2, space-y-4</code></h4>
<p>This is the tailwind class for adding even vertical margins between elements in a block container.</p>
<p>Example:</p>
<div class="flex" style="align-items: start">
<div style="flex: 1">
<p style="margin-bottom: .25rem"><code>.space-x-2</code></p>
<div class="space-y-2">
<button style="display: block">Button 1</button>
<button style="display: block">Button 2</button>
</div>
</div>
<div style="flex: 1">
<p style="margin-bottom: .25rem"><code>.space-x-4</code></p>
<div class="space-y-4">
<button style="display: block">Button 1</button>
<button style="display: block">Button 2</button>
</div>
</div>
</div>
</div>
<div class="card">
<h4><code>.flex, .flex-col</code></h4>
<p><code>.flex</code> applies the styles <code>display: flex</code>, <code>align-items: center</code>, and <code>gap: .5rem</code> to the element. <code>.flex-col</code> applies the style <code>flex-direction: column</code> to the element.</p>
<p>In my experience, these classes are enough for basic layouts.</p>
</div>
</div>
</section>
<section>
<h2>Customization</h2>
<p>
Clam.css uses CSS variables to set values such as the color and border
radiues of an element. To change their values, you need to override
them in your own stylesheet. Clam.css uses
<a
href="https://tailwindcss.com/docs/customizing-colors"
target="_blank"
>tailwind colors</a
>. You can use that as a reference to guide you when you're changing
the colors.
</p>
<p>
The dark theme uses slightly different colors that the default light
theme, so if you didn't disable the dark theme, you'll have to change
the colors for the dark theme too. If you want to disable the dark
theme, you can paste this line into your
<code><head></code> element.
</p>
<pre><code><meta name="color-scheme" content="light only"></code></pre>
<p>Below is the list of variables used:</p>
<div class="space-y-2"></div>
<div class="space-y-2">
<h3>Default background and text color</h3>
<pre><code>--bg: #fff; /* white */
--fg: #020617; /* slate-950 */</code></pre>
</div>
<div class="space-y-2">
<h3>
Background, hover, and text color for primary buttons and links
</h3>
<pre><code>--primary: #2563eb; /* blue-600 */
--primary-hover: #1d4ed8; /* blue-700 */
--primary-fg: #fff; /* white */</code></pre>
</div>
<div class="space-y-2">
<h3>Background, hover, and text color of all the other elements</h3>
<pre><code>--secondary: #f1f5f9; /* slate-100 */
--secondary-hover: #e2e8f0; /* slate-200 */
--secondary-fg: #020617; /* slate-950 */</code></pre>
</div>
<div class="space-y-2">
<h3>Background and text color for inputs and their placeholder</h3>
<pre><code>--muted: #f8fafc; /* slate-50 */
--muted-fg: #334155; /* slate-700 */</code></pre>
</div>
<div class="space-y-2">
<h3>Background and text color for danger/destructive elements</h3>
<pre><code>--danger: #dc2626; /* red-600 */
--danger-fg: #fff; /* white */</code></pre>
</div>
<div class="space-y-2">
<h3>Border and outline color</h3>
<pre><code>--border: #94a3b8; /* slate-400 */
--outline: #3b82f6; /* blue-500 */</code></pre>
</div>
<div class="space-y-2">
<h3>Border radius (default 6px)</h3>
<pre><code>--border-radius: 0.375rem;</code></pre>
</div>
</section>
</main>
<footer style="margin-top: 4rem">
<p style="text-align: center">
Made by <a href="https://ryanmartin.me">Ryan Martin</a> and licensed
under the
<a href="https://github.com/rmrt1n/clam.css/blob/main/README.md#license"
>MIT license</a
>.
</p>
</footer>
</body>
</html>