CSS Stylesheets

NautDrafter's user interface is built using JavaFX and as such, uses CSS to define its look and feel.

The CSS stylesheets can be found in the nautdrafter.view.stylesheets package of the main project. Most general-purpose elements, such as buttons, text fields and menus have their styles defined in Base.css. Styles specific to custom UI components are generally placed in separate CSS files, given the same name as the FXML file they relate to (for example, styles specific to Titlebar.fxml are defined in Titlebar.css).

Variables

Several colour variables are defined towards the start of Base.css. These can be referenced from any CSS file and should be used when possible (rather than copying and pasting values).

Code Style

The points below give an overview of how NautDrafter's CSS files should be formatted. In general, just try to follow the style and format of the existing CSS files.

Class Naming

Classes are named following the same convention used by JavaFX's built-in class names. That is, class names should be all lowercase with words separated by hypens, for example, .player-name

When possible, refer to JavaFX controls (such as Button, Label, etc.) using their class name (e.g. .button rather than Button to target buttons).

Formatting

Use soft indents (spaces) set to 4 spaces per tab/indent level.
One selector per line.
Opening brace of declaration blocks go on the same line as the last selector, with a single space before it.
Closing brace of declaration blocks should be placed on a new line (and at the same indentation level as the selectors).
Declarations should be indented one level (4 spaces)
Each declaration gets its own line.
There should be a space after the : in a declaration.
A single empty line should be placed between rulesets.

Comments and Sectioning

Use comments to indicate what is being targeted by a collection of declaration blocks.

/*=============================================
 * MAJOR SECTION
 *=============================================*/
 
/* Sub Section 
---------------------*/
 
/* General comment */

Order

Declaration Blocks

Try to keep related declaration blocks near each other in the file. Place more general blocks (e.g. stuff that is being applied to several selectors/elements) towards the top of a section, and progress into more specific selectors further down.

Example

Example CSS

/*=============================================
 * SCROLLBARS
 *=============================================*/
.scroll-bar {
    -fx-background-color: transparent;
    -fx-opacity: 0.5;
}

.scroll-bar .track-background, 
.scroll-bar .track {
    -fx-background-color: transparent;
}

.scroll-bar .thumb {
    -fx-background-radius: 2px;
    -fx-background-color: -col-primary-trans;
}

.scroll-bar .increment-button, 
.scroll-bar .decrement-button {
    -fx-background-color: transparent;
    -fx-padding: 0;
}

.scroll-bar:horizontal .increment-arrow, 
.scroll-bar:horizontal .decrement-arrow {
    -fx-background-color: transparent;
    
    /* Overall scrollbar height is set by the button's padding */
    -fx-padding: 15px 0 0 0;
}

Resources

The JavaFX CSS Reference Guide give an overview of using JavaFX's CSS implementation and details of all available CSS properties.
ScenicView can be useful seeing how UI components are structured in the running application. Unfortunately it's live CSS reloading does not seem to be working.