Hey everyone!
I just released a module called RoCSS and wanted to tell you about it. It’s incredibly simple, but I think it’s something that we all need when working with GUI. You can find the documentation here and the Roblox model here.
Why use this?
When you’re working with GUI as a Roblox Developer, it often gets annoying to keep track of your effects and styles. RoCSS eliminates this confusion by allowing you to define classes and their respective looks and effects in the form of a dictionary. Instead of copy and pasting multiple local scripts to manage hover effects for example, all you have to do with RoCSS is add a dictionary called “onhover” and you can define effects in there! You can also simply use it to apply styles to all GUIs with a certain tag at runtime.
How do I use this?
After inserting the RoCSS module script into Replicated Storage, you will need to do two things:
- Create a ModuleScript to store your styles
- Create a LocalScript in which you’ll require the two module scripts and initialize RoCSS by calling
RoCSS.init(stylesheet: {}?).
How do I define styles?
You can define classes and their styles in your ModuleScript like this:
return {
['class name'] = {
["Property"] = "Value",
},
}
How do I use classes?
RoCSS uses the built-in CollectionService to gather a table of all GUIs with a specific “class”. Classes are just tags, so to add an instance as a member of a class, simply add a tag with the class name to it.
For more info such as hover effects, please see the documentation
Have fun with this and tell me your suggestions!