Use classes across your site

On a site that uses the site stylesheet, a class means the same thing on every page. Style .card on the home page and every card on every page changes with it. Your published pages change when you publish: until then, the live site keeps the classes as they were.

Styling something gives it a class

The first time you style an element that has no class, the builder gives it one and writes your change there, so the next element can reuse the look. The name comes from the element's layer name (Hero becomes .hero) or from what it is (.heading-2, .paragraph, .button). The Style selector says which class the first change will create, and shows Created .heading-2 when it does. To style one element only, switch the selector to This element only before you change anything.

The Classes panel

The Classes tab on the left lists every class on the site. Beside each one, 4 · 6 pages means four elements on this page and six pages that use it. Combinations, like .button.is-large, sit under their first class. Hover a class to see its Desktop styles. Search by name, or tick Search properties and values too to find every class that sets, say, font-size.

The ⋯ menu on each class:

• Rename renames the class everywhere: in the stylesheet and on every page. Renaming onto a class that already exists offers to merge them; where both set the same property, the existing class's value stays. Live pages keep working under the old name until you publish.
• Duplicate copies the class's styles, at every breakpoint and state, to a new name. Tick Use it on the selected element instead to switch the selected element to the copy.
• Select on this page selects every element with the class.
• Delete deletes a class nobody uses straight away. If elements use it, you're asked whether to remove it from them and delete it.

Clean up unused classes lists the classes nothing uses (no draft, no live page, no component) and deletes the ones you tick.

Tag styles

At the top of the Classes panel, Tags styles every element of one kind across the site: Body, All H1 to All H6, All paragraphs, All links, lists, buttons and inputs. Pick one and the Style tab edits it, with breakpoints and states (style All links with the Hover state for link hovers). A class, and an element's own styles, still win over a tag style. Press Done or select an element to go back.

Variables

Variables in the top bar holds the site's named colours, fonts, sizes and spacing. The theme's own (Primary, Text, Background, Surface, and the heading and body fonts) are always there; add your own with + Add. Use them anywhere a value goes: colour variables are the Site colours in every colour picker, size and spacing variables are listed in every unit menu, and font variables at the top of the font list. Change a variable and everything using it changes. Renaming one updates everything that uses it; deleting one that's in use offers to put its value in its place.

Blocks bring their classes

The sections and elements in the Add panel are built from classes such as .sol-button, .sol-heading-l and .hero-center. When you drop one, any of its classes your site doesn't have yet are added; a class your site already has is left exactly as you styled it, so restyle .sol-button once and every button you drop afterwards matches.

Copy and paste between pages and sites

Copy an element (⌘C or right-click ▸ Copy) and paste it on another page, or in another site: it brings its classes with it. A class the other site doesn't have is added; one it has exactly the same is reused; one it has but styled differently comes in renamed (.card-2), so neither look changes. A note says what was added or renamed.