A vocabulary for shaping interfaces with AI https://icontemp.com/wiki/cssprimer/ 2026-09-23T00:36:19+00:00 https://icontemp.com/wiki/cssprimer/ https://icontemp.com/wiki/cssprimer/lib/exe/fetch.php?media=wiki:logo.png text/html 2026-05-20T02:01:30+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=structure:css_components_for_the_ai_era_intro&rev=1779242490&do=diff 01. What Components Are and Why They Matter How structure shapes meaning, clarity, and collaboration with AI —Part of CSS Primer for the AI Era — Structure Before CSS can style anything, and before behavior can animate anything, there must be structure — text/html 2026-05-20T02:00:43+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=structure:html_css_behavior_the_three_layers_of_an_interface&rev=1779242443&do=diff 02. HTML + CSS + Behavior — The Three Layers of an Interface How meaning, appearance, and interaction work together as one system —Part of CSS Primer for the AI Era — Structure Every interface is built from three layers: * HTML — meaning and structure text/html 2026-05-20T02:00:08+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=structure:html_css_blocks_elements_and_modifiers&rev=1779242408&do=diff 03. Blocks, Elements, and Modifiers — A Mental Model for Components How 'naming' expresses structure, intent, and clarity —Part of CSS Primer for the AI Era — Structure Components are easier to understand when their 'internal structure' is expressed text/html 2026-05-20T01:59:37+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=structure:html_css_naming_and_shape&rev=1779242377&do=diff 04. Naming and Shape — How Structure Supports Style How clear names express intent, guide AI, and keep components stable —Part of CSS Primer for the AI Era — Structure This page explains how naming is not a cosmetic choice but a structural tool — text/html 2026-05-20T01:59:00+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=structure:nested_components_for_the_ai_era&rev=1779242340&do=diff 05. Nested Components — When Structure Helps and When It Hurts How to nest with intention, avoid brittle hierarchies, and guide AI through complex shapes —Part of CSS Primer for the AI Era — Structure Nesting is natural. Interfaces are made of parts inside parts — text/html 2026-05-20T01:57:08+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=structure:patterns_cards_lists_media_forms_for_the_ai_era&rev=1779242228&do=diff 06. Structural Patterns — Cards, Lists, Media Objects, Forms Common shapes that bring clarity, predictability, and meaning to 'interfaces' —Part of CSS Primer for the AI Era — Structure Most interfaces are built from a small set of recurring 'structural patterns'. text/html 2026-05-20T14:21:00+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=structure:start&rev=1779286860&do=diff Structure Structure is the shape of an interface — it's the way elements, components, and relationships hold together before any styling or behavior is applied. It gives CSS something meaningful to style and gives AI the context it needs to reason about the page. text/html 2026-05-20T01:56:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=structure:summary_what_structure_can_do_and_cannot_do&rev=1779242171&do=diff 07. Structure Summary — What It Can and Cannot Do What structure offers, where it stops, and how it supports collaboration with AI —Part of CSS Primer for the AI Era — Structure Structure is the foundation of every interface. It gives meaning