New
Notebook
96 pages, grid. Paper wrapped in paper.
$12
prosto.css
A UI kit in the spirit of fuckingwebsite.ru (“prosto” is Russian for “simply”): black text on a white background, the system font, borders instead of shadows. Fits a blog, a portal, an online store, or anything else — because boring CSS is CSS that works.
… KB · … lines · 0 dependencies · 0 popups · 1 file
00 · Principles
Principles of the kit
- Black text on a white background. Contrast beats taste.
- The system font. It is already installed — no megabytes to download.
- Links look like links. Buttons look like buttons. Always.
- Native HTML first:
<details>,<select>,<input type="range">, scroll snap. JavaScript only where the platform cannot. - No popups, cookie banners, or chat bubbles.
- No autoplay, parallax, or “wow” animations.
- No shadows, gradients, or rounded corners. A border is a border.
- One accent: inversion. Hover, and black becomes white.
- Works everywhere. Fast. And tomorrow, too.
01 · Typography
Typography
Heading H1
Heading H2
Heading H3
A normal paragraph with a link,
some inline code and one important word.
Hover the link — it inverts. That is the entire “design”.
- A list is just a list
- No custom bullets
- No icons
A good website is like a good door: it opens, it closes, it does not squeak.
The line above is an <hr>. A thick rule. That is all.
03 · Forms
Forms
A live form: try submitting it empty. Errors are text under the field — no popups, no shaking. Nothing is actually sent; this is a demo.
Sent.
Actually no — it is a demo. But note what you did not see: no popup, no “thank you, our manager will contact you”.
04 · Tables
Tables
A price list. Numbers are tabular, so prices do not wobble.
| Item | Qty | Price |
|---|---|---|
| Notebook, 96 pages | 2 | $24 |
| White mug | 1 | $19 |
| Fountain pen | 1 | $59 |
| Total | 4 | $102 |
05 · Catalog
Catalog with a filter sidebar
The sidebar is plain HTML forms: checkboxes, a range input, a select. They genuinely filter and sort the grid below — no reload, no spinner, because there is nothing to load.
Bestseller
Mug
White. Tea goes in it.
$19
−20%
$74 $59
Fountain pen
It writes. Ink included, even.
Sticky notes
For TODO lists nobody will read.
$7
Desk lamp
Turns darkness into less darkness.
$44
Pencil set
Twelve pencils. Zero sharpener, as tradition demands.
$16
New
Water bottle
Holds water. Does not lecture you about it.
$27
Backpack
Fits a laptop and unrealistic plans.
$95
Nothing matches the filters. The store will not show you “similar products” — you asked for this.
06 · Dropdowns
Dropdown menus
Two honest ways. The first is a <details> disclosure widget —
the browser gives it to you for free. The one in the header works the same way.
Click elsewhere or press Esc to close it (six lines of JS;
zero if you do not care).
The second is <select>: the most underrated component on the web.
Native everywhere, trusted by everyone, loved by no designer — which is how you
know it works.
Open menu
07 · Accordion
Accordion
Every item is a native <details> / <summary> pair.
No JavaScript. No ARIA state to maintain. It was an accordion all along —
the triangle is the browser’s own marker, kept as-is.
Why does the accordion use details?
Because <details> is an accordion. The browsers shipped it
years ago. It works without JavaScript, without CSS, and without a 40 KB
component library.
Is there a dark mode?
Yes. Turn your monitor off.
Where are the icons?
Where they should have been all along: nowhere.
Can I run a real store on this?
The catalog above filters, sorts and counts a cart. That is 80% of a store. The other 20% is paperwork.
How much does the kit weigh?
Scroll to the bottom: this page weighs its own CSS and tells you the number. Live. It has nothing to hide.
08 · Slider
Slider
The slider is an <input type="range"> wearing a plain shirt.
Drag it, or use the arrow buttons. There is no autoplay: nothing moves
unless you move it.
09 · Carousel
Carousel
overflow-x: auto plus scroll-snap-type: x mandatory.
That is the whole trick. Scroll it, drag it, use arrow keys, plug in a mouse
from 2004 — it all works, because it is just scrolling. The buttons below
call scrollBy(), and the scrollbar is visible on purpose.
Desk essentials, $2–9
$3
$4
$2
$9
$2
$5
10 · Comments
Comments
A sample blog post and its thread. Replies are just nested lists; avatars are 48-pixel squares with borders. The form below actually works: it validates and prepends your comment to the list. No reload, no “posting…” spinner — there is no server.
Why this site has no popups
Journal · June 2 · 4 min read
Because a popup is a request to stop reading what the visitor came for and start reading what the visitor did not ask about. We decline to ask.
This article has no related-articles widget, no newsletter trap and no “wait, before you go”. It has an ending. You are reading it.
Comments (3)
11 · Notices
Notices
A border and text. Errors get a red border — and that is all.
Order #1042 has shipped.
It will arrive on Wednesday. Probably. The post is the post.
Success.
Form sucessfully sended.
Info.
A required field is filled. But form dont sended.
Error.
Same fields are empty.
Error.
A required field is empty. The field is highlighted red. You will survive.
12 · Grid
Grid
Plain CSS Grid: .grid with .cols-2 / .cols-3 / .cols-4,
spanning via .span-2 / .span-3. On narrow screens the columns
collapse honestly into one.
1
2
3
4
1
.span-2
13 · Pagination
Pagination & small print
Pagination is an <ol> of links. aria-current="page"
marks where you are. No infinite scroll — you always know where the bottom is.
Click around:
Include the whole kit with one line:
<link rel="stylesheet" href="prosto.css">Press Ctrl + S to save this page. It keeps working offline, which is the least a web page can do.
14 · Full CSS
The entire kit
Below is the whole prosto.css, first line to last. This is not a copy:
the source is read live from this page, and the stats are measured, not typed.
…
Finally, a stylesheet that loads faster than the thought “I should close this tab”.
And the accordion is literally
<details>. I checked the source. It is just<details>. I need to sit down.Ran a store on this for a month. Sales up, support tickets down. The old cookie banner, it turns out, was a hostage situation.