UI - Getting Started

UI is a crucial part of a game. This page serves as a guide to understanding the basics of UI design in s&box, including Panels, Stylesheets, and Razor templating.

s&box uses a custom UI system. While similar to normal HTML/CSS, it's not the same - we're not just using a web renderer.

Panels

s&box uses a panel-based system. Panels are the basic building blocks for all components.

Stylesheets

s&box uses a subset of SCSS, a CSS preprocessor, for styling UI elements. This gives you more control and flexibility over your styles.

Supported SCSS features

s&box supports various SCSS features such as variables, mixins (includes), nested rules, and operators. This enables more reusable and maintainable stylesheets.

Supported style properties

s&box supports a wide range of CSS properties - you can find a list of them here.

Custom properties

We also have our own custom properties for custom features that we think you'll find useful. You can find a list of them here.

Razor

s&box uses Razor for UI templating. Razor is a markup syntax for embedding server-based code into webpages. Razor is a simple programming syntax for embedding server code in web pages. It is clean, fast, and enables a fluid coding workflow.

Razor is powerful because it lets you dynamically generate HTML on the server, reducing the amount of data sent to the client and making your web pages faster and more responsive.

Read more about Razor here.

More

Looking for more? Check out these additional resources:

• Fonts
• Web Surfaces
• Pointer Events
• Localization
• World UI