CSS

A built Project Mammut game is rendered like a web page, so everything on screen is HTML styled with CSS (Cascading Style Sheets). CSS controls how things look: colours, fonts, borders, shadows, layout, transforms and animation. Anything CSS can do in a browser, you can do to a node in Mammut.

This page covers where CSS fits into Mammut and points to good places to learn it.

Where you write CSS in Mammut

You write CSS as single declarations, one rule at a time, such as text-shadow: 0 2px 4px #000. Mammut writes the selector for you, so you never need the selector { ... } wrapper you'll see in most tutorials.

• Node CSS: every node in the Scene Editor has a CSS section in the inspector (see Shared Node Properties). The presets dropdown next to Add Rule fills in common rules for you.
• Advanced: also in a node's CSS section. Each group takes a selector that's added to the node, such as :hover, :active or ::before, and its own list of rules.
• States: named sets of extra rules a node can switch to at runtime with setState(). See States and Element States.
• Animations: @keyframes shared across the scene. Give the animation a name, write only the body (for example from { opacity: 0 } to { opacity: 1 }), then use it from any node with an animation rule.
• Custom Properties: scene-wide CSS variables registered with @property, so they have a type and can be animated smoothly.
• Styles: named text styles in the Styles Manager, applied as tags in chapters (see Formatting) and on text nodes.

Learning CSS

If you're new to CSS, start with one of these:

• MDN: CSS styling basics: Mozilla's free beginner course, from your first rule to the box model.
• web.dev: Learn CSS: Google's course, with one short module per topic.
• W3Schools CSS Tutorial: quick pages with "Try it Yourself" examples you can edit in the browser.

For looking things up:

• MDN CSS reference: every property and value, with examples and browser support.
• CSS-Tricks Almanac: readable explanations of properties and selectors.

Useful topics for games

Selectors and the cascade

• Pseudo-classes: :hover, :active and others, useful in Advanced groups.
• Pseudo-elements: ::before and ::after, for decoration without adding extra nodes.
• Specificity: how the browser decides which rule wins when two set the same property.

Movement and animation

• transform: move, rotate, scale and skew.
• Using CSS transitions: animate smoothly between two values, such as when a node changes state.
• Using CSS animations: how @keyframes and the animation property work together.
• Easing functions: ease, linear, cubic-bezier() and steps().

Visual effects

• filter: blur, brightness, grayscale, drop shadows and more.
• backdrop-filter: blur or tint whatever is behind a node, good for frosted glass panels.
• mix-blend-mode: blend a node with what's behind it, such as Multiply, Screen or Overlay.
• box-shadow and text-shadow: shadows and glows.

Colour

• Colour values: hex, rgb(), hsl() and named colours.
• linear-gradient(): the gradients Mammut's gradient colour picker produces.

Layout

A Container's Row and Column modes use flexbox, and its Grid mode uses CSS grid.

• Basic concepts of flexbox
• Basic concepts of grid layout
• A Complete Guide to Flexbox: a visual cheat sheet.

Variables

• Using custom properties: --name variables and var().
• @property: how registered properties work, as used by the scene's Custom Properties.

Handy tools

• Can I use: check which browsers support a feature. Web builds run in the player's browser, and desktop builds use the system web view (WebKit on Mac, WebView2 on Windows), so check newer features before relying on them.
• Animista: pick and tweak ready-made animations. Copy the steps inside its @keyframes into a scene animation, and its animation line into a node's CSS.
• easings.net and cubic-bezier.com: find or build an easing curve and copy the cubic-bezier() value.
• CSS Gradient: build a gradient visually and copy the CSS.
• Flexbox Froggy and Grid Garden: short browser games that teach flexbox and grid.