|
| 25 May 2013 10:06 AM |
I thought about making a CSS-like language for Roblox GUIs. I was wondering how many of you would use it. This is an example of a normal CSS entry:
#idName { position: absolute; top: 50px; left: 50px; width: 200px; height: 400px; border: 1px solid #000; text-align: center; }
With my Rbx.CSS language, you would be able to do the same exact thing instead of fiddling around with the properties manually. This is what the Rbx.CSS entry would look like:
#guiObjectName { position: absolute; top: 50px; left: 50px; width: 200px; height: 400px; border: 1px solid #000; text-align: center; }
Why would this be useful? Well, if you're using Roblox GUIs often, and you enjoy making them, you may like developing websites. Typically, a website is split between some core groups:
Code Content Design
This with CSS experience are typically in the Design group. And because this Rbx.CSS language will be so similar to CSS, you will learn much of the real CSS language, and in turn, be able to put CSS experience on your resume.
I'm just curious at the moment, though, about who all would use this. |
|
|
| Report Abuse |
|
|
|
| 25 May 2013 10:09 AM |
| Sounds interesting... I'd use it :P |
|
|
| Report Abuse |
|
|
killjoy37
|
  |
| Joined: 27 Aug 2008 |
| Total Posts: 2821 |
|
|
| 25 May 2013 10:24 AM |
So, how would we access it, like a little panel or something? I do like the idea of not having to find the gui in the startergui and find the properties I want to change, I'd like to have everything in front of me. With this, would we be able to change that little { }
thing you made, or would we have to create a new one to change something. Sorry if I'm missing something, I'm not quite sure what exactly you would be making. |
|
|
| Report Abuse |
|
|
|
| 25 May 2013 10:33 AM |
CSS is used to make HTML display nicely. This is how CSS works:
tag { styleProperty: value; }
.class { styleProperty: value; }
#id { styleProperty: value; }
For Rbx.CSS, you would have these:
.class { styleProperty: value; }
#name { styleProperty: value; }
.class - affects all objects of said ClassName EX: .Frame will affect all Frame objects
#name - affects only the object with said Name EX: #descriptionLabel will affect only the GUI object named "descriptionLabel"
{ and } hold the properties to a specific identifier. #name { properties go in here for #name ONLY }
I will put up some documentation on my Wiki page. If you still don't understand, try Googling 'css tutorial' and read about it. |
|
|
| Report Abuse |
|
|
velibor
|
  |
| Joined: 24 Nov 2009 |
| Total Posts: 1003 |
|
|
| 25 May 2013 10:40 AM |
I would personally use this
gui frame textlabel textbox textbutton imagebutton
That refers to all the ROBLOX GUI objects.
gui { width: 200px; widthscale: 0.2; background-color: 251, 252, 253; }'
Then we have certain objects with specific names .name{ width: 200px; }
I would personally would like to see the next : - The LESS approach - Possibilty of Selectors
Example:
GUI - Frame -- TextLabel (Name : HelloWorld)
frame .HelloWorld { display: none; }
- :hover(), :active() - How are we going to put the RBX.CSS code to the Roblox place ?
But tell me more about your idea. It sounds like a fun project.
|
|
|
| Report Abuse |
|
|
|
| 25 May 2013 10:41 AM |
I learned RBX.Lua and then Lua, I think if they added different languages to ROBLOX people would have such an easier time doing it.
You learn better when you're learning fun :p
Rbx.CSS -> Awesome idea. |
|
|
| Report Abuse |
|
|
|
| 25 May 2013 10:41 AM |
sorry firefox this has nothing to do with what you said but how do you have so many places active without having BC?
and also i may attempt to use it. |
|
|
| Report Abuse |
|
|
killjoy37
|
  |
| Joined: 27 Aug 2008 |
| Total Posts: 2821 |
|
|
| 25 May 2013 10:42 AM |
Alright, I understand now @Agent It seems like it would save a lot of time.
|
|
|
| Report Abuse |
|
|
|
| 25 May 2013 10:42 AM |
I completely forgot about selectors. :o! More work to be done.
It would be a script that is placed in the ScreenGui object. :D |
|
|
| Report Abuse |
|
|
|
| 25 May 2013 10:43 AM |
"sorry firefox this has nothing to do with what you said but how do you have so many places active without having BC?"
I used to have BC. Then I canceled it because I didn't like the direction the company was going. Kept all my places on my page. :3
I still do not have plans to buy BC again. |
|
|
| Report Abuse |
|
|
velibor
|
  |
