<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. 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 ⤶ **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 <page text="events and input">ui-events-and-input</page>. ⤶ Read more on Panels [here](Panels).⤶ ⤶ s&box uses a panel-based system. Panels are the basic building blocks for all [components](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 <page text="here">supported-style-properties</page>. **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 <page text="here">custom-style-properties</page>. ## 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 <page text="here">ui-razor</page>. ## More Looking for more? Check out these additional resources: - Fonts - Web Surfaces - Pointer Events - Localization - World UI