abtmtr-v4/views/projects/item/normalize/index.html

164 lines
5.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Normalize</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" />
<style>
:root {
--base-color: 0, 0%;
}
</style>
</head>
<body>
<header>
<section>
<h1>Normalize</h1>
</section>
</header>
<main>
<section>
<p>
Normalize is a simple CSS library made to provide good-looking yet
simple HTML element styles.
</p>
<p>
It supports theming, natural HTML semantics, document width limiting,
and more, all while trying to stay true to the HTML spec.
</p>
<p>
If you're interested, feel free to
<a href="/styles/normal.css">import it</a> or
<a href="/styles/normal.css" download>download it</a> for your site.
</p>
<h2>Usage</h2>
<p>To get started, it's recommended to use this boilerplate:</p>
<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;title&gt;My Site&lt;/title&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;normal.css&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- Website content goes here. --&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>
This is a good start for all Normalize-based pages. Make sure to use
good HTML practices.
</p>
</section>
<section>
<h2>Theming</h2>
<p>
If you want a custom style for your page, you can use a stylesheet
definition at the top of your page or in a stylesheet file.
</p>
<p>
In Normalize, the unit <code>em</code> is used for most values. You
should also use this unit when defining your custom styles.
</p>
<p>
Normalize supports the following properties in <code>:root</code>:
</p>
<ul>
<li>
<code>--base-scale</code> - The defining em-size of the document, in
anything but em.<br />
Format: <code>[size]px (pt, in, cm, etc...)</code>
</li>
<li>
<code>--document-width</code> - The width of the document.<br />
Format: <code>[size]em</code>.
</li>
<li>
<code>--base-color</code> - The basic color of the page, used for
all values below. You can use this for a quick, single-color
theme.<br />
Format: <code>[hue]deg, [saturation]%</code>. Lightness is handled
by Normalize.
</li>
<li><code>--font-family</code> - The font used in the document.</li>
<li>
<code>--font-weight</code> - The weight of the font used in the
document.
</li>
</ul>
<h3>Advanced Theming</h3>
<ul>
<li>
<code>--underlay-color</code> - The underlay color of the document.
</li>
<li><code>--background-color</code> - The page color.</li>
<li><code>--color</code> - The foreground color of the page.</li>
<li><code>--accent-color</code> - The accent color of the page.</li>
<li>
<code>--accent-color-bg</code> - The background-adjacent accent
color of the page.
</li>
<li>
<code>--accent-color-fg</code> - The foreground accent color of the
page.
</li>
<li>
<code>--border-width</code> - The width of the borders used on
certain elements. Format: <code>[width]em</code>
</li>
<li>
<code>--border-style</code> - The style of the borders used on
certain elements. Format: <code>[border-style]</code>
</li>
<li>
<code>--border-color</code> - The color of the borders used on
certain elements. Format: <code>[color]</code>
</li>
<li>
<code>--border-radius</code> - The radius of the borders used on
certain elements.<br />
Format: <code>[radius]em</code>
</li>
</ul>
<h3>Extra Theming</h3>
<p>Some more things you can do to style Normalize.</p>
<h4>Background Image</h4>
<pre>
:root {
background: url("/assets/image.jpg") repeat;
}</pre
>
<h4>Transparent (or translucent) background</h4>
<pre>
:root {
--background-color: hsla(var(--base-color), 15%, 0.25);
}</pre
>
</section>
<section>
<h2>Good Pairings</h2>
<p>
Just like a fine wine, Normalize can also be paired with different
libraries to make amazingly functional (yet lightweight!) webpages.
</p>
<h3><a href="https://htmx.org/">htmx</a></h3>
<p>
htmx is an HTML hypertext enhancer. It can be used to create powerful
websites, and replace JavaScript scripts with simple functions, all in
HTML.
</p>
<p>
It's an amazing Normalize pairing because it aims to improve the
spirit of HTML - just keeping it vanilla, but extending it in a way
that is infinitely useful.
</p>
<h3><a href="https://jquery.com/">jQuery</a></h3>
</section>
<section id="generator"></section>
</main>
<script src="./scripts/generator.js"></script>
</body>
</html>