JBStrap Style customization

Thanks to a large number of SASS variables, you can customize the interfaces of JBStrap applications tailored to your needs. You don't need to create own style classes, but if you do, the framework can help you with that too.

Click here to learn more about SASS .

There are two groups of SASS variables: default variables and component-level variables. Both types of variables can be overwritten, so the final style will use the modified value already overwritten by the developer. By overwriting default variables, we can change the desired value everywhere at the same time. Overwriting component-level variables, on the other hand, means that the modification will only apply for that component. For all other components, it will not be modified, but the default value will be used.

Reference to Sass variables

How to Customize Your Application

If you want to modify the look of your application created by the framework, you can do so in your application by editing the style.SASS file. In this file, you can override each variable or define your own style classes. The project structure generated by the Maven archetype includes the style.SASS file, already including the default style. If you want to modify one of the SASS variables, the new variable must be overwritten before importing the jbstrap.SASS file provided by JBStrap. To define your own style class, you need to do it after importing it.

Example of changing the primary color:

In the example above, the primary color was changed from green to purple. If the application is recompiled after the above modification, all components that use the primary color will already be displayed in purple. Using the same method, you can change colors, margins, paddings, borders, fonts, or font sizes by simply overwriting the SASS variables. This will make your application fully customizable.

Example of overwriting a component-level variable:

In the above example, we changed the colors for the primary button so that the primary colors for the other components and the theme were not modified. If we recompile our application after the modification, we find that all colors have remained unchanged, except for the primary buttons. These have been modified so that the button label is gray, the background is purple and the button border is 30% lighter than the button's background color.

Let’s take a simple example. By overwriting a few variables, enhance your application with colors that match your brand.

This is what the application looks like before changing the style.

Contents of the modified style.scss file:

With just 16 lines of code above, the look of the application has completely changed.

Default variables in JBStrap

This section describes JBStrap's default variables and their default values. If we overwrite one of these variables, it will apply to the entire style.



Default value


Primary theme color



Theme alert color



The background color of the HTML body



Background color for the menu bar and nav bar



The background color of the pages



The default color of the text



The default horizontal indentation


Using Custom Classes

When you develop a web application, sometimes you might not want to change the style of every component instance, only a certain element's, or of a variety of certain elements. To do this, you can use your custom style class to override the required settings or create your custom settings. The style class created in this way can then be added to any of the component instances, and the style we specify will apply to that instance. The classes created in this way must be specified in the style.SASS file after importing JBStrap's default style. If the style class is defined before the import, the subsequent import will overwrite its modifications and thus they won't affect any elements.

Example of creating a custom style class:

If the purple-button style class is added to a button, it will appear on the screen in purple, with a 30% lighter frame, and a gray caption. Everything else will appear according to JBStrap's default style. With this solution, you can change a single button, but you can also add the style class to more than one button. Do this if you want to display multiple identical buttons on the interface.

Example of adding the purple-button style class to a button:

If a style class that is defined in style.SASS is added to a component, the component's appearance will be based on the specified style class. If you add a style class to a component that has not been defined, style modifications will be ignored, that is, the appearance of the component will not change. The same will happen if you type the name of a custom style class because then there will be no style settings in the application with the specified name.

Custom Styling

In case you want to change the look of only one component, you also have the option to use inline styles. Although the framework allows you to use inline style settings, this solution should be avoided. Why? The answer to this is that styles can only be changed by modifying the program code, and this solution does not support the use of classes, instead, each component must be set individually. Modifying the style later might be hard, since the source code has to be modified at several places.

To specify frequently used style elements, the framework includes built-in setter methods that allow you to easily make common settings. Style setting methods such as for the margin, padding, and border are predefined. These methods can be called from any component.

Setting the margin for a button:
Setting the top padding for a button:
Setting the border of a button to red and its thickness to 2 pixels:

If you do not want to modify one of the above three common style elements, you can use the setStyle method, using which you can perform all the CSS3 standard settings as an inline style setting. This method is also available for all components.

Changing the mouse cursor over a button:

Using CSS

The appearance of an application created with JBStrap can also be modified using conventional CSS descriptors. The framework does allow this solution if there is no other way or you need to use an external component (for which there is no SASS available). It is not advisable to use conventional CSS, nor is it supported by JBStrap. It allows for too many possible errors and also it is burdensome for developers.

If you still want to use this solution, however, place the created CSS file into the project's WebContent folder and register it in the framework. This is how the style sheet will be loaded on the client page upon loading the application.

Loading a custom CSS file into the application: