-
-
Notifications
You must be signed in to change notification settings - Fork 41
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
59 changed files
with
2,948 additions
and
950 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,222 +1,25 @@ | ||
## Using official package [sr-only] | ||
## Use official package [sr-only] | ||
The official [Normal CSS](https://github.com/master-co/normal.css) is a **~600B** lightweight CSS package, is similar to [modern-normalize](https://github.com/sindresorhus/modern-normalize) and [normalize.css](https://github.com/necolas/normalize.css) you are familiar with but better: | ||
|
||
- [Consistency](#consistency): Keep element styles consistent across browsers. | ||
- [Elimination](#elimination): Remove browser default styles for a better start. | ||
- [Improvement](#improvement): Support responsive media and better text rendering. | ||
- Keep element styles consistent across browsers. | ||
- Remove browser default styles for a better start. | ||
- Support responsive media and better text rendering. | ||
- [and more...](/reference/normal-css#consistency) | ||
|
||
`npm install @master/normal.css` and import it in your global CSS file: | ||
Just import it into a global CSS file. | ||
```css | ||
@import '@master/normal.css'; | ||
``` | ||
<details> | ||
<summary>Paste the CDN or import on-demand through modularization.</summary> | ||
<div> | ||
```html | ||
<link href="https://cdn.master.co/normal.css" rel="stylesheet"> | ||
``` | ||
Or import on-demand: | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/src/index.css').default.replace(/(..\/)\b/g, '@master/normal.css/')} | ||
</Code> | ||
</div> | ||
</details> | ||
|
||
--- | ||
|
||
## Consistency | ||
### Consistent abbreviation styles | ||
Fixed the inconsistent appearance of `html <abbr>` across browsers. | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/consistent-abbreviation-styles.css').default} | ||
</Code> | ||
|
||
### Consistent control styles | ||
Fixed the inconsistent appearance of controls across browsers. | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/consistent-control-styles.css').default} | ||
</Code> | ||
|
||
### Consistent horizontal lines | ||
Fixed the inconsistent appearance of horizontal lines across browsers. | ||
<Demo $py={0}> | ||
<DemoPanel className="grid-cols:2 gap:8x gap:12x@sm w:full"> | ||
<div> | ||
<small>Before</small> | ||
<hr className="mt:20! mb:0! {all:revert}" /> | ||
</div> | ||
<div> | ||
<small>After</small> | ||
<hr className="mt:20! mb:0! border-color:inherit!" /> | ||
</div> | ||
</DemoPanel> | ||
</Demo> | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/consistent-horizontal-lines.css').default} | ||
</Code> | ||
|
||
### Consistent bold styles | ||
Fixed the inconsistent font weight of `html <b>` and `html <strong>` across browsers. | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/consistent-bold-styles.css').default} | ||
</Code> | ||
|
||
### Consistent code styles | ||
Fixed the inconsistent font size of code-related elements across browsers. | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/consistent-code-styles.css').default} | ||
</Code> | ||
|
||
### Consistent small styles | ||
Fixed the inconsistent font size of `html <small>` across browsers. | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/consistent-small-styles.css').default} | ||
</Code> | ||
|
||
### Consistent superscript and subscript styles | ||
Fixed the inconsistent appearance of superscripts and subscripts across browsers. | ||
<Demo $py={0}> | ||
<DemoPanel> | ||
<p className="my:0">This paragraph contains a <sub>subscript</sub> and a <sup>superscript</sup>.</p> | ||
</DemoPanel> | ||
</Demo> | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/consistent-superscript-subscript.css').default} | ||
</Code> | ||
|
||
### Consistent table styles | ||
Fixed the inconsistent appearance of tables across browsers. | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/consistent-table-styles.css').default} | ||
</Code> | ||
|
||
### Intuitive sizing control | ||
Control the size of elements more intuitively, including content and padding, without worrying about the impact of padding and borders on dimensions. | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/intuitive-sizing-control.css').default} | ||
</Code> | ||
|
||
--- | ||
|
||
## Elimination | ||
### Remove anchor styles | ||
The `html <a>` element usually serves as more than just an inline text link; it could be a button, navigation, or even a card. | ||
|
||
Removing its default underline and inheriting the parent color allows you to start with a clean style. | ||
<Demo $py={0}> | ||
<DemoPanel className="grid-cols:2 gap:8x gap:12x@sm"> | ||
<div> | ||
<small>Before</small> | ||
<a href="#" className="mt:10 block text:underline fg:revert">Learn more</a> | ||
</div> | ||
<div> | ||
<small>After</small> | ||
<a href="#" className="mt:10 block">Learn more</a> | ||
</div> | ||
</DemoPanel> | ||
</Demo> | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/remove-anchor-styles.css').default} | ||
</Code> | ||
|
||
### Remove control styles | ||
Inherit the font family, size, and color of control elements from the parent's settings and remove spacing and background as a cleaner starting point. | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/remove-control-styles.css').default} | ||
</Code> | ||
|
||
### Remove default borders and preset to solid style | ||
Remove borders from all elements to give you the freedom to fully customize the appearance of your elements, preset to the most used solid style. | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/remove-default-borders.css').default} | ||
</Code> | ||
|
||
### Remove default spacing | ||
Setting margins and padding to zero allows you to customize the appearance and spacing of elements without worrying about the impact of default browser styles. | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/remove-default-spacing.css').default} | ||
</Code> | ||
|
||
### Remove list styles | ||
Remove the `ul` styles while retaining it as a commonly used structural markup for elements like the navbar and menu. | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/remove-list-styles.css').default} | ||
</Code> | ||
|
||
### Remove tap highlight color | ||
You should customize the tap highlight color based on current UI features rather than relying on the default. | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/remove-tap-highlight.css').default} | ||
</Code> | ||
The `-webkit-tap-highlight-color` CSS property controls the highlight color that appears when an element is tapped on a mobile device, such as Safari and some WebKit-based mobile browsers. | ||
|
||
### Eliminate click delays | ||
Disable double-click to zoom on links, input fields, and buttons to improve responsiveness for touch devices. | ||
<figure> | ||
<iframe className="aspect:16/9 w:full" src="https://www.youtube.com/embed/AjUpiwvIa5A?si=qatiz-LszvYqE15c&controls=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe> | ||
<figcaption>[300ms tap delay, gone away](https://developer.chrome.com/blog/300ms-tap-delay-gone-away)</figcaption> | ||
</figure> | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/eliminate-click-delays.css').default} | ||
</Code> | ||
An instantly responsive UI enables users to confidently press each button without pausing and waiting for a response. To learn more about the influence of human reaction times and web performance, explore the [introduction to RAIL](https://web.dev/articles/rail). | ||
|
||
(x) Disabling `user-scalable=no` can harm user experience, accessibility, and mobile-friendliness and have negative SEO implications. | ||
```html | ||
<meta name="viewport" content="width=device-width, **user-scalable=no**"> | ||
``` | ||
|
||
--- | ||
|
||
## Improvement | ||
### Better text rendering and appearance | ||
Ensure consistent, clear, high-quality text and font appearance across various browsers. | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/better-text-appearance.css').default} | ||
</Code> | ||
|
||
### Readable tab size | ||
Setting the tab size to 4 makes the code more structured and easier to read. | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/readable-tab-size.css').default} | ||
</Code> | ||
|
||
### Responsive friendly media elements | ||
Preset the maximum width of media-related elements to the parent container to make them responsive. | ||
<Demo> | ||
<div className="grid-cols:2 gap:20"> | ||
<div> | ||
<small>Before</small> | ||
<div className="mt:10 b:1|crimson-40 square overflow:hidden"> | ||
<Image src={require('~/site/public/images/chicken.png').default} width={500} height={500} alt="No responsive image" className="max-w:none" /> | ||
</div> | ||
</div> | ||
<div> | ||
<small>After</small> | ||
<div className="mt:10 b:1|green-40 square"> | ||
<Image src={require('~/site/public/images/chicken.png').default} width={500} height={500} alt="Responsive image" /> | ||
</div> | ||
</div> | ||
</div> | ||
</Demo> | ||
<Code lang="css"> | ||
{require('!!raw-loader!@master/normal.css/responsive-media-elements.css').default} | ||
</Code> | ||
Browsers default these elements to `inline` display. `block` can be centered using common tricks like `margin: auto`. | ||
|
||
For media that needs to overflow the container, you can cancel the maximum width by selecting descendants: | ||
```html | ||
<article class="**max-w:none_:where(img)**">…</article> | ||
``` | ||
|
||
--- | ||
|
||
## Using syntax | ||
### Stylizing descendant elements | ||
## Style descendant elements | ||
Customize your fonts, foreground color, etc., add syntax in `html <body class="…">` and rely on native inheritance behavior or use CSS selectors to preset global styles. | ||
|
||
(o) Use zero [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) `css :where()` to select elements and preset styles. | ||
```html | ||
<body class="font:sans **font:mono_:where(code,pre)**">…</body> | ||
``` | ||
Otherwise, you risk falling into `css !important` hell with `css :is()` and `css _` descendant selectors. | ||
Otherwise, you risk falling into `css !important` hell with `css :is()` and `css _` descendant selectors. | ||
|
||
You can also add `@preset` to lower it to the preset layer to make it even lower in priority. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.