Front-end UI

Igloo 17's front end is built with Tailwind CSS v4 and themed through Igloo's Design system (palettes and button variants). This section covers the markup, classes and CSS variables you'll use when building or styling blocks.

v13 → v17 change

The front end was rebuilt for v17. The old hand-written ig-base.css / ig-theme.css stack — the .container/.row/.col-70 grid, button--theme modifiers, block/white-bg widget classes and a single global theme — has been replaced by Tailwind utilities plus per-design CSS variables. If you're porting templates from v13, expect the class names below to have changed.

How styling is organised

• Tailwind v4 is the engine. Igloo's styles are authored in Styles/igloo.css (which does @import "tailwindcss") and compiled to App_Plugins/Igloo/dist/css/. Base/typography utilities live under Styles/Utilities/, and each block has its own file under Styles/Components/Blocks/.
• Design variables are generated per Design node. Saving a Design writes App_Plugins/Igloo/dist/css/igloo-variants.css containing .design-{key}, .palette-{key} and .variant-btn-{key} classes full of CSS custom properties — see Theme & design variables.
• Blocks are wrapped by <igloo-block-wrap>, which outputs the block alias, a component class and the chosen palette-{key} (see Create a new widget).

In this section

• Theme & design variables — the CSS custom properties generated from Designs and palettes.
• Buttons — button markup and design button variants.
• Layout & grid — page layout, containers and the Tailwind grid.
• Forms — form, field and validation markup.
• Typography — heading and text helper classes.
• Helpers — utility classes.