+ Normalize is a simple CSS library made to provide good-looking + yet simple HTML element styles. +
++ It supports theming, natural HTML semantics, document width limiting, + and more, all while trying to stay true to the HTML spec. +
++ If you're interested, feel free to + import it or + download it for your site. +
+Usage
+To get started, it's recommended to use this boilerplate:
++<!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> ++
+ This is a good start for all Normalize-based pages. Make sure to use + good HTML practices. +
+Theming
++ 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. +
+In Normalize, the unit em
is used for most values. You should also use this unit when defining your custom styles.
+ Normalize supports the following properties in :root
:
+
-
+
-
+
--base-scale
- should be apx
or +pt
value. This is the em-scale for the entire page. + Therefore, + you should not useem
for this property! +
+ -
+
--document-width
- The width of the whole document. +
+ -
+
--background-color
- The background color of the page. +
+ -
+
--color
- The text color of the page. Should contrast well with--background-color
. +
+ -
+
--accent-color
- The main color of interactive elements, such as<button>
or<input type="checkbox" />
. +
+ -
+
--accent-color-fg
- The secondary color of interactive elements. Should contrast well with--accent-color
. +
+ -
+
--font-family
- The font that the document will use. +
+ -
+
--font-weight
- The font weight that the document will use. +
+ -
+
--border-style
- The border style of special elements, such as<fieldset>
or<input>
. +
+ -
+
--border-radius
- The roundness of special elements. +
+
Example styles
++<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>+ +
+<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> ++ +
+<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> ++ +
+<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> ++ +
Keeping it Simple
+If you want to keep it simple, simply apply the .base
class to html
.
This will override all custom styles, making it great for accessibility.
+ +