S&box Wiki

Home / History for UI - Getting Started

Revision Difference

UI/GettingStarted#551235

<title>UI - Getting Started</title>⤶ ⤶ # 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.⤶ ⤶ ## Panels⤶ ⤶ **Panels** in s&box are similar to div elements in HTML. They are containers for other UI elements, such as labels, buttons, and images, allowing for flexible and efficient layout management. Panels can handle [events and input]().⤶ ⤶ Read more on Panels [here](ui-panels).⤶ ⤶ ## 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.⤶ ⤶ **What is Razor?**⤶ ⤶ Razor is a simple programming syntax for embedding server code in web pages. It is clean, fast, and enables a fluid coding workflow.⤶ ⤶ **Why is it useful?**⤶ ⤶ 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 on Razor [here](ui-razor).⤶ ⤶ ## More⤶ ⤶ Looking for more? Check out these additional resources:⤶ ⤶ - Fonts⤶ - Web Surfaces⤶ - Pointer Events⤶ - Localization⤶ - World UI

Account Management

Special Pages

Wiki List