added new 2 animations animate-spin and animate-ping they are also compatible with states e.g hover:animate-spin
now the position and border, border color classes are actually working
added poy, pox classes for positioning the X and the Y values
features Showcase
spin animation
ping animation
Original Post
What is Flux?
Flux is a utility-first library for Roblox UI design that simplifies building user interfaces by providing a set of predefined, reusable classes. It enables developers to quickly style and customize UI elements in Roblox with minimal code.
Note: Flux is currently in a prototype-release state, meaning this version is still in development and will change before the beta release.
Why Use Flux?
Flux provides a simpler approach to UI design in Roblox. By concentrating on utility-first principles, developers may apply style immediately with short class names, avoiding the need for manual property tweaks and resulting in a clean, manageable codebase.
Example Code
-- simple app example
local flux = require(game.ReplicatedStorage.flux.core.main)
local ScreenGui = Instance.new("ScreenGui", game.Players.LocalPlayer.PlayerGui)
local newElement = Instance.new("TextLabel", ScreenGui)
newElement.Text = "Hello, Flux!"
flux.applyStyles(newElement, "bg-gray-50 hover:bg-[30,30,30]-transition hover:text-[255,255,255]-transition sx-[30%] sy-[30%] align-center text-2xl font-arial font-bold round-md")
Installation
You can install Flux using one of the following methods;
Download the latest source code release from GitHub.
Extract the Files into your project’s source directory.
Documentation
Full documentation for Flux can be found here. The API and examples will be updated as development progresses.
Contributing
Flux is an open-source project, and contributions are welcome! If you’d like to help improve the library by adding new features, fixing bugs, or improving documentation, check out the contribution guide.
If you’re interested in helping build a community around Flux, feel free to reach out via the devforum, GitHub or discord!
Survey:
by applying and voting in here, you are helping me to make flux a better library.
What do you think about Flux
Perfect
Good
Bad
Terrible
0voters
How easy is it to learn Flux?
Hard
Intermediate
Easy
Very Easy
0voters
Are you satisfied with the current features Flux offers?
Thank you for your feedback! I get where you’re coming from, and it’s fantastic to hear your perspective on the simplicity of classic UI coding.
Flux aims to speed and simplify the UI development process, especially in more complicated settings. While standard scripting can be useful for easy UI tasks, Flux intends to overcome the following unique challenges:
complicated UI Cases: For cases such as plugin UI construction or complicated UI layouts, Flux offers an organized and consistent method that may make development easier, particularly when dealing with a large number of elements and styles.
Ease of Use: Flux is intended to abstract away some of the more tedious and error-prone components of UI coding. Using utility classes minimizes the requirement for Manual changes and fine-tuning can help speed up and simplify the procedure.
Consistency and Speed: Flux allows you to establish consistent design and layout faster than manually specifying restrictions and colors for each UI element. This can be especially useful in larger projects or when working with groups.
Customization: Although it may appear more complicated at first, the library provides for great customization and flexibility. It’s designed to handle more than just simple instances, with tools that can grow with your project’s requirements.
Finally, Flux aims to make UI creation more efficient and controllable, especially for increasingly complex designs. I appreciate your viewpoint and would want to hear about any specific use cases or recommendations you have. Your feedback helps to refine and improve the library.
Yes, i used it to improve the context of the message, i believe that using such tools to help you do basic tasks quicker and easier is fine as long as you do not abuse it.
Thank you, You’re Right, Adding pictures and examples would be alot better.
note: i Didn’t add Images and Pictures since this Version is just a Prototype, meaning allot of features is missing, being said, here is what the Example application i’ve wrote in the the devforum
-- simple app example
local flux = require(game.ReplicatedStorage.flux.core.main)
local ScreenGui = Instance.new("ScreenGui", game.Players.LocalPlayer.PlayerGui)
local newElement = Instance.new("TextLabel", ScreenGui)
newElement.Text = "Hello, Flux!"
flux.applyStyles(newElement, "bg-gray-50 hover:bg-[30,30,30]-transition hover:text-[255,255,255]-transition sx-[30%] sy-[30%] align-center text-2xl font-arial font-bold round-md")
classes: bg-gray-50 is a predefined background color, hover:bg-[30,30,30]-transition is a dynamic class adding a gray-black background while also using the special keyword -transition to smoothness and transition to the hover state, hover:text-[255,255,255]-transition is a dynamic class applies a white text color and also using the special keyword -transition, sx-[30%] is a dynamic class that sets the X axis of the UI Size to 30% which is equivalent of 0.3, sy-[30%] is a dynamic class that sets the Y axis of the UI Size to 30% which is the equivalent of 0.3, align-center is a predefined class that sets the the UI to the center using a combination of Anchor Point and Position, text-2xl sets the text-font size to 24, font-arial using font arial, font-bold using the font bold weight, round-md sets the UI Corener of the UI to (0, 10).
outcome:
there is a hover effect with transition that turns text into white and background into black.
Cool, but unpractical, just use Luau or TS or some sort. This is just utility classes, just like tailwind. From what I can tell, it already has quite a bit of logic going on
no. flux is not a roact alternative, roact is a declarative framework that focuses on making guis and track their states. but flux is about styling guis with ease.
was actually thinking about making something similar to this recently for a react-like framework i’ve been working on. prefer using tailwind 10x more vs default styling.
would be cool to see flex/grid support for this type of thing