| Joined: 24 Nov 2009 |
| Total Posts: 1003 |
|
|
| 25 May 2013 10:47 AM |
More ideas :
- Possible to add the selector :first, :last and none - Possible to put in percentages based on a fluid layout (So position: relative; width: 100%;)
|
|
|
| Report Abuse |
|
|
|
| 25 May 2013 10:50 AM |
Also, velibor, I would keep the same system as the real CSS. Meaning there will be no widthscale, etc properties. However, I will add support for scale AND offset:
gui { width: 20% -20px; }
The width of said GUI will be 20% of the parent's width minus 20 pixels. Also, the selectors for your example:
Frame.HelloWorld {
}
That would only select a Frame that is NAMED 'HelloWorld' (if I am understanding CSS correctly). |
|
|
| Report Abuse |
|
|
|
| 25 May 2013 10:53 AM |
Also (again, lol), velibor, in real CSS I have been experimenting with relative and absolute positions. Absolute positions still use percentages, but it is based on the window itself, not its parent element.
I'll have to look into selectors a bit more. I rarely use them. |
|
|
| Report Abuse |
|
|
velibor
|
  |
| Joined: 24 Nov 2009 |
| Total Posts: 1003 |
|
|
| 25 May 2013 11:03 AM |
The Frame example could work like that, but perheaps this works a little bit neater.
frame { .helloworld { width: 20%; } }
May I ask for the next CSS functions ? display The CSS display property or the visibility property background-color The background-color in the next format background-color: color(255, 255, 255) or background-color: color("White") border - border-color: - border-size: or the border: property
:after, :before, &, >
frame { & > textlabel { border: color("White") 2px; } }
|
|
|
| Report Abuse |
|
|
velibor
|
  |
| Joined: 24 Nov 2009 |
| Total Posts: 1003 |
|
|
| 25 May 2013 11:05 AM |
If you have any questions about CSS, CSS 2 and CSS 3 just ask :) I'm a website designer that works with CSS all the time.
|
|
|
| Report Abuse |
|
|
|
| 25 May 2013 11:06 AM |
I am trying to make this as close to real CSS as possible. I still have yet to look at selectors, but I will get to them.
local properties = {
width = "Size.X"; height = "Size.Y"; top = "Position.Y"; left = "Position.X"; display = "Visible"; opacity = "BackgroundTransparency"; ["border-color"] = "BorderColor3"; ["border-style"] = "BorderSizePixel"; ["color"] = "TextColor3"; ["font-family"] = "Font"; ["font-size"] = "FontSize"; ["text-align-vertical"] = "TextYAlignment"; ["text-align-horizontal"] = "TextXAlignment"; ["text-transparency"] = "TextTransparency"; ["z-index"] = "ZIndex"; } |
|
|
| Report Abuse |
|
|
velibor
|
  |
| Joined: 24 Nov 2009 |
| Total Posts: 1003 |
|
|
| 25 May 2013 11:10 AM |
["border-style"] must be ["border-size"]
Add ["background-color"] Add ["image"] Add ["content"]
content: "Hello world"
Add effects like TweenPosition (Also used in CSS 3)
|
|
|
| Report Abuse |
|
|
velibor
|
  |
| Joined: 24 Nov 2009 |
| Total Posts: 1003 |
|
|
| 25 May 2013 11:11 AM |
Also add the ["Border"] and the ["Background"] properties as whole objects.
|
|
|
| Report Abuse |
|
|
|
| 25 May 2013 11:12 AM |
"Also add the ["Border"] and the ["Background"] properties as whole objects."
Already working on support for them. They won't be in the properties list. |
|
|
| Report Abuse |
|
|
velibor
|
  |
| Joined: 24 Nov 2009 |
| Total Posts: 1003 |
|
|
| 25 May 2013 11:14 AM |
Also about :hover you can compare that to MouseEnter and remove the effect at MouseLeave. By saving the element style inside a variable and then return it back to normal perheaps ?
|
|
|
| Report Abuse |
|
|
| |
|
turbodaze
|
  |
| Joined: 17 Dec 2008 |
| Total Posts: 2169 |
|
| |
|
|
| 25 May 2013 02:55 PM |
| Ooooh, this could be really useful, I would totally use this. |
|
|
| Report Abuse |
|
|
|
| 25 May 2013 03:04 PM |
| I would definitely use it. |
|
|
| Report Abuse |
|
|
|
| 25 May 2013 03:36 PM |
Update:
Got these CSS fields working:
.NAME width height top left
:) |
|
|
| Report Abuse |
|
|