133 lines
4.5 KiB
HTML
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>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>My Site</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="normal.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Website content goes here. -->
|
|
</body>
|
|
</html>
|
|
</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>
|