Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
432 lines (421 loc) · 28.1 KB
/
Copy pathindex.html
File metadata and controls
432 lines (421 loc) · 28.1 KB
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
<!DOCTYPE html>
<!-- SPDX-License-Identifier: MIT -->
<!-- Copyright (C) 2026 Abhishek Sengar -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>csslib — Free, Open-Source CSS Projects: Atelier Studios & Vektor.css</title>
<meta name="description" content="csslib is a collection of free, MIT-licensed CSS projects: Atelier, four visual studios for CSS animation, gradients, properties and layout, and Vektor.css, a charting library in pure CSS." />
<meta name="theme-color" content="#f5f6fa" />
<meta name="color-scheme" content="light" />
<link rel="canonical" href="https://csslib.github.io/" />
<meta property="og:url" content="https://csslib.github.io/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="csslib" />
<meta property="og:title" content="csslib — Free, Open-Source CSS Projects: Atelier Studios & Vektor.css" />
<meta property="og:description" content="csslib is a collection of free, MIT-licensed CSS projects: Atelier, four visual studios for CSS animation, gradients, properties and layout, and Vektor.css, a charting library in pure CSS." />
<meta property="og:image" content="https://csslib.github.io/site/social-card.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="csslib: free, open-source CSS projects" />
<meta name="twitter:image" content="https://csslib.github.io/site/social-card.png" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" href="/site/favicon.svg" type="image/svg+xml" />
<link rel="sitemap" type="application/xml" href="/site/sitemap.xml" />
<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=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&display=swap" />
<link rel="stylesheet" href="/site/atelier/suite/styles/tokens.css" />
<link rel="stylesheet" href="/site/styles/site.css" />
<link rel="stylesheet" href="/vektor-1.0.0.css" />
<link rel="stylesheet" href="/site/styles/home.css" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebSite",
"name": "csslib",
"url": "https://csslib.github.io/",
"description": "A collection of free, open-source CSS projects: the Atelier visual CSS studios and the Vektor.css charting library."
},
{
"@type": "ItemList",
"name": "csslib projects",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@type": "SoftwareApplication",
"name": "Atelier",
"url": "https://csslib.github.io/site/atelier/",
"applicationCategory": "DesignApplication",
"operatingSystem": "Web browser",
"description": "Four visual CSS studios for animation, gradients, properties and layout."
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@type": "SoftwareSourceCode",
"name": "Vektor.css",
"url": "https://csslib.github.io/site/vektor/",
"version": "1.0.0",
"programmingLanguage": "CSS",
"description": "A charting library written in pure, native CSS."
}
}
]
},
{
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What is csslib?",
"acceptedAnswer": {
"@type": "Answer",
"text": "csslib is a home for free, open-source CSS projects. Each project is independent: use the visual studios in Atelier, drop Vektor.css into a page, or take just the parts you need."
}
},
{
"@type": "Question",
"name": "Is everything free?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Every project is released under the MIT License, with no sign-up and no paid tier."
}
},
{
"@type": "Question",
"name": "Do I need a build step or framework?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. The studios run in your browser and export plain CSS, and the libraries are single stylesheets you link from any page."
}
},
{
"@type": "Question",
"name": "What is coming next?",
"acceptedAnswer": {
"@type": "Answer",
"text": "More studios, libraries and experiments built on modern native CSS. Follow along on GitHub."
}
}
]
}
]
}
</script>
<script src="/site/scripts/site.js" defer></script>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="site-header">
<div class="site-header-bar">
<a class="brand" href="/" aria-label="csslib home">
<span class="brand-tile"><svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M11.5 5.5c-2.6 0-3.8 1.3-3.8 3.9v3.4c0 1.6-.8 2.5-2.7 2.7v1c1.9.2 2.7 1.1 2.7 2.7v3.4c0 2.6 1.2 3.9 3.8 3.9" fill="none" stroke="#0d0f1a" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.5 5.5c2.6 0 3.8 1.3 3.8 3.9v3.4c0 1.6.8 2.5 2.7 2.7v1c-1.9.2-2.7 1.1-2.7 2.7v3.4c0 2.6-1.2 3.9-3.8 3.9" fill="none" stroke="#0d0f1a" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="16" cy="12.5" r="2.4" fill="#6366f1"/><circle cx="12.9" cy="18.4" r="2.4" fill="rgb(var(--kinetix-500-rgb))"/><circle cx="19.1" cy="18.4" r="2.4" fill="rgb(var(--specimen-500-rgb))"/></svg></span>
<span class="brand-text"><span class="brand-name">csslib</span><span class="brand-tagline">Open-source CSS projects</span></span>
</a>
<nav class="site-nav" aria-label="Primary">
<button class="site-nav-link" type="button" popovertarget="atelier-menu" aria-expanded="false">Atelier <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M4 6l4 4 4-4"/></svg></button>
<a class="site-nav-link" href="/site/vektor/">Vektor.css</a>
<button class="site-nav-link" type="button" popovertarget="learn-menu" aria-expanded="false">Learn <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M4 6l4 4 4-4"/></svg></button>
<a class="site-nav-link" href="/site/about/">About</a>
</nav>
<div class="site-header-actions">
<a class="button is-small" href="/#projects">Explore projects <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a>
</div>
<button class="menu-button" type="button" popovertarget="mobile-menu" aria-expanded="false" aria-label="Menu"><span></span></button>
</div>
<div class="nav-popover studios-popover" id="atelier-menu" popover>
<a class="project-menu-head" href="/site/atelier/">
<span class="brand-tile is-small"><svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><circle cx="10" cy="10" r="6" fill="rgb(var(--kinetix-500-rgb))"/><path d="M22.4 3.6c3.3-.2 6 2 6.1 5 .1 3.6-2.6 6.9-6.3 7.1-3.1.2-6-2-6.1-5-.1-3.4 3-6.9 6.3-7.1Z" fill="rgb(var(--chromaflow-500-rgb))"/><rect x="4" y="18" width="12" height="11" fill="rgb(var(--specimen-500-rgb))"/><path d="M22.5 17.5 29 29H16Z" fill="rgb(var(--intrinsicflow-500-rgb))"/></svg></span>
<span><strong>Atelier</strong><small>Four visual CSS studios · Overview →</small></span>
</a>
<ul class="studio-menu-grid">
<li>
<a class="studio-menu-item is-kinetix" href="/site/atelier/studios/css-animation-generator/">
<span class="shape-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8.5"/></svg></span>
<span><strong>Kinetix Studio</strong><small>CSS animation generator</small></span>
</a>
</li>
<li>
<a class="studio-menu-item is-chroma" href="/site/atelier/studios/css-gradient-generator/">
<span class="shape-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.6 3.2c3.9-.3 7.9 2.3 8.2 6.3.4 4.6-3.1 9.9-8.3 10.9-4.5.8-9-2-9.3-6.4-.3-4.1 2.9-5.4 4.2-7.6 1.2-2 2.3-3 5.2-3.2Z"/></svg></span>
<span><strong>ChromaFlow</strong><small>CSS gradient generator</small></span>
</a>
</li>
<li>
<a class="studio-menu-item is-specimen" href="/site/atelier/studios/css-property-playground/">
<span class="shape-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="4" width="16" height="16"/></svg></span>
<span><strong>Specimen Lab</strong><small>CSS property playground</small></span>
</a>
</li>
<li>
<a class="studio-menu-item is-intrinsic" href="/site/atelier/studios/css-layout-builder/">
<span class="shape-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3.5 21 19.5H3Z"/></svg></span>
<span><strong>IntrinsicFlow</strong><small>CSS Grid & Flexbox layout builder</small></span>
</a>
</li>
</ul>
</div>
<div class="nav-popover learn-popover" id="learn-menu" popover>
<ul class="learn-menu-list">
<li>
<a class="studio-menu-item is-learn" href="/site/modern-css/">
<span class="shape-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2.5 14.6 9.4 21.5 12 14.6 14.6 12 21.5 9.4 14.6 2.5 12 9.4 9.4Z"/></svg></span>
<span><strong>Modern CSS</strong><small>The newest CSS features, with live demos and browser support</small></span>
</a>
</li>
<li>
<a class="studio-menu-item is-learn" href="/site/resources/">
<span class="shape-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 3.5h10.5L19 7v13.5H5Z"/></svg></span>
<span><strong>CSS resources</strong><small>Official specs, docs, support tables and tools</small></span>
</a>
</li>
</ul>
</div>
<div class="nav-popover mobile-popover" id="mobile-menu" popover data-anchor="header">
<div class="mobile-menu-section">
<a class="project-menu-head" href="/site/atelier/">
<span class="brand-tile is-small"><svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><circle cx="10" cy="10" r="6" fill="rgb(var(--kinetix-500-rgb))"/><path d="M22.4 3.6c3.3-.2 6 2 6.1 5 .1 3.6-2.6 6.9-6.3 7.1-3.1.2-6-2-6.1-5-.1-3.4 3-6.9 6.3-7.1Z" fill="rgb(var(--chromaflow-500-rgb))"/><rect x="4" y="18" width="12" height="11" fill="rgb(var(--specimen-500-rgb))"/><path d="M22.5 17.5 29 29H16Z" fill="rgb(var(--intrinsicflow-500-rgb))"/></svg></span>
<span><strong>Atelier</strong><small>Four visual CSS studios</small></span>
</a>
<ul class="studio-menu-grid">
<li>
<a class="studio-menu-item is-kinetix" href="/site/atelier/studios/css-animation-generator/">
<span class="shape-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8.5"/></svg></span>
<span><strong>Kinetix Studio</strong><small>CSS animation generator</small></span>
</a>
</li>
<li>
<a class="studio-menu-item is-chroma" href="/site/atelier/studios/css-gradient-generator/">
<span class="shape-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.6 3.2c3.9-.3 7.9 2.3 8.2 6.3.4 4.6-3.1 9.9-8.3 10.9-4.5.8-9-2-9.3-6.4-.3-4.1 2.9-5.4 4.2-7.6 1.2-2 2.3-3 5.2-3.2Z"/></svg></span>
<span><strong>ChromaFlow</strong><small>CSS gradient generator</small></span>
</a>
</li>
<li>
<a class="studio-menu-item is-specimen" href="/site/atelier/studios/css-property-playground/">
<span class="shape-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="4" width="16" height="16"/></svg></span>
<span><strong>Specimen Lab</strong><small>CSS property playground</small></span>
</a>
</li>
<li>
<a class="studio-menu-item is-intrinsic" href="/site/atelier/studios/css-layout-builder/">
<span class="shape-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3.5 21 19.5H3Z"/></svg></span>
<span><strong>IntrinsicFlow</strong><small>CSS Grid & Flexbox layout builder</small></span>
</a>
</li>
</ul>
</div>
<div class="mobile-menu-section">
<a class="mobile-menu-link" href="/site/vektor/">Vektor.css — CSS charting library</a>
<a class="mobile-menu-link" href="/site/modern-css/">Modern CSS — new features explained</a>
<a class="mobile-menu-link" href="/site/resources/">CSS resources — specs, docs and tools</a>
<a class="mobile-menu-link" href="/site/about/">About</a>
<a class="button" href="/#projects">Explore projects <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a>
</div>
</div>
</header>
<main id="main">
<section class="hero is-collection">
<div class="wrap collection-hero">
<span class="eyebrow"><span class="eyebrow-dot"></span>Free & open source · MIT licensed</span>
<h1>Modern CSS, <span class="hero-highlight">made visible.</span></h1>
<p class="hero-lead">csslib is a growing collection of open-source CSS projects: visual studios for designing with CSS and libraries that do more with less. Everything runs in the browser and hands you plain, framework-free code.</p>
<div class="button-row">
<a class="button" href="#projects">Explore projects <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a>
<a class="button is-light" href="/site/about/">About csslib</a>
</div>
<ul class="hero-points">
<li>No sign-up</li>
<li>No build step</li>
<li>MIT licensed</li>
</ul>
</div>
</section>
<section class="section is-tight" id="projects" aria-labelledby="projects-title">
<div class="wrap">
<div class="section-head">
<span class="section-kicker">Projects</span>
<h2 id="projects-title">Two projects today, more on the way.</h2>
<p>Each project stands on its own, with its own look, docs and purpose, and they share the same promise: modern native CSS, free to use.</p>
</div>
<article class="project-feature card is-atelier">
<div class="project-feature-copy">
<span class="project-label"><span class="brand-tile is-small"><svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><circle cx="10" cy="10" r="6" fill="rgb(var(--kinetix-500-rgb))"/><path d="M22.4 3.6c3.3-.2 6 2 6.1 5 .1 3.6-2.6 6.9-6.3 7.1-3.1.2-6-2-6.1-5-.1-3.4 3-6.9 6.3-7.1Z" fill="rgb(var(--chromaflow-500-rgb))"/><rect x="4" y="18" width="12" height="11" fill="rgb(var(--specimen-500-rgb))"/><path d="M22.5 17.5 29 29H16Z" fill="rgb(var(--intrinsicflow-500-rgb))"/></svg></span>Visual CSS studios</span>
<h3>Atelier</h3>
<p>Four hands-on studios for the most visual parts of CSS: choreograph motion in Kinetix, paint gradients in ChromaFlow, explore properties in Specimen Lab and build layouts in IntrinsicFlow.</p>
<div class="hero-chips is-start"><a class="hero-chip is-kinetix" href="/site/atelier/studios/css-animation-generator/"><span class="shape-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8.5"/></svg></span><span>Kinetix</span></a><a class="hero-chip is-chroma" href="/site/atelier/studios/css-gradient-generator/"><span class="shape-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.6 3.2c3.9-.3 7.9 2.3 8.2 6.3.4 4.6-3.1 9.9-8.3 10.9-4.5.8-9-2-9.3-6.4-.3-4.1 2.9-5.4 4.2-7.6 1.2-2 2.3-3 5.2-3.2Z"/></svg></span><span>ChromaFlow</span></a><a class="hero-chip is-specimen" href="/site/atelier/studios/css-property-playground/"><span class="shape-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="4" width="16" height="16"/></svg></span><span>Specimen</span></a><a class="hero-chip is-intrinsic" href="/site/atelier/studios/css-layout-builder/"><span class="shape-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3.5 21 19.5H3Z"/></svg></span><span>IntrinsicFlow</span></a></div>
<div class="button-row">
<a class="button" href="/site/atelier/">Explore Atelier <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a>
<a class="button is-light" href="/site/atelier/#studios">See the studios</a>
</div>
</div>
<a class="project-feature-visual hero-visual" href="/site/atelier/" aria-label="Explore Atelier"><div class="hero-stack"><img class="hero-shot hero-shot-1" src="/site/atelier/studios/css-animation-generator/preview.jpg" alt="Kinetix Studio — CSS animation generator" width="1440" height="900" fetchpriority="high" /><img class="hero-shot hero-shot-2" src="/site/atelier/studios/css-gradient-generator/preview.jpg" alt="ChromaFlow — CSS gradient generator" width="1440" height="900" loading="lazy" /><img class="hero-shot hero-shot-3" src="/site/atelier/studios/css-property-playground/preview.jpg" alt="Specimen Lab — CSS property playground" width="1440" height="900" loading="lazy" /><img class="hero-shot hero-shot-4" src="/site/atelier/studios/css-layout-builder/preview.jpg" alt="IntrinsicFlow — CSS Grid & Flexbox layout builder" width="1440" height="900" loading="lazy" /></div></a>
</article>
<article class="project-feature card is-vektor-project">
<div class="project-feature-copy">
<span class="project-label"><span class="brand-tile is-small is-vektor-tile"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="3" y="12" width="4" height="9" rx="1"/><rect x="10" y="7" width="4" height="14" rx="1"/><rect x="17" y="3" width="4" height="18" rx="1"/></svg></span>CSS charting library</span>
<h3>Vektor.css</h3>
<p>Bar, radar, heatmap, donut, gauge, funnel and box-plot charts written as plain HTML lists and tables. One stylesheet, zero JavaScript, accessible by default.</p>
<div class="install-line"><code><link rel="stylesheet" href="https://csslib.github.io/vektor-1.0.0.css"></code></div>
<div class="button-row">
<a class="button is-vektor-button" href="/site/vektor/">Read the docs <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a>
<a class="button is-light" href="/vektor-1.0.0.css" download>Download v1.0.0</a>
</div>
</div>
<div class="project-feature-visual vektor-preview vk-scope" data-theme="dark">
<ul class="vk-chart vk-bar vk-grid-y" style="--target: 72;" data-target-label="Goal 72%">
<li style="--val: 48; --c: var(--vk-c-1);" data-label="Mon" data-value="48%"></li>
<li style="--val: 66; --c: var(--vk-c-2);" data-label="Tue" data-value="66%"></li>
<li style="--val: 58; --c: var(--vk-c-1);" data-label="Wed" data-value="58%"></li>
<li style="--val: 84; --c: var(--vk-c-3);" data-label="Thu" data-value="84%"></li>
<li style="--val: 73; --c: var(--vk-c-2);" data-label="Fri" data-value="73%"></li>
<li style="--val: 92; --c: var(--vk-c-5);" data-label="Sat" data-value="92%"></li>
</ul>
</div>
</article>
<div class="project-upcoming card">
<span class="project-upcoming-icon" aria-hidden="true">+</span>
<div>
<h3>More projects are on the way</h3>
<p>New studios, libraries and experiments built on modern CSS will join csslib over time.</p>
</div>
<a class="text-link" href="https://github.com/monad-one" rel="noopener">Follow on GitHub <span aria-hidden="true">→</span></a>
</div>
</div>
</section>
<section class="section" id="learn" aria-labelledby="learn-title">
<div class="wrap">
<div class="section-head">
<span class="section-kicker">Learn</span>
<h2 id="learn-title">Keep up with modern CSS.</h2>
<p>Plain-language guides to the newest CSS features, and a curated list of the official specs, docs, support tables and tools.</p>
</div>
<div class="learn-cards">
<a class="learn-card card is-learn" href="/site/modern-css/">
<span class="shape-tile is-large"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2.5 14.6 9.4 21.5 12 14.6 14.6 12 21.5 9.4 14.6 2.5 12 9.4 9.4Z"/></svg></span>
<span><strong>Modern CSS</strong><small>More than 30 new features, from container queries and :has() to view transitions and anchor positioning, with live demos, code and browser support.</small></span>
<span class="learn-card-arrow" aria-hidden="true">→</span>
</a>
<a class="learn-card card is-learn" href="/site/resources/">
<span class="shape-tile is-large"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 3.5h10.5L19 7v13.5H5Z"/></svg></span>
<span><strong>CSS resources</strong><small>W3C and CSS Working Group specs, MDN, Baseline and Can I use, browser release notes, validators and DevTools.</small></span>
<span class="learn-card-arrow" aria-hidden="true">→</span>
</a>
</div>
</div>
</section>
<section class="section" aria-labelledby="principles-title">
<div class="wrap">
<div class="section-head">
<span class="section-kicker">Principles</span>
<h2 id="principles-title">What every csslib project shares.</h2>
</div>
<div class="principles">
<article class="card principle"><span class="principle-mark">01</span><h3>Native CSS first</h3><p>Built on what browsers already do well: custom properties, container queries, color-mix(), trigonometry and cascade layers.</p></article>
<article class="card principle"><span class="principle-mark">02</span><h3>No build, no lock-in</h3><p>No frameworks, bundlers or accounts. Open a page or link a stylesheet and you are done.</p></article>
<article class="card principle"><span class="principle-mark">03</span><h3>Plain, readable output</h3><p>Everything you take away is ordinary HTML and CSS you can read, edit and own.</p></article>
<article class="card principle"><span class="principle-mark">04</span><h3>Open source</h3><p>MIT licensed from top to bottom. Use it in personal and commercial work.</p></article>
</div>
</div>
</section>
<section class="section is-tight" aria-labelledby="faq-title">
<div class="wrap">
<div class="section-head">
<span class="section-kicker">FAQ</span>
<h2 id="faq-title">Questions, answered.</h2>
</div>
<div class="faq">
<details class="card">
<summary>What is csslib?</summary>
<p>csslib is a home for free, open-source CSS projects. Each project is independent: use the visual studios in Atelier, drop Vektor.css into a page, or take just the parts you need.</p>
</details>
<details class="card">
<summary>Is everything free?</summary>
<p>Yes. Every project is released under the MIT License, with no sign-up and no paid tier.</p>
</details>
<details class="card">
<summary>Do I need a build step or framework?</summary>
<p>No. The studios run in your browser and export plain CSS, and the libraries are single stylesheets you link from any page.</p>
</details>
<details class="card">
<summary>What is coming next?</summary>
<p>More studios, libraries and experiments built on modern native CSS. Follow along on GitHub.</p>
</details>
</div>
</div>
</section>
<section class="section is-tight">
<div class="wrap">
<div class="cta-band">
<h2>Find the right project and start building.</h2>
<p>Design visually in Atelier or ship charts with Vektor.css. No account, no install.</p>
<div class="button-row">
<a class="button is-light" href="/site/atelier/">Open Atelier <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M3 8h10M9 4l4 4-4 4"/></svg></a>
<a class="button is-ghost-dark" href="/site/vektor/">Explore Vektor.css</a>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap">
<div class="footer-grid">
<div class="footer-about">
<a class="brand" href="/" aria-label="csslib home">
<span class="brand-tile"><svg viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M11.5 5.5c-2.6 0-3.8 1.3-3.8 3.9v3.4c0 1.6-.8 2.5-2.7 2.7v1c1.9.2 2.7 1.1 2.7 2.7v3.4c0 2.6 1.2 3.9 3.8 3.9" fill="none" stroke="#0d0f1a" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.5 5.5c2.6 0 3.8 1.3 3.8 3.9v3.4c0 1.6.8 2.5 2.7 2.7v1c-1.9.2-2.7 1.1-2.7 2.7v3.4c0 2.6-1.2 3.9-3.8 3.9" fill="none" stroke="#0d0f1a" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="16" cy="12.5" r="2.4" fill="#6366f1"/><circle cx="12.9" cy="18.4" r="2.4" fill="rgb(var(--kinetix-500-rgb))"/><circle cx="19.1" cy="18.4" r="2.4" fill="rgb(var(--specimen-500-rgb))"/></svg></span>
<span class="brand-text"><span class="brand-name">csslib</span><span class="brand-tagline">Open-source CSS projects</span></span>
</a>
<p>A growing collection of free, open-source CSS projects: visual studios, libraries and experiments that run in your browser and stay out of your build.</p>
</div>
<div class="footer-column">
<h2>Atelier</h2>
<ul>
<li><a href="/site/atelier/">All studios</a></li>
<li><a href="/site/atelier/studios/css-animation-generator/">Kinetix Studio</a></li>
<li><a href="/site/atelier/studios/css-gradient-generator/">ChromaFlow</a></li>
<li><a href="/site/atelier/studios/css-property-playground/">Specimen Lab</a></li>
<li><a href="/site/atelier/studios/css-layout-builder/">IntrinsicFlow</a></li>
</ul>
</div>
<div class="footer-column">
<h2>Vektor.css</h2>
<ul>
<li><a href="/site/vektor/">Documentation</a></li>
<li><a href="/site/vektor/#gallery">Chart gallery</a></li>
<li><a href="/vektor-1.0.0.css" download>Download v1.0.0</a></li>
</ul>
</div>
<div class="footer-column">
<h2>Learn</h2>
<ul>
<li><a href="/site/modern-css/">Modern CSS</a></li>
<li><a href="/site/resources/">CSS resources</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS" rel="noopener">MDN CSS docs</a></li>
<li><a href="https://drafts.csswg.org/" rel="noopener">CSS specifications</a></li>
</ul>
</div>
<div class="footer-column">
<h2>csslib</h2>
<ul>
<li><a href="/">All projects</a></li>
<li><a href="/site/about/">About</a></li>
<li><a href="https://github.com/monad-one" rel="noopener me">GitHub</a></li>
<li><a href="https://www.linkedin.com/in/abhishek-sengar" rel="noopener me">LinkedIn</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 Abhishek Sengar. All csslib projects are released under the <a href="/LICENSE">MIT License</a>.</span>
<span>Plain HTML and CSS, with a little JavaScript.</span>
</div>
</div>
</footer>
</body>
</html>