A native Fomantic UI reading shelf with verified compiled theme values, jQuery dropdown and rating modules, explicit keyboard support and a persistent local shortlist.
Fomantic UI 2.9.4 CSS/modules with jQuery 3.7.1. Cover artwork and rating keyboard augmentation are original. · Implementation reference
02
Fomantic UI Design System Design Reference
Fomantic UI 2.9.4 compiled default CSS inspected directly. These are selector-level defaults from its Less-based theme, not invented runtime CSS tokens. Original cover colors and application dimensions are separately identified.
Fomantic UI Design System A CSS Vocabulary with jQuery Modules
A CSS Vocabulary with jQuery Modules
Fomantic UI combines semantic class strings with optional stateful modules. The reading shelf uses ui fluid card, ui teal button and ui basic label for appearance. The dropdown and ratings are explicitly initialized through jQuery. Loading the stylesheet alone would render the cards but would not supply the same interaction.
This specimen pins Fomantic UI 2.9.4 and jQuery 3.7.1. It includes the transition module before dropdown, then rating. Keeping those dependencies visible is more useful than showing a static star row and calling it an interactive library example. The original application module runs only after the card markup exists.
Fomantic UI Design System Compiled Defaults Are Not Runtime Token Names
Compiled Defaults Are Not Runtime Token Names
Fomantic’s default theme is built through Less. The reference therefore records actual selector values such as the teal button’s background and the card’s border radius. It does not invent a --fomantic-primary token API that the compiled package does not expose. A larger theme change should use the documented theme build and variable files.
The named teal variation is separate from the primary blue variation. In this reading shelf the shortlist action is teal, while the original cover artwork uses paper, sage and warm clay colors. Those covers are application illustrations, not official palette swatches. Hover, focus and pressed button values remain native Fomantic defaults.
Fomantic UI Design System Fourteen-Pixel Rems Change the Geometry
Fourteen-Pixel Rems Change the Geometry
The default site stylesheet sets the root and body text to fourteen pixels. Its 0.28571429rem button and card radius is therefore approximately four pixels. Copying that rem value into an unrelated sixteen-pixel root would produce different geometry, which is why the reference includes the root size rather than listing an unexplained radius alone.
Lato is the preferred family and the compiled package includes local font assets. This standalone preview embeds those font resources rather than requesting a web-font service. The page heading is an original thirty-four-pixel override; card descriptions retain compact body text with a more generous application line height.
Fomantic UI Design System Card Anatomy Keeps Content and Actions Distinct
Card Anatomy Keeps Content and Actions Distinct
Each native card contains a decorative cover, a content block for topic and description, another content block for the rating and an extra content block for its shortlist action. Fluid cards fill the original three-column grid instead of using the package’s default 290px width. The page removes individual card margins so the grid supplies consistent gaps.
The prompts have different reading tasks: compare letter spacing, remove an element to study negative space, and observe contextual color changes. Their covers visually echo those exercises through type, rectangles and overlapping color. They are explicitly original prompts and do not imply endorsement by a publisher.
Fomantic UI Design System Call the Native Rating Behavior for Every Input Path
Call the Native Rating Behavior for Every Input Path
The rating module is configured with a maximum of five and clearable true. onRate receives the current numeric value and synchronizes both the visible score and accessible slider value. The Clear rating action calls the module’s clear rating behavior rather than removing active classes by hand.
The native star module provides mouse interaction, but this example also adds explicit keyboard behavior. The rating container is a labeled slider with a zero-to-five range. Arrow keys change one step, Home clears and End chooses five. Each path calls set rating, ensuring that the displayed stars and application output share the same module state.
Tab to a rating and press Right twice to choose two out of five.
Press End to choose five, then Home to return to Not rated.
Click a star and confirm that the text output and accessible value update together.
Fomantic UI Design System Dropdown Filtering Preserves Hidden State
Dropdown Filtering Preserves Hidden State
The topic select becomes a native Fomantic dropdown through the dropdown initializer. Its onChange callback hides cards whose topic does not match the selected value and updates the visible prompt count. The All topics option restores the complete shelf. The component uses the transition module for menu movement.
Filtering does not destroy and recreate a card. Existing ratings and shortlist membership remain attached to their original records when hidden. That behavior is deliberate: narrowing the shelf is a viewing operation, not a request to erase the user’s earlier choices. The summary can therefore mention an item outside the current filter.
Fomantic UI Design System A Shortlist Is Independent of a Rating
A Shortlist Is Independent of a Rating
Rating expresses interest on a zero-to-five scale, while shortlist membership is a separate yes/no decision. A user can keep a prompt for discussion before rating it. The shortlist button exposes its selected state through aria-pressed and switches between Add and Remove labels. The summary derives its names from a Set of stable topic IDs.
The status region describes the selected prompts without claiming that a collection has been saved remotely. A browser reload clears this specimen. A real shared reading list would need persistence, user identity and conflict handling; those capabilities do not come from adding a card class.
Fomantic UI Design System Keep Numeric Meaning Beyond Decorative Stars
Keep Numeric Meaning Beyond Decorative Stars
The star icons are hidden from assistive technology because the parent slider exposes the numeric value and label. A visible Not rated or fraction output provides the same meaning without requiring the reader to count colored icons. A focus-visible outline marks the active slider, and the Clear button returns focus to that control.
The book-cover shapes are also decorative. The real prompt title, duration and description remain text inside the card. Narrow screens stack the cards at the original 760px breakpoint. The example resets the compiled body’s viewport height and hidden horizontal overflow so embedding uses the content’s actual height and does not conceal layout defects.
Expose the current number through both text and an accessible value.
Use native buttons for clearing and shortlist changes.
Preserve labels and full descriptions when the grid becomes one column.
Fomantic UI Design System Ship the Fonts Beside the Styles or Bundle Them
Ship the Fonts Beside the Styles or Bundle Them
For a normal project, copy the complete fomantic-ui-css directory rather than extracting semantic.css and forgetting its themes assets. The compiled styles refer to Lato and icon font files using relative paths. The setup below keeps those paths intact and loads jQuery before the package modules.
The local preview uses only the required component styles and scripts, then embeds their referenced assets into one document. It has no external font request. Production bundlers may process these assets differently, but the font path and module order still need to be tested in the delivered page rather than assumed from a successful npm install.
The compiled site default height:100% is reset to auto for embedding.
Body overflow is not used to conceal layout errors.
04
Fomantic UI Design System Agent Setup
Implementation Starting Point
Verified with Fomantic UI 2.9.4 and jQuery 3.7.1. The standalone example embeds required font assets; the normal setup retains package-relative paths. The HTML wrapper includes the full body markup; save the supplied interaction and CSS examples under the filenames referenced here.
html
<!-- npm install [email protected][email protected] -->
<!-- Copy node_modules/fomantic-ui-css into public/vendor/fomantic-ui-css. -->
<!-- Copy node_modules/jquery/dist/jquery.min.js into public/vendor/jquery.min.js. -->
<link rel="stylesheet" href="/vendor/fomantic-ui-css/semantic.min.css">
<link rel="stylesheet" href="style.css">
<main class="reading-room"><header><div><p class="kicker">FOMANTIC UI · READING ROOM</p><h1>Make a shelf worth returning to.</h1><p class="intro">Rate three original reading prompts and build a local discussion shortlist.</p></div><span class="ui teal basic label">Local collection</span></header><div class="toolbar"><label for="topic">Show topic</label><select id="topic" class="ui selection dropdown"><option value="all">All topics</option><option value="type">Typography</option><option value="space">Space & rhythm</option><option value="color">Color</option></select><span id="visible-count">3 prompts</span></div><div class="book-grid"><article class="ui fluid card" data-topic="type" data-name="Letters in the margins"><div class="book-cover type-cover" aria-hidden="true"><span>Aa</span><small>FORM / COUNTERFORM</small></div><div class="content"><div class="meta">TYPOGRAPHY · 18 MIN</div><h2 class="header">Letters in the margins</h2><div class="description">Compare a narrow editorial column with a generous display line. Find where the rhythm changes.</div></div><div class="content"><label class="rating-label" id="label-type">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-type" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article><article class="ui fluid card" data-topic="space" data-name="The space between"><div class="book-cover space-cover" aria-hidden="true"><span></span><span></span><span></span><small>PAUSE / SEQUENCE</small></div><div class="content"><div class="meta">SPACE & RHYTHM · 12 MIN</div><h2 class="header">The space between</h2><div class="description">Remove one element from a crowded page. Rebalance the remaining space without adding decoration.</div></div><div class="content"><label class="rating-label" id="label-space">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-space" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article><article class="ui fluid card" data-topic="color" data-name="A color and its neighbor"><div class="book-cover color-cover" aria-hidden="true"><span></span><span></span><small>CONTEXT / CONTRAST</small></div><div class="content"><div class="meta">COLOR · 15 MIN</div><h2 class="header">A color and its neighbor</h2><div class="description">Place the same accent on two backgrounds. Describe the shift before changing its value.</div></div><div class="content"><label class="rating-label" id="label-color">Your interest</label><div class="ui huge star rating" data-rating="0" data-max-rating="5" role="slider" tabindex="0" aria-labelledby="label-color" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0"></div><output class="score">Not rated</output><button class="ui tiny basic button clear-rating" type="button">Clear rating</button></div><div class="extra content"><button class="ui fluid teal button shortlist" aria-pressed="false">Add to shortlist</button></div></article></div><section class="ui message summary"><h2 class="header">Discussion shortlist</h2><p id="summary" role="status">No prompts selected. Add one to begin.</p><p class="scope">Ratings and selections stay in this browser page. These are original prompts, not published books.</p></section></main>
<script src="/vendor/jquery.min.js"></script>
<script src="/vendor/fomantic-ui-css/components/transition.min.js"></script>
<script src="/vendor/fomantic-ui-css/components/dropdown.min.js"></script>
<script src="/vendor/fomantic-ui-css/components/rating.min.js"></script>
<script src="app.js"></script>
<!-- Keep the themes/ assets beside the copied CSS. -->
A Prompt for Your Project
Agent Prompt
Extend the Fomantic UI 2.9.4 reading-room shortlist using the supplied jQuery module initialization, Dropdown and Rating components. Keep the three reading prompts, their rating state and the local shortlist behavior connected to the visible cards. Retain the explicit keyboard support and slider semantics added to the rating control, along with matching theme/icon assets. The shortlist must prevent duplicate additions and expose its current contents clearly; it is not a support-ticket workflow or a remote recommendation service.
05
Fomantic UI Design System Sources and Scope
Fomantic UI 2.9.4 with jQuery 3.7.1. Theme values are compiled defaults; original cover artwork and keyboard augmentation are identified. All selections stay local.
