abtmtr-v4/views/projects/item/normalize/index.html
2023-12-21 00:23:50 -06:00

133 lines
4.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" />
<link rel="stylesheet" href="/styles/style.css" />
<style>
:root {
--base-color: 0, 0%;
}
</style>
</head>
<body>
<header>
<section>
<h1>Normalize</h1>
</section>
<section id="accessibility" hidden></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.
</li>
<li>
<code>--document-width</code> - The width of the document, in em.
</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.
</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-fg</code> - The foreground accent color of the
page.
</li>
<li>
<code>--border-style</code> - The style of the borders used on
certain elements.
</li>
<li>
<code>--border-radius</code> - The radius of the borders used on
certain elements.
</li>
</ul>
</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>
</section>
</main>
<script src="/scripts/accessibility.js"></script>
<script src="/scripts/interface.js"></script>
</body>
</html>