348 lines
9.9 KiB
HTML
348 lines
9.9 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>
|
||
|
|
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--base-scale: 16px;
|
||
|
|
|
||
|
|
--background-color: hsl(0, 0%, 15%);
|
||
|
|
--color: hsl(0, 0%, 85%);
|
||
|
|
--accent-color: #808080;
|
||
|
|
--accent-color-fg: hsl(0, 0%, 95%);
|
||
|
|
--font-family: "Lexend Deca";
|
||
|
|
--document-width: 40em;
|
||
|
|
|
||
|
|
--border-style: 0.0625em solid var(--color);
|
||
|
|
}
|
||
|
|
</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>
|
||
|
|
<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> - should be a <code>px</code> or
|
||
|
|
<code>pt</code> value. This is the em-scale for the entire page.
|
||
|
|
Therefore,
|
||
|
|
<b>you should not use <code>em</code> for this property!</b>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<code>--document-width</code> - The width of the whole document.</b>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<code>--background-color</code> - The background color of the page.</b>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<code>--color</code> - The text color of the page. Should contrast well with <code>--background-color</code>.</b>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<code>--accent-color</code> - The main color of interactive elements, such as <code><button></code> or <code><input type="checkbox" /></code>.</b>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<code>--accent-color-fg</code> - The secondary color of interactive elements. Should contrast well with <code>--accent-color</code>.</b>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<code>--font-family</code> - The font that the document will use.</b>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<code>--font-weight</code> - The font weight that the document will use.</b>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<code>--border-style</code> - The border style of special elements, such as <code><fieldset></code> or <code><input></code>.</b>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<code>--border-radius</code> - The roundness of special elements.</b>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<h3>Example styles</h3>
|
||
|
|
<pre>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--base-scale: 14px;
|
||
|
|
--document-width: 40em;
|
||
|
|
|
||
|
|
--background-color: #111;
|
||
|
|
--color: #0F0;
|
||
|
|
|
||
|
|
--accent-color: #0f0;
|
||
|
|
--accent-color-fg: #111;
|
||
|
|
|
||
|
|
--font-family: monospace;
|
||
|
|
|
||
|
|
--border-style: 0.0625em solid var(--color);
|
||
|
|
--border-radius: 0 0 0.5em 0;
|
||
|
|
}
|
||
|
|
</style></pre
|
||
|
|
>
|
||
|
|
<iframe srcdoc="
|
||
|
|
<!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-scale: 14px;
|
||
|
|
--document-width: 40em;
|
||
|
|
|
||
|
|
--background-color: #111;
|
||
|
|
--color: #0F0;
|
||
|
|
|
||
|
|
--accent-color: #0f0;
|
||
|
|
--accent-color-fg: #111;
|
||
|
|
|
||
|
|
--font-family: monospace;
|
||
|
|
|
||
|
|
--border-style: 0.0625em solid var(--color);
|
||
|
|
--border-radius: 0 0 0.5em 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>The Hecker Den</h1>
|
||
|
|
<p>pwn'd Normalize</p>
|
||
|
|
<button>Heck the Bank</button>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
" loading="lazy"></iframe>
|
||
|
|
<pre>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--base-scale: 18px;
|
||
|
|
--document-width: 40em;
|
||
|
|
|
||
|
|
--background-color: #fed;
|
||
|
|
--color: #000;
|
||
|
|
|
||
|
|
--accent-color: transparent;
|
||
|
|
--accent-color-fg: #000;
|
||
|
|
|
||
|
|
--font-family: cursive;
|
||
|
|
|
||
|
|
--border-style: 0.1em solid var(--color);
|
||
|
|
--border-radius: 2em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</pre>
|
||
|
|
<iframe srcdoc="
|
||
|
|
<!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-scale: 18px;
|
||
|
|
--document-width: 40em;
|
||
|
|
|
||
|
|
--background-color: #fed;
|
||
|
|
--color: #000;
|
||
|
|
|
||
|
|
--accent-color: transparent;
|
||
|
|
--accent-color-fg: #000;
|
||
|
|
|
||
|
|
--font-family: cursive;
|
||
|
|
|
||
|
|
--border-style: 0.1em solid var(--color);
|
||
|
|
--border-radius: 2em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>And as such, a test is born.</h1>
|
||
|
|
<p>Greetings, Normalize!</p>
|
||
|
|
<button>Wee snaw</button>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
" loading="lazy"></iframe>
|
||
|
|
<pre>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--base-scale: 1rem;
|
||
|
|
--document-width: 100%;
|
||
|
|
|
||
|
|
--background-color: #fff;
|
||
|
|
--color: #000;
|
||
|
|
|
||
|
|
--accent-color: #808080;
|
||
|
|
--accent-color-fg: #fff;
|
||
|
|
|
||
|
|
--font-family: serif;
|
||
|
|
|
||
|
|
--border-style: 0.125em solid var(--color);
|
||
|
|
--border-radius: 0.25em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</pre>
|
||
|
|
<iframe srcdoc="
|
||
|
|
<!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-scale: 1rem;
|
||
|
|
--document-width: 100%;
|
||
|
|
|
||
|
|
--background-color: #fff;
|
||
|
|
--color: #000;
|
||
|
|
|
||
|
|
--accent-color: #808080;
|
||
|
|
--accent-color-fg: #fff;
|
||
|
|
|
||
|
|
--font-family: serif;
|
||
|
|
|
||
|
|
--border-style: 0.125em solid var(--color);
|
||
|
|
--border-radius: 0.25em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>my first website</h1>
|
||
|
|
<p>1337 normalize</p>
|
||
|
|
<button>Wee snaw</button>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
" loading="lazy"></iframe>
|
||
|
|
<pre>
|
||
|
|
<style>
|
||
|
|
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
|
||
|
|
:root {
|
||
|
|
--base-scale: 32px;
|
||
|
|
--document-width: 100%;
|
||
|
|
|
||
|
|
--background-color: #fff;
|
||
|
|
--color: #000;
|
||
|
|
|
||
|
|
--accent-color: #000;
|
||
|
|
--accent-color-fg: #fff;
|
||
|
|
|
||
|
|
--font-family: "Lexend Deca";
|
||
|
|
|
||
|
|
--border-style: 0.25em solid var(--accent-color);
|
||
|
|
--border-radius: 2em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</pre>
|
||
|
|
<iframe srcdoc="
|
||
|
|
<!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>
|
||
|
|
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
|
||
|
|
:root {
|
||
|
|
--base-scale: 32px;
|
||
|
|
--document-width: 100%;
|
||
|
|
|
||
|
|
--background-color: #fff;
|
||
|
|
--color: #000;
|
||
|
|
|
||
|
|
--accent-color: #000;
|
||
|
|
--accent-color-fg: #fff;
|
||
|
|
|
||
|
|
--font-family: "Lexend Deca";
|
||
|
|
|
||
|
|
--border-style: 0.25em solid var(--accent-color);
|
||
|
|
--border-radius: 2em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>National Association of the Visually Impaired</h1>
|
||
|
|
<p>Bonjour, Normalize!</p>
|
||
|
|
<button>Wee snaw</button>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
" loading="lazy"></iframe>
|
||
|
|
<h2>Keeping it Simple</h2>
|
||
|
|
<p>If you want to keep it simple, simply apply the <code>.base</code> class to <code>html</code>.</p>
|
||
|
|
<p>This will override all custom styles, making it great for accessibility.</p>
|
||
|
|
<iframe srcdoc="
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html class="base">
|
||
|
|
<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" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Just a Website</h1>
|
||
|
|
<p>Nothing to see here.</p>
|
||
|
|
<button>Wee snaw</button>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
" loading="lazy"></iframe>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
<script src="/scripts/accessibility.js"></script>
|
||
|
|
<script src="/scripts/interface.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|