[V 0.3] ROSS - Easy, beautiful and animated UI

Resources Community Resources
,
1
LOGO.png968×968 51.7 KB

ROSS — Roblox Object Style Sheet (V 0.3)

:file_folder: Download (GitHub) & :scroll: Changelog

:rocket: What is ROSS?

ROSS is a declarative framework that brings the power and simplicity of CSS to Roblox Studio. It’s designed to let you create vibrant, animated interfaces without wasting time on boilerplate code.

Stop worrying about bulky code:

  • :cross_mark: No more endless TweenService for every single button.
  • :cross_mark: Forget complex UDim2 and Color3.fromRGB constructors.
  • :cross_mark: No more manual low-level property manipulation.

With ROSS, you describe styles and animations declaratively. You tell the framework how an object should look, and it handles the tweens, gradients, and corner rounding for you. This can reduce your UI code by 3-5x!

:sparkles: Key Features

  • :high_voltage: Pure Productivity — Say goodbye to UDim2, TweenService, and mountains of Color3. Use simple tables, percentages, and built-in presets instead.
  • :rainbow: Native Gradients — Create gradients in a single line: Background = {"red", "blue", 90}. No more unnecessary objects in your hierarchy!
  • :triangular_ruler: Advanced Corner Radii — Set individual rounding for each corner without any visual bugs or artifacts.
  • :performing_arts: Built-in Interactions — Animations are included out of the box. Enjoy smooth transitions and automatic state reset.
  • :brain: Smart Value Parser — Write code your way: "red", {"green", 0.5}, {150, "px"}, or "Bold". ROSS understands you perfectly.
  • :rocket: Client-Side Optimized — Styles are resolved once, and animations only run when needed. Zero unnecessary overhead on your system.

Quick Start

local ROSS = require(path.to.ROSS) -- ROSS should be in ReplicatedStorage

ROSS:Create({
    ["Button"] = {
        type = "Button",
        properties = {
            Background = {"green", "dark_green"},
            Size = {15, 10, "%"},
            Position = {50, 85, "%"},
            Anchor = "center",
            BorderRadius = {50, "%"},
            Text = "Click Me!",
            Font = {"white", 0, "Bold"},
            Transition = 0.1,
        },
        animations = {
            Hover = {
                BackgroundColor = {"red", "dark_red", 180},
                Size = {16, 11, "%"},
            },
            Active = {
                BackgroundColor = {"red", "dark_green", "dark_red"},
                Size = "Default",
            }
        }
    }
})

:books: Documentation

Detailed information about every property and animation is available in the Documentation included with ROSS (found inside the Docs folder). There you will also find Preset Tables and other core ROSS components.

Quick Summary:

  • Background / BackgroundColor – Handle colors and transparency. Two or more colors automatically create a Gradient; a final number > 1 sets the Rotation Angle.
  • Font – Set text color, size, family, weight, and style in a single line: {"white", 14, "Arial", "Bold", "Italic"}.
  • BorderRadius – Custom corner rounding: {20, 5, 10, 30, "%"} or {15, "px"}.
  • Size, Position, Width, Height, X, Y – Full support for both % and px.
  • Anchor – Origin points like "center", "topLeft", and more.
  • Text Control – Full control over TextAlign, TextHAlign, TextVAlign, TextTransparency, and TextStroke.
  • Transition – Defines the duration of your animations.
  • Callback – Attach your own custom functions to events.

Note: Animations are defined in the animations section (e.g., Hover)
All properties listed above are supported for animation

:package: Installation

  1. Download the .rbxm file from the ROSS GitHub Repository
  2. Insert the Model into ReplicatedStorage (or any location accessible by the Client)
  3. Initialize in a LocalScript:
local ROSS = require(path.to.ROSS.Main).New()
ROSS:Create({ ... })

:world_map: Future Plans

  • Shadows and border strokes
  • Expanded element support: ScrollingFrame, ProgressBar, Slider, etc.
  • Adaptive Layouts (Horizontal, Vertical, etc.) via simple properties
  • Support for external style sheets (loading styles from separate tables/files)
  • And much more!

:speech_balloon: Feedback

I built ROSS entirely on my own, and it is my first public library. I would be thrilled to receive any feedback, suggestions, or constructive criticism! If you have ideas on how to improve the syntax or features you’d like to see — please leave a comment below.

Let’s make UI in Roblox beautiful and simple together! :rocket:

2 Likes