https://github.com/lgarron/minimal-html-style
✨ An HTML style snippet that looks nice on all devices while being as small as possible.
https://github.com/lgarron/minimal-html-style
css dark-mode responsive
Last synced: 5 months ago
JSON representation
✨ An HTML style snippet that looks nice on all devices while being as small as possible.
- Host: GitHub
- URL: https://github.com/lgarron/minimal-html-style
- Owner: lgarron
- License: unlicense
- Created: 2022-11-16T05:36:59.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-18T07:22:35.000Z (7 months ago)
- Last Synced: 2025-01-28T09:55:34.352Z (6 months ago)
- Topics: css, dark-mode, responsive
- Language: HTML
- Homepage:
- Size: 2.38 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Minimal HTML ``
An HTML style snippet that looks nice on all devices while being as small as possible.
## Snippet
Place in the `<head>` of a page:
```html
<!-- From: https://github.com/lgarron/minimal-html-style (v1.0.0) -->
<meta name="viewport" content="width=device-width, initial-scale=0.75">
<style>
:root { color-scheme: light dark; }
html {
font-family: -apple-system, Roboto, Ubuntu, Tahoma, sans-serif;
font-size: 1.25rem; padding: 2em;
display: grid; justify-content: center;
}
body { width: 100%; max-width: 40em; margin: 0; }
```
See [`index.html`](./index.html) for more.
## Explanation
The snippet makes these opinionated choice:
- **Sans-serif font** — for less-cluttered screen display.
- **Slightly larger font** — for easier reading, especially for pages with very few (even one) line of text.
- **Horizontally centered text** — for visual balance.
- **Limited column width** — for easier reading and scanning on large screens, automatically adjusting ("responsive") to fill smaller screens.
- **Dark mode** — with corresponding text and link color fixes.
- **Mobile viewport scaling** — to prevent very small text size on mobile screens.
Excluded choices:
- No **vertical centering** — this can interfere with other CSS too easily.
- No **general resets** — this is not a CSS framework, just a way to spruce up pages that you want put together in a minute and move on.
## Additional changes you might like
### Justify the text column
```css
body {
text-align: justify;
}
```
Also see: [`text-wrap: balance`](https://developer.chrome.com/docs/css-ui/css-text-wrap-balance).
### Fully center the body
```css
html {
min-height: 100%;
place-content: center;
box-sizing: border-box;
}
```
## Screenshots
### iOS
### Android
### Laptop
### Large screen (5K)
### Narrow window
