Skip to content

Commit a989307

Browse files
taureantaurean
committed
Update index.html to showcase Stylebase.css project
1 parent 5501f30 commit a989307

File tree

2 files changed

+72
-13
lines changed

2 files changed

+72
-13
lines changed

‎index.html‎

Lines changed: 71 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Stylebase - Defaults Example</title>
6+
<title>Stylebase.css</title>
77
<link rel="stylesheet" href="dist/stylebase.min.css" />
88
</head>
99
<body>
@@ -19,17 +19,76 @@
1919
</nav>
2020
</header>-->
2121
<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&amp;logo=npm&amp;logoColor=%23CB3837&amp;label=NPM%20version%20%20%20%20&amp;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>
3292
</main>
33-
<footer class="l:root"><a href="#top">back to top</a></footer>
3493
</body>
3594
</html>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"scripts": {
3939
"build": "postcss stylebase/imports.css -o dist/stylebase.min.css",
4040
"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 '/'",
4242
"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",
4343
"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",
4444
"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"

0 commit comments

Comments
 (0)