StyleScript. Script your Style!

Resources Community Resources
, , , ,
#1

StyleScript. Script you style!

(Without feedbacks, I can’t improve this plugin!)

Hello guys! I worked really hard on my new plugin StyleScript in the past!
And now I decided to make it public and free for everybody!

What is this plugin?
This plugin adds a new scripting interface and language into your roblox game.
You can use this scripting language to style your GUI like CSS!

Screenshots:
image

image

Are you interested? Try it out! https://www.roblox.com/library/6149121433/StyleScript
And also read the official guide on github:

Share bugs and ideas in the replies!

That’s it, have a good day!

39 Likes
STIC MODULE - Make your game faster and more organized!
#2

Dang. I just finished my draft of the CSS interpreter last night after working on it for the last 3 months. Nice job tho.

3 Likes
#3

I have been trying to learn CSS recently and this will definitely propel my knowledge further!

#4

This is great! Does this work with tween service?

1 Like
#5

Can you show us some examples?

2 Likes
#6

Yes, for now you can only use the Sine tween!
You can do that by:

_btn:hover
transition: 0.5;
bg:(100,100,100);
end _btn:hover

This will tween all the properties in this definiton.

1 Like
#7

Good to see you like my plugin! Don’t forget, this plugin doesn’t use CSS! Anyways, the language is very similiar to CSS.

1 Like
#8

That looks quite useful actually. I use CSS a lot to specify fonts, background etc. I’m going to ask if I can use the tags I use the most for styling (font-family, color, background-color).

2 Likes
#9

Oh! Thanks so much for the ideas! I will definitly implement font-family and color!
(the plugin already has ‘background-color’ it’s just ‘bg’ for short.)

  • I will try to implement most of the CSS tags!
#10

I would prefer if you do make bg and background-color do the same thing as otherwise I’ll get confused.

1 Like
#11

Okay, I will do that. Thanks for the feedback!

#12

I can’t remember fully but I believe there is a text-align tag in CSS as well. Obviously it would have to work differently as we have X and Y alignments in Studio. I should also mention that there is sizing tags such as width and height in CSS plus there is positioning ones like right, left, bottom, top. (correct me if the positioning tags are wrong)

#13

Yeah, I want to implement the text-align-x and text-align-y property.
It would be hard to make a height and a width property. So, there will be a
‘scale-size’ and ‘offset-size’ property for changing the size of elements.
And there will be a similar ‘scale-position’ and ‘offset-position’ property too!

Thanks for the ideas! ^^

#14

Technically height/width is done in percentage or pixels amount so it would be possible.

#15

Yeah, but my code isn’t prepared for this type of properties.
Now I’m just going to add ‘scale-size’ and ‘offset-size’ and ‘scale-position’ and ‘offset-position’
as Vector2 values.

#16

Oh and also a font-size option would be useful, I was just looking through one of my GitHub repos for tag ideas.

Screenshot_20201228_182528_com.kiwibrowser.browser
Screenshot_20201228_182528_com.kiwibrowser.browser720×1440 125 KB

1 Like
#17

Haha, I implemented it at the moment!

1 Like
#18

Guys! I added a lot of new properties! They are in the guide, but I will post them here too!
image

RGB value syntax: (r(0-255),g(0-255),b(0-255)) (for any color modification)
Vector2 value syntax: (x,y) (for size, position and anchor modification)

1 Like
#19

Okay, everybody can install the update now!

In this update I added a lot of new properties!
I fixed a BIG transition bug!
Added Vector2 values for some new properties!

#20

Should background-transparency map to BackgroundTransparent and not BackgroundColor3.

1 Like