Outspacer Toolkit

☰A Widget Factory―❐🞨

File Edit

Welcome to OSTK OSTK (Outspacer Toolkit) is a mock application framework for making application windows resembling GNOME 2 applications which can be placed in Outspacer pages.

UsageIf you want to use this you can include it with: [[include :outspacer:component:ostk]]

I, the author scutoid studios will now painfully and ineffectively attempt to teach you how to use OSTK, and then I'll provide a few examples.

OSTK BasicsThere are a few basics you have to know about OSTK before you can use it.

OSTK works with a series of containers and elements.

A basic OSTK window uses this code:

[[div_ class="ui-window-container"]]

[[div_ class="ui-window-topbar"]]
[[span class="ui-window-icon"]]☰[[/span]][[span class="ui-window-title"]]Window title here![[/span]][[span class="ui-window-buttons"]][# ―][# ❐][# 🞨][[/span]]
[[/div]]

[[div_ class="ui-app-container"]]

[[div_ class="ui-app-topbar"]]
[[a href="###"]]__F__ile[[/a]] [[a href="###"]]__E__dit[[/a]]
[[/div]]

[[div_ class="ui-app-plain-container"]]

Write the content of your window in here!

[[/div]]

[[/div]]

[[/div]]

The window container is optional, and just decorates the app with a window titlebar and border. The app container goes inside the window and is required for any of the stuff inside to work.

Instead of a .ui-app-plain-container as above, this is a .ui-app-columns-container which flexes right on desktop and down on mobile for compatibility. The dividers, .ui-app-divider divs with no content, are vertical here instead of horizontal. Isn't that neat?

Below is a textarea, .ui-app-textarea:

Placeholder text…

The text is gray to show the text inside is placeholder text — remove this if you're showing a box that someone's already been typing around in. You can resize the box within a small range. There's a cursor added to show the reader that this isn't actually a box they can type in, for clarity.

For a regular box, add .no-resize, .no-cursor and .no-color:

Regular-looking text. This can be a box for anything! The possibilities…

You can add radio buttons with spans that have .ui-app-radio:

Radio No
Radio No
Radio No
Radio No
Radio Checked Yes

That last one has .checked to show it is the selected one.

You can use .ui-app-check to have check boxes instead:

Checkbox No
Checkbox Checked Yes
Checkbox Checked Yes
Checkbox No
Checkbox Checked Yes

This is .ui-app-info. FYI, .ui-app-button is the way to get buttons that look good here. You can use .button and .btn like you would for a regular button, but they'll get you Outspacer.net style buttons.

Extra tip: Add .ui-app-disabled to any element for a not-allowed pointer and 50% opacity. The button will still work, though, so be careful with the link's destination.

Get a button with .ui-app-button:
A UI button A disabled button

Get a text entry with a span and .ui-app-entry:

Entry text…

Make buttons and entries centered with .center:

A UI button
A disabled button
Entry text…

Make buttons and entries full width with .full-width:

A UI button
A disabled button
Entry text…

You can add .no-color and .no-cursor to make it look filled in:

Entry text!

You can add mock + and - buttons by adding a span inside with .ui-app-entry-plus-and-minus:

1 - +

If you want a frame, you can use a div with .ui-app-frame:

Frame content in here!

If you want a frame with a label, add into the frame div a span with .ui-app-frame-label:

Frame label!Frame content in here again, woah…

By default, tabviews have tabs on the left side like they do on Outspacer.net, so if you want tabs on the top you're going to need to use .ui-app-tabs-top as a wrapper div around the tabview.

Tab

Here is a tab.

Tab

Here is another tab.

Tab

Here is another 'nother tab.

Tab

Here is a tab.

Tab

Here is another tab.

Tab

Here is another 'nother tab.