taurean.bryant.land
+71
-12
index.html
+71
-12
index.html
···
3
3
<head>
4
4
<meta charset="UTF-8" />
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
-
<title>Stylebase - Defaults Example</title>
6
+
<title>Stylebase.css</title>
7
7
<link rel="stylesheet" href="dist/stylebase.min.css" />
8
8
</head>
9
9
<body>
···
19
19
</nav>
20
20
</header>-->
21
21
<main class="l:root">
22
-
<h1>Default Examples</h1>
23
-
<div>
24
-
<hr />
25
-
</div>
26
-
<div>
27
-
<img
28
-
src="https://placehold.co/600x400"
29
-
alt="a 600 by 400 placeholder image. gray, with the text 600 x 400 inside"
30
-
/>
31
-
</div>
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>
32
92
</main>
33
-
<footer class="l:root"><a href="#top">back to top</a></footer>
34
93
</body>
35
94
</html>
+1
-1
package.json
+1
-1
package.json
···
38
38
"scripts": {
39
39
"build": "postcss stylebase/imports.css -o dist/stylebase.min.css",
40
40
"build:preview": "postcss stylebase/imports.css -o dist-preview/stylebase.css --no-map --env preview",
41
-
"dev": "browser-sync start --server --files 'stylebase/**/*.css,examples/*.html' --startPath '/'",
41
+
"dev": "browser-sync start --server --files 'stylebase/**/*.css,examples/*.html,index.html' --startPath '/'",
42
42
"release:patch": "git fetch gh && git pull gh main && npm version patch && npm run build && git add dist/ && git commit -m 'Build files' && git push gh main --tags && npm publish --access=public",
43
43
"release:minor": "git fetch gh && git pull gh main && npm version minor && npm run build && git add dist/ && git commit -m 'Build files' && git push gh main --tags && npm publish --access=public",
44
44
"release:major": "git fetch gh && git pull gh main && npm version major && npm run build && git add dist/ && git commit -m 'Build files' && git push gh main --tags && npm publish --access=public"