rbx_web - Styxling/Feather GitHub Wiki

rbx.web is a UI made to look like an old web browser from before the turn of the century, specifically taking inspiration from Windows 98 and Web 1.0. It features a unique markdown "language" that is used in ModuleScripts to create web pages for users to explore.

To create a new website, create a folder in ReplicatedStorage > rbx.web > Sites and give it a unique name. This name will be used as the main part of the site's address. Inside that put two folders: "pages" and "style"

The "pages" folder is made to hold ModuleScripts that each act as a page on that website. The "styles" folder is made to hold ModuleScripts that contain style dictionaries that can be used across multiple pages, allowing for easy visual cohesion across pages on a site.

Pages

Page modules must each have their own names, and of them, at least one MUST be named "home" to serve as the website's home page. Page modules return a dictionary with the following structure:

type page = {
	style : {} | string, -- Contains style data for the page. If the value is a string, a style module of that name will be imported in place of the table. Can be excluded.
	header : {}, -- The page header.
	body : {}, -- The main body of the page.
	footer : {}, -- The page footer.
}

The header, body, and footer can contain as many elements as you desire.

Elements

Elements are dictionaries that contain data used by the rbx.web client to build pages. Elements are based on a limited version of HTML.

BEFORE GETTING INTO ELEMENTS: The pages for elements will include a data type called "scale" which is completely factitious in lua. For this project, the "scale" data type is a string which contains two pieces of information:

  1. %
  2. Number between 0 - 1
    Using this will cause size values to use the Scale part of a UDim value rather than the Offset part.

For example: line_height = "%0.9" This will translate to UDim.new(0.9, 0)

Here are the existing elements:
br
div
drop
hdiv
img
invblock
line
nav
p
vline

Style Sheets

Style sheets can be used for entire websites or individual pages on a site. Like pages, they usually consist of a module with a unique name. Note that all style tags can be applied inside elements as well (see each element page to see what style tags they can use and how to apply them)

If a style sheet named "default" exists, it will serve as a universal default for the entire website.

In the case of style modules, they must return a dictionary where the indexes are broken into two categories:

1. Elements / Page Parts

Page parts include:

  • page
  • header
  • body
  • footer

"Page" is style data applied to all elements on the page. The other page parts are applied to the sections of the same name on the page.

Elements can have styles applied to all instances of that element by using the element's name as an index:

div = {margine = 5} -- This will make all div elements have a margine of 5 pixels

2. Tags

The second category of style indexes are tags. These are custom style blocks that can be applied to individual elements whose "style" property is equal to a string. These style blocks must have indexes starting with an underscore. When referencing the tag in an element dictionary, the underscore is omitted:

style = {
	_example = {
		text_color = Color3.new(.5, .5, 1)
	}
}

body = {
	{type = "p", text = "Hello World!", style = "example"}
}

Universal style tags

Certain tags can be applied to almost all elements. Note that all other tags can be added to the style guide for all elements, however not all style tags have an application for all elements.

Universal tags:

-- Defaults included as comments
background_color : Color3 -- (1, 1, 1)
outline = {
	line_join_mode : Enum.LineJoinMode -- Miter
	thickness : number -- 0 
	color : Color3 -- (0, 0, 0)
},
style_descends : boolean | number -- false

If styleDescends is true or a number, child elements will inherit the style of the parent. If styleDescends is specifically true, it it will apply to all descendants. This behavior can be cut off by having an element's style.styleDescends tag expressly set to false. If styleDescends is a number, the style will descend for that many generations. Once again, if an element's style.styleDescends tag is expressly set to false, the style will not descend to it or its children.

Style Application Order

Because there are so many layers to styles and how they are applied, here's a helpful list to help you visualize the order of priority. The higher on the list, the higher the priority.

  1. Inline style / Custom style tag
  2. Element type in page's style guide
  3. Section type in page's style guide
  4. "page" index in page's style guide
  5. Element type in site's style guide
  6. Section type in site's style guide
  7. "page" index in site's style guide
  8. Element type's defaults
  9. Section type's defaults
  10. General defaults