Lists
Feed list
A feed does not need ambition. It needs discipline. In Rare Styles, a feed is a strict vertical column where items follow each other calmly, separated by lines, not by personality. Titles carry meaning. Meta information stays in the background and knows its place.
The structure is intentionally minimal. Fewer selectors, fewer decisions, fewer chances to break consistency.
.feed-list— the main container for the feed. Defines the vertical flow and establishes the column layout..feed-list__item— a single feed entry. Items are visually separated with vertical borders to preserve rhythm and continuity..feed-list__item-meta— a generic style applied to all meta information such as date, category, tags, or importance. Uses smaller type and reduced contrast.
Knowledge Base feed example:
In Rare Styles, feeds avoid decorative wrappers and semantic overengineering. One container, repeatable items, and a single meta style. If something needs emphasis, the title handles it. Everything else steps back and lets the list breathe.
Tables
Tabular data forms a crucial part of business information presentation. Tables allow users to quickly comprehend and compare large data volumes.
| Library | Versatility | Simplicity | Recognizability | Score |
|---|---|---|---|---|
| Tailwind | V | X | X | 1 |
| Bootstrap | V | X | V | 2 |
| Rare Styles | V | V | V | 3 |
Tables default to min-width: 100%, occupying the full width of their parent element. Horizontal scrolling overflow-x: auto; prevents disruption of the overall layout grid.
For small tables and table-style data presentation, , the .table-small selector is available with left-aligned content.
Always remember the primary purpose of tables: presenting data for quick analysis and comparison. Don’t overload tables with unnecessary information or use them for content better presented as text or graphics.
To limit table width, use either parent elements or preset spacing selectors like .width-50, .mobile: width-75, etc., or create custom classes.
Preset Tables
For dashboards and other data-heavy pages, the library includes preset selectors. These allow you to quickly create readable tables with minimal code—like specialized table templates in your construction kit.
| Selector | Purpose |
|---|---|
.table-striped |
Alternating background colors |
.table-terminal |
Terminal-style data |
.table-small |
Used for small tables |
.table-terminal example:
| Visitors: | 1,234 |
| Clicks: | 345 |
| Leads: | 123 |
| Sales: | 12 |
| Revenue: | $1,234 |
| Conversion: | 1% |