Feed

Level 3, a shell, and the smallest file in the system: 12 lines and 8 declarations, one class name, one declaration that paints anything. It stands on 105 painted screens, more than any other organism, and there is almost nothing left in it. That is the point of this page.

105 placements 8 declarations 1 class 1 role read

The shell, with a screen in it

feed.css declares ONE class and the shell is all it is: a column, a gutter and a maximum. That is why the count under it is 630 and the component is one rule: what fills the shell belongs to the card, the plate, the rail and the head, and the shell decides only where the column stops. It had no specimen at all until 2026-08-09, which for a container is the worst case of the lot: a container with nothing in it is invisible.

Vault, dark
Your USDC is held 1:1 We never lend it. Withdraw anytime.
1,284 events resolved against a named source Every outcome is public and verifiable.

Trending

Sort: Trending
How often: Any

How betting works here

Yonder turns the events you follow into a real stake. Pick an event, read the odds in plain language, and back YES or NO. You see the current odds, a one-line why, and how the event resolves before you put in a cent. The minimum bet is one dollar, and you can browse and build your bet before you connect a wallet.

Why the odds move

The odds are a live price set by what people bet, not a fixed quote. When more money backs YES, YES costs more and NO costs less. Your payout depends on the odds at the moment you bet, not only on the outcome, so reading an event early and being right is worth more.

Common questions

Do I need crypto to start?
No. You can browse events and build a bet with no wallet. You add funds by card or crypto only when you confirm.
What is the smallest bet?
One dollar. The default is five.
How does an event resolve?
Each event states its resolution rule up front. The team resolves it against the real-world outcome, and you can see the record of resolved events.
Daylight, light
Your USDC is held 1:1 We never lend it. Withdraw anytime.
1,284 events resolved against a named source Every outcome is public and verifiable.

Trending

Sort: Trending
How often: Any

How betting works here

Yonder turns the events you follow into a real stake. Pick an event, read the odds in plain language, and back YES or NO. You see the current odds, a one-line why, and how the event resolves before you put in a cent. The minimum bet is one dollar, and you can browse and build your bet before you connect a wallet.

Why the odds move

The odds are a live price set by what people bet, not a fixed quote. When more money backs YES, YES costs more and NO costs less. Your payout depends on the odds at the moment you bet, not only on the outcome, so reading an event early and being right is worth more.

Common questions

Do I need crypto to start?
No. You can browse events and build a bet with no wallet. You add funds by card or crypto only when you confirm.
What is the smallest bet?
One dollar. The default is five.
How does an event resolve?
Each event states its resolution rule up front. The team resolves it against the real-world outcome, and you can see the record of resolved events.

The odds bars in the cell are written by hand and are written by a machine in the product. A page script reads .prob-line .prob, builds the bar, hides the line and inserts it before .yesno, skipping any card that holds .options because one bar cannot say three probabilities. A stand does not run the product's scripts, so it writes what the browser renders, exactly as the card's own page does. 18 of them here.

Every card in the cell links the event it is about, and 112 hrefs on this page are the screens' own, re-rooted to ../ui-visual/. A feed whose cards go nowhere is not a feed, so href="#" was the wrong answer here more than anywhere: the href is the datum that says which event the card is. Verbatim, 70 of them resolved 200 to ui-kit/event-detail.html, the stand's own component page, which is worse than the 42 that resolved to nothing, because a mis-target looks like it worked. The name after the prefix is untouched, and the prefix names the folder the screens are in.

What an emptied shell looks like when it has been emptied correctly

Every browse screen's main element is <main class="feed">, and this file declares one thing about it. Everything a person can see on a browse screen comes from somewhere else, and this page is the list of where.

what a browse screen is made ofwhose file
the two-column shell and the gutterspatterns/browse-shell.css
the card grid and how it reflowspatterns/card-grid.css
the plate the whole thing stands onbase.css, with the page frame
the category band and the sub-category railcategory nav
the featured blockhero
the cardscard
the prose at the footSEO plate
the row that fetches moreload more
the chart's grid line, which used to be herechart
the main element's own text colourthis file

The last row is the whole component. A shell that has given up everything it does not own ends as one declaration, and the honest thing to do is say so on its page rather than pad it.

Measured, and the numbers are about the screens rather than the file

screen kindat 390at 1280
a full feed379x60061049x3084
a category feed379x36431049x2151
an empty or error screen379x01049x0

Zero on the empty and error screens, and that is correct: there the main element holds nothing, and what a person sees is a state block standing in its place. It is the third component in this kit whose zeros had to be checked before they could be reported, after the skeleton marks and the tab panels.

Why it is still a file

Three components in this system are now down to a handful of declarations: this one, load more at two rules and quick amounts at four. Each of them is kept for a different reason, and each reason is written on its page, because a file with nothing in it is a file somebody will delete without reading what it was for.

This one is kept because the class is the name of a place. Every browse screen's main element carries it, the class map needs an owner for it, and a screen tree of 105 files agreeing on one name for one element is worth a line of CSS. The day the name goes, the file goes with it and not before.

The rule

A shell owns nothing it can hand to a pattern, a page frame or a component. What is left is the honest size of it.

A file may be one declaration. It may not be one declaration with no reason written down.

The anti-rule

Never let a shell grow a part. The chart's grid line lived here once, and the arithmetic read the chart as containing the feed.

Never delete an empty file without reading its page. Three files in this system are nearly empty and all three are kept for reasons that are not obvious from the CSS.

Where the rest of it is

The level and its reason: the organisms page. The stylesheet: components/feed.css, 11 declarations. Everything else a browse screen is made of: the table in section 1.