Styling Applications with CSS

Getting Started Writing CSS

Once you have created a new style you will have a directory containing, among others, a style.css file. This file is what Union will load. However, per the recommendations you should not add your style rules directly to that file. Instead, you should create separate files for different (groups of) elements and add your style rules there.

For example, to add style rules for the Button element, you can create a file called button.css, in your style's content/css/ directory, then add @import "button.css" to style.css and it will include the rules in button.css when loading the style.

Then in your button.css file, you can add CSS rules like this:

button
{
    width: 100px;
    height: 32px;

    background-color: white;
    color: black;
    border: 1px solid black;
}

This will result in all your buttons having a default size of 100px wide and 32px tall, with a white background, black text and a black border around it. For details on which exact properties you can use within style rules, see the Property reference.

What You Can and Cannot Style

Union strives to provide a generic "middle layer" that styles can provide styling information for and that outputs can consume to apply the styling. This middle layer includes the definition of what elements there are, what properties these elements have that you can use for styling and what kind of sub-elements there are. See the Element Reference for details.

While Union's goal is to give as much freedom to you as style creator to style things the way you want, there are inherent limitations in what Union can do due to how the underlying technology works.

The most significant limitation is that the application, and not Union, is the one that decides the layout of things. This means that, unless otherwise noted, you will not be able to control the position of elements. For sizes, the application is also in final control, but you can provide an initial size for most elements.

The exception to this is that there are certain elements that consist of several sub-elements. Union is generally in control of the placement of these sub-elements, which allows you as style creator to influence them.

In addition to these limitations, please also read the Supported CSS to see what kind of properties are and are not supported.