Getting Started

Preset and normalize global styles.

Normalizing browsers and presetting global styles make subsequent style programming neater.

Setup

Download

npm install @master/normal.css

Import into your global CSS file:

@import '@master/normal.css';

CDN

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.master.co/normal.css" rel="stylesheet">
</head>
</html>

Features

Here are some optimizations and presets made by @master/normal.css, the complete code is here.

If you want to stay lazy, you can use it without even knowing the behavior behind it!

Geometric precision rendering for prettier text

* {
text-rendering: geometricPrecision;
}

Antialiased font smoothing looks great

body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}

Standard CSS font variables and presets

:root {
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
--font-serif: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
}
body {
font-family: var(--font-sans);
}
code,
kbd,
samp {
font-family: var(--font-mono);
}

Remove margins and padding from certain elements

body,
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
button,
optgroup,
select,
textarea,
pre {
margin: 0;
}
td,
legend,
textarea,
input,
fieldset {
padding: 0;
}
ul,
ol {
margin: 0;
padding: 0;
}

Uniform box sizing calculation

*,
::before,
::after {
box-sizing: border-box;
}

Neutral typography and formatting

body {
line-height: 1.2;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-tab-size: 4;
tab-size: 4;
}
b,
strong {
font-weight: bolder;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
ul {
list-style: none;
}
hr {
height: 0;
color: inherit;
}

Preset some elements as block

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
}

© Aoyue Design LLC.
Issue on this page
Edited byAron