A vocabulary for shaping interfaces with AI https://icontemp.com/wiki/cssprimer/ 2026-05-21T18:39:06+00:00 https://icontemp.com/wiki/cssprimer/ https://icontemp.com/wiki/cssprimer/lib/exe/fetch.php?media=wiki:logo.png text/html 2026-05-14T11:38:28+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_essential_concepts:alignment&rev=1778758708&do=diff CSS Alignment — how elements position themselves within the space their parent provides Alignment is the way elements choose their place inside a container. It is not about force — it is about preference. Given a space, an element can lean left, center itself, stretch, or anchor to an edge. text/html 2026-05-14T11:38:55+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_essential_concepts:containment&rev=1778758735&do=diff CSS Containment — how elements hold, limit, and shape the space their children live in Containment is the idea that every element creates a space of responsibility. A parent defines the boundaries within which its children flow, align, and express themselves. text/html 2026-05-14T12:20:25+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_essential_concepts:density&rev=1778761225&do=diff CSS Density —how tight or open a layout feels Density is the overall tightness or looseness of an interface. It is the emotional temperature of spacing — the balance between breathing room and compression. Density is not a property of a single element; text/html 2026-05-13T12:53:59+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_essential_concepts:flow&rev=1778676839&do=diff Flow — how elements move, stack, and take their place on the page Flow is the default behavior of the web. It's what's before we add layout rules, before we adjust spacing, before we shape structure — elements simply enter the page and take the next available position. text/html 2026-05-14T12:23:57+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_essential_concepts:hierarchy&rev=1778761437&do=diff CSS Visual Hierarchy —how a layout expresses importance through size, position, contrast, and rhythm Visual hierarchy is the way a page quietly tells us what matters first, what matters next, and what can wait. It is not a rule or a technique text/html 2026-05-12T15:54:07+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_essential_concepts:parent-child_relationships&rev=1778601247&do=diff CSS Parent / Child —the structural relationship that gives a layout its shape Every element on a page lives inside something. A parent creates the context, and a child lives within that context. This relationship is the backbone of CSS — the quiet structure that determines how text/html 2026-05-14T12:08:06+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_essential_concepts:rhythm&rev=1778760486&do=diff CSS Rhythm the repeated pattern of spacing that creates pace, predictability, and calm Rhythm is the pattern that emerges when spacing repeats with intention. It is the quiet pulse of a layout — the way paragraphs, headings, lists, and components create a predictable pace text/html 2026-05-13T12:55:27+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_essential_concepts:siblings&rev=1778676927&do=diff CSS Siblings —elements that share the same parent and live at the same level of the structure Siblings are elements that sit side by side under the same parent. They share a context, follow the same rules, and participate in the same flow. Understanding siblings is essential because so many layout decisions happen at this level. text/html 2026-05-14T12:08:32+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_essential_concepts:spacing&rev=1778760512&do=diff CSS Spacing —the breathing room inside and around elements Spacing is how a layout breathes. It is the quiet force that shapes comfort, clarity, and rhythm. In CSS, spacing appears in two forms: * inside an element (padding) * around an element (margin) text/html 2026-05-14T14:28:31+00:00 Anonymous (anonymous@undisclosed.example.com) https://icontemp.com/wiki/cssprimer/doku.php?id=vocabulary:css_essential_concepts:tone&rev=1778768911&do=diff Styling Tone —the emotional layer that shapes how a layout feels Tone is the emotional quality of an interface — the quiet mood created by color, spacing, contrast, softness, and rhythm. It is not a property of any single element. Tone emerges from how everything works together.