Style customization - Learn JBStrap

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:  
        
@charset "utf-8";
// Set your custom colors
$brand-primary: #8a4d76;
// Importing standard style
@import "jbstrap";

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:  
        
@charset "utf-8";
// Define custom colors:
$puple: #8a4d76;
// Modify primary button color
$btn-primary-color: #f2f2f2;   // Modifying the primary button text color
$btn-primary-bg: $purple;      // Modifying the primary button background color
$btn-primary-border: lighten($purple, 30%);  // Modifying the primary button border color
// Import standard style
@import "jbstrap";

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:  
        
@charset "utf-8";
// Define your brand color
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;
// Update JBStrap variables
$font-family-sans-serif: "Nunito", sans-serif;
$font-family-base: $font-family-sans-serif;
$gray-dark: $brown;
$gray-light: $beige-light;
$brand-primary: $purple;
$link-text-color: $pink;
$link-color-active: $pink;
$body-bg: $beige-lighter;
$page-bg: $beige-lighter;
$input-borer: transparent;
$input-border-focus: $primary;
// Import JBStrap style
@import "jbstrap";

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.

Variable	Description	Default value
$brand-primary	Primary theme color	#1ab394
$brand-danger	Theme alert color	#ed5565
$body-bg	The background color of the HTML body	#fff
$menu-bg	Background color for the menu bar and nav bar	#2f4050
$page-bg	The background color of the pages	#f3f3f4
$text-color	The default color of the text	#676a6c
$padding-base-vertival	The default horizontal indentation	6px

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:  
        
@charset "utf-8";
// Define custom varables
$puple: #8a4d76;
// Modify JBStrap varables
...
// Import JBStrap style
@import "jbstrap"
// Custom classes
.purple-button {
  color: #f3f3f3;
  background-color: $purple;
  border-color: lighten($purple, 30%);
}

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:  
        
new Button("Purple button").addStyleClass("purple-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:  
        
button.setMargin(Margin.MARGN_TOP_5);

  Setting the top padding for a button:  
        
button.setPadding(Padding.PADDING_TOP_3);

  Setting the border of a button to red and its thickness to 2 pixels:  
        
button.setBorder(Border.BORDER_TOP, Border.SUCCESS);

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:  
        
button.setStyle("cursor","hand");

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:  
        
JBStrap.addStyleSheet("customStyle.css");