Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jeffkreeftmeijer/enough.css
enough.css is a tiny CSS style sheet with most of the styling you'll need for that blog of yours.
https://github.com/jeffkreeftmeijer/enough.css
Last synced: 5 days ago
JSON representation
enough.css is a tiny CSS style sheet with most of the styling you'll need for that blog of yours.
- Host: GitHub
- URL: https://github.com/jeffkreeftmeijer/enough.css
- Owner: jeffkreeftmeijer
- License: mit
- Created: 2017-09-24T17:58:59.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2024-05-14T17:36:03.000Z (7 months ago)
- Last Synced: 2024-10-20T02:44:00.823Z (about 2 months ago)
- Language: HTML
- Homepage: https://jeffkreeftmeijer.github.io/enough.css/
- Size: 1.26 MB
- Stars: 52
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-small-web-stuff - Enough.css - Readable, responsive, enough. (CSS)
README
# enough.css
enough.css is a tiny CSS framework with most of the styling you need for that blog of yours.
> Websites aren't broken by default, they are functional, high-performing, and accessible. You break them.
— [http://motherfuckingwebsite.com](http://motherfuckingwebsite.com)
The base stylesheet is **183 bytes** minified.
It comes with optional modules to (minimally) style code blocks and tables.
It's responsive by default, but has a module to decrease font sizes on smaller screens for extra responsiveness.
The whole package is **478 bytes** minified.
[](https://jeffkreeftmeijer.github.io/enough.css/)
It's an experiment to see how little CSS a blog can get away with while still looking good and being readable on big and small screens.
It styles pages without having to add extra markup like wrapper `
`s and CSS classes.
Besides the base style sheet, it comes with modules for styling specific tags.
These are included in `enough.min.css` by default, but you can build your own to save some bytes if your project doesn't need everything.
Some of the rules are duplicated across modules so they don't depend on each other, but [cssnano](https://cssnano.co) takes them out when minifying.
## enough.css
- Increases the font size to 22px
- Uses `system-ui` if available, or falls back to a sans-serif font
- Uses a 1.6em `line-height`
- Makes the body 35em wide with 1em left- and right paddings, and centers it
- Adds a 100% `max-width` to images and videos, so they can't overflow.
- Sets image height to `auto` to resize proportionally when width and height are set
## enough.code.css
- Uses a `smaller` font-size in `
` tags
- Uses `ui-monospace` (which is SF Mono on [Safari ≥ 13.1](https://caniuse.com/extended-system-fonts)), `SFMono-Regular` (SF Mono on Chrome) or Monaco as the font in ``, ``, and `` tags, or falls back to the system's monospace font
- Adds an overflow to `` tags so long lines show horizontal scroll bars
- Adds a 1em padding to `` tags
- Adds a `ghostwhite` background color to `` tags
## enough.media.css
| Maximum viewport width | Body font size | Max. viewport calculation |
|------------------------|----------------|---------------------------|
| 1140px | 20px | (35em + 2em) × 22px × 1.4 |
| 740px | 18px | (35em + 2em) × 20px |
| 466px | 16px | (35em + 2em) × 18px × 0.7 |
## enough.table.css
- Adds a 100% `width` to tables.
- Uses a 0.5em padding in table cells
- Adds collapsed, 1px borders
## enough.min.css
```
$ npm install
$ cat enough.css enough.media.css enough.code.css enough.table.css | node_modules/.bin/cssnano > enough.min.css
```
---
- [Interactive Demo™](https://jeffkreeftmeijer.github.io/enough.css)
- [Code](https://github.com/jeffkreeftmeijer/enough.css)