generic image
Processing...
  • Games
  • Catalog
  • Develop
  • Robux
  • Search in Players
  • Search in Games
  • Search in Catalog
  • Search in Groups
  • Search in Library
  • Log In
  • Sign Up
  • Games
  • Catalog
  • Develop
  • Robux
   
ROBLOX Forum » Game Creation and Development » Scripting Helpers
Home Search
 

Re: Rbx.CSS - Who would use it?

Previous Thread :: Next Thread 
AgentFirefox is not online. AgentFirefox
Top 100 Poster
Joined: 20 Jun 2008
Total Posts: 22404
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
ScrewDeath is not online. ScrewDeath
Joined: 03 Jun 2012
Total Posts: 2700
25 May 2013 10:09 AM
Sounds interesting... I'd use it :P
Report Abuse
killjoy37 is not online. 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
AgentFirefox is not online. AgentFirefox
Top 100 Poster
Joined: 20 Jun 2008
Total Posts: 22404
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 is not online. 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
ServerLabs is not online. ServerLabs
Joined: 29 Dec 2010
Total Posts: 2263
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
tastefulbobo is not online. tastefulbobo
Joined: 14 May 2010
Total Posts: 166
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 is not online. 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
AgentFirefox is not online. AgentFirefox
Top 100 Poster
Joined: 20 Jun 2008
Total Posts: 22404
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
AgentFirefox is not online. AgentFirefox
Top 100 Poster
Joined: 20 Jun 2008
Total Posts: 22404
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 is not online. 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
AgentFirefox is not online. AgentFirefox
Top 100 Poster
Joined: 20 Jun 2008
Total Posts: 22404
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
AgentFirefox is not online. AgentFirefox
Top 100 Poster
Joined: 20 Jun 2008
Total Posts: 22404
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 is not online. 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 is not online. 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
AgentFirefox is not online. AgentFirefox
Top 100 Poster
Joined: 20 Jun 2008
Total Posts: 22404
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 is not online. 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 is not online. 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
AgentFirefox is not online. AgentFirefox
Top 100 Poster
Joined: 20 Jun 2008
Total Posts: 22404
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 is not online. 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
AgentFirefox is not online. AgentFirefox
Top 100 Poster
Joined: 20 Jun 2008
Total Posts: 22404
25 May 2013 01:44 PM
bump
Report Abuse
turbodaze is not online. turbodaze
Joined: 17 Dec 2008
Total Posts: 2169
25 May 2013 01:46 PM
Sounds good I'd use it.
Report Abuse
MrgamesNwatch is not online. MrgamesNwatch
Joined: 02 Feb 2009
Total Posts: 7729
25 May 2013 02:55 PM
Ooooh, this could be really useful, I would totally use this.
Report Abuse
dog456pop248 is not online. dog456pop248
Joined: 24 Aug 2008
Total Posts: 3977
25 May 2013 03:04 PM
I would definitely use it.
Report Abuse
AgentFirefox is not online. AgentFirefox
Top 100 Poster
Joined: 20 Jun 2008
Total Posts: 22404
25 May 2013 03:36 PM
Update:

Got these CSS fields working:

.NAME
width
height
top
left


:)
Report Abuse
Previous Thread :: Next Thread 
Page 1 of 1
 
 
ROBLOX Forum » Game Creation and Development » Scripting Helpers
   
 
   
  • About Us
  • Jobs
  • Blog
  • Parents
  • Help
  • Terms
  • Privacy

©2017 Roblox Corporation. Roblox, the Roblox logo, Robux, Bloxy, and Powering Imagination are among our registered and unregistered trademarks in the U.S. and other countries.



Progress
Starting Roblox...
Connecting to Players...
R R

Roblox is now loading. Get ready to play!

R R

You're moments away from getting into the game!

Click here for help

Check Remember my choice and click Launch Application in the dialog box above to join games faster in the future!

Gameplay sponsored by:
Loading 0% - Starting game...
Get more with Builders Club! Join Builders Club
Choose Your Avatar
I have an account
generic image