Hooks and CSS reference

The hooks are attributes in the storefront's HTML that your CSS can target.

Where: Used in Code › CSS in the code editor, in the Code panel and in Theme › Custom CSS. See Your own CSS and head code.

The template syntax, the variables and the actions for your own HTML are under Template reference.

#The hooks per component

A hook does not change its name unless this table changes too. Each component has three kinds of hooks:

• a root, that the component's CSS is scoped to and that the JS gets as root
• inner elements
• states, which the storefront sets on the root to show the mode

A state is written on the root: [data-bs-header][data-bs-transparent], not as a child.

#The hooks on the page

#Rules in the tokens CSS

These are rules in the tokens CSS, not inline styles on the elements:

• the header's padding, colour, background and border
• the footer's links
• the banner's heading, subtitle, height and corners
• the banner button's colours
• the product card's plate and photo corners
• the columns of the grids, per screen
• the page width and side margin, the header and footer rows and the sections' width
• the screens a section shows on, and the banner's height per screen
• the collection pages' filters: the sidebar, the row and the slim bar on phones and tablets

A plain rule on the hook wins over the tokens CSS, without !important. Only a rule with !important in Theme › Custom CSS or in a component style's own CSS takes precedence.

#How component CSS is scoped

The CSS in Code › CSS applies to the component only. When BunStack compiles the theme, it puts the component's root in front of every selector. That also applies inside @media, @supports, @container and @layer.

[data-bs-transparent]:not([data-bs-scrolled]) svg { stroke-width: 1.4; }

#CSS sanitising

BunStack sanitises all CSS: in components, sections, pages and the theme.

• It removes <, so no </style> can form.
• It removes @import, expression(), javascript: and other script routes.
• It keeps >, so child combinators such as [data-bs-menu] > a work. It also keeps ::before and ::after.
• It keeps !important. The component's CSS comes after the tokens CSS, the style and Theme › Custom CSS, so a plain rule on a hook is usually enough.

BunStack removes CSS it cannot read and shows a warning that names it. The warning shows in the designer and as <!-- bs-component-warning: … --> in the storefront's HTML.

• It removes a rule that never closes.
• It removes text that is not CSS on its own and never joins it to the next rule.
• A selector that continues on the next line needs a comma or a combinator at the line break. Otherwise the first line counts as a note, and BunStack removes it.

The rest of the CSS works.

#Fonts

1. Upload the font as .woff2 or .woff in the media library.
2. Press Copy URL on the file.
3. Point @font-face { src: url(…) } at the address.

The storefront's policy loads fonts only from the media library. A font from another address loads neither in the storefront nor on the canvas.

#Variables from the theme

Take colours, fonts and radii from the theme's variables. Then they change with the theme: