taurean.bryant.land
A starter set of CSS files for building modular web components and layouts.
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Stylebase.css</title>
7 <link rel="stylesheet" href="dist/stylebase.min.css" />
8 </head>
9 <body>
10 <!--<header class="l:root l:repel" id="top">
11 <div><a href="index.html">Stylebase</a></div>
12 <nav>
13 <ul class="l:ui-list l:river">
14 <li><a href="index.html">defaults</a></li>
15 <li><a href="forms.html">forms</a></li>
16 <li><a href="text.html">text</a></li>
17 <li><a href="article.html">article</a></li>
18 </ul>
19 </nav>
20 </header>-->
21 <main class="l:root">
22 <article>
23 <h1>Stylebase.css</h1>
24 <ul class="l:ui-list l:river">
25 <li>
26 <a
27 href="https://www.npmjs.com/package/@taurean/stylebase"
28 rel="nofollow"
29 ><img
30 src="https://camo.githubusercontent.com/5d8918bfbb9148cc71d3210eba73cbbfd368f2182479736564c052c98ccc00d8/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f2534307461757265616e2532467374796c65626173653f7374796c653d666c61742d737175617265266c6f676f3d6e706d266c6f676f436f6c6f723d253233434233383337266c6162656c3d4e504d25323076657273696f6e253230253230253230253230266c6162656c436f6c6f723d253233454345424542"
31 alt="NPM Version"
32 data-canonical-src="https://img.shields.io/npm/v/%40taurean%2Fstylebase?style=flat-square&logo=npm&logoColor=%23CB3837&label=NPM%20version%20%20%20%20&labelColor=%23ECEBEB"
33 style="max-width: 100%"
34 /></a>
35 </li>
36 <li>
37 <a href="https://github.com/taurean/stylebase"
38 ><img
39 src="https://camo.githubusercontent.com/df748049417ecbda445f08361d0fb6524ace71648a086d20f95d2d347d765cf3/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f636f6d6d69742d61637469766974792f792f7461757265616e2f7374796c65626173653f7374796c653d666c61742d737175617265"
40 alt="GitHub commit activity"
41 data-canonical-src="https://img.shields.io/github/commit-activity/y/taurean/stylebase?style=flat-square"
42 style="max-width: 100%"
43 /></a>
44 </li>
45 <li>
46 <a href="https://github.com/taurean/stylebase"
47 ><img
48 src="https://camo.githubusercontent.com/c99cecfb6f38f6892a29c12dac3cef8135f74fb98fba50cf88e365d971021d0e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f7461757265616e2f7374796c65626173653f7374796c653d666c61742d737175617265"
49 alt="GitHub Repo stars"
50 data-canonical-src="https://img.shields.io/github/stars/taurean/stylebase?style=flat-square"
51 style="max-width: 100%"
52 /></a>
53 </li>
54 </ul>
55 <p>
56 A <em>hyper minimal</em> CSS foundation that provides just
57 enough. Fluid scales for typography and spacing, a color
58 palette, and a few layout patterns—to start building without
59 writing all the basics yourself.
60 </p>
61 <ol>
62 <li><code>npm i @taurean/stylebase</code></li>
63 <li><code>@import "@stylebase";</code></li>
64 <li>
65 read the <a href="#!">docs</a> / view
66 <a href="/examples/index.html">example styles</a>
67 </li>
68 </ol>
69 <!--<hr />
70 <h2>what's included</h2>
71 <ul>
72 <li>
73 <strong>Color system</strong>
74 with 11 OKLCH-based shades per hue with balanced chroma
75 values (via
76 <a
77 href="https://evilmartians.com/opensource/harmony"
78 target="_blank"
79 >Harmony</a
80 >)
81 </li>
82 <li>
83 <strong>fluid text size scale</strong> with sizes
84 dependent on viewport width (via
85 <a href="https://utopia.fyi" target="_blank">utopia</a>)
86 </li>
87 <li>
88 <strong>fluid spacing tokens</strong> also via Utopia
89 </li>
90 </ul>-->
91 </article>
92 </main>
93 </body>
94</html>