All about developing user interfaces for Oxwall.
According to Oxwall design principles user interfaces are implemented in plugins (not themes) that is why this is the document for plugin developers rather than theme designers. You should build your functionality consistent with established Oxwall interface paradigms. This will result in integrated user experience which is ultimately our goal.
A standalone piece of content, including but not limited to widgets, may be displayed using boxes. Box as design element.
Box has optional parts such as:
Usually has title of widget or content and icon for better understanding.
Shows different display variants of content.
Shows actions for the content.
Used for main form actions, standalone actions and should be prominently displayed with unambiguous captions. Has characteristically big size.
Used for group actions upon one object (or a group of those). Color coding may apply to emphasize action meaning. Has characteristically modest size.
If used as a button often appears on mouse over. Can be used in groups. Has characteristically small size.
A button, a segment of buttons, a dropdown that shows up on any object to allow some context actions upon it. Usually recommended to use on mouseOver event unless it should be more sticky. Should be placed in the top right corner of an object (with proper margin). If your plugin logic requires, you can change that position. Context action as a design element.
Oxwall contains a lot of forms. They can be complicated and can contain several buttons. There are two types of form submit: positive (including neutral) and negative.
Positive submit: Positive actions are the normal form actions like “Submit”, “Save”, “Register”, “Create”, “Add”, etc. These are considered to be those actions that forms are made for. Additional positive actions can be used as an alternative for the main action. For example, when creating a blog post you can let user choose either “Publish” it or “Save as draft”. When you have both main and alternative actions, it should be obvious which one is the main, so it should be marked with special CSS class. Positive actions should always be on the left side after the form.
Negative submit: Negative actions are form submits like “Cancel”, “Reset”, “Delete”, etc. These are actions that user should be warned about and prevented from doing accidentally. Negative actions should always be on the right side and marked with special CSS class.
Note: We use standard buttons for regular forms.
Imagine, we are developing the blog post creation form. We certainly need “Publish” button for that. Let it be on the left side, right behind the form:
But we also need to give users an option to save it for future edition without publishing right now. That would be an alternative action, “Save as draft”. Since we have an alternative action, we need to make clear which one is main. So we apply a special, “positive” CSS style for the main action, “Publish”. In this theme it makes button label orange:
What about editing a post? We need to let users cancel their ongoing changes. For that we will add “Cancel” button. Since it's a “negative” action, we locate it on the right side of the form to prevent user from accidentally clicking on it. We also need to give it a special, “negative” CSS style to emphasize its distinction from the regular buttons even more. In this theme it will be removing the button icon:
When the post is being edited we also need to enable the author to remove it completely. For that we will also add a negative button, “Delete post”:
If you see any type of confirmation in Oxwall it will be Facebox with confirmation text and one button. There shouldn't be “Cancel” button or link to prevent clicking accidental clicking. It should be enough to click “X” or hitting “Esc” to cancel the action.
Use this if you need to sort some content by several options. The first one should be default. You should make options labels as short as possible and preferrably not to have more than 4-5 options to prevent them from dividing into 2 strings. Sort control should take the whole content width and be placed right before the content it sorts.