164 lines
5.5 KiB
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>
|
|
<!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.<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>
|