Base Style property (Theme for Web object)

Official Content
This documentation is valid for:
Sets the Base Style for a Theme for Web. All the libraries (ZIP files) with UI design definitions that were previously added to the KB as File objects are offered to select one of them. The selected library will be included when generating panels based on the Theme.

Values

Bootstrap v3 Selects the Bootstrap v3 library, which is a popular HTML, CSS, and JS library.
Bootstrap v3 RTL Selects the Bootstrap v3 Right-to-Left library.
None The Theme for Web object does not have any assigned library.

Description

The material available online about Web Design to integrate into the applications developed with GeneXus is astonishing! There is a boom of the so-called "CSS Frameworks," which complement Javascript development Frameworks (e.g., JQuery). Applications can be made more attractive thanks to CSS Frameworks.

These CSS Frameworks provide hundreds of widgets, compositions, sources, etc.
Some of the most popular ones are as follows:

  • Bulma.io
  • Bootstrap
  • SemanticUI
  • Pure.css
  • Kube
  • Materialize

What is a Base Library

A Base Library is an external resource that uses a CSS Framework. Samples can be: Semantic UI, Bootstrap, etc.

Base Libraries are external CSS & JS & Assets files that are globally installed with GeneXus.

How to create a new Base Library inside a KB

First, to create a Base Library, you have to zip all your required files (CSS, JS, etc.) inside a zip file and save it with .gxlibrary extension.

Then, you can include that Base Library inside your Knowledge Base by creating a new File object and specifying the path to upload your Base Library (make sure that when adding the file, the name finishes with _gxlibrary, otherwise the IDE will not consider it as a library).

Finally, the Library will be offered for this property so that you can select it.

While several libraries can be included in the KB, it is recommended to use the same Base Style for different objects, to maintain consistency.

Notes:

1) If you want to just add external references to resources you need to create a references file inside the library, each line of this file will be considered a reference.

For example, you could add a glue.references with the following content:

ace.js
ace.css

This means GeneXus will add references to those files when some Theme or User Control uses your Base Library.

2) If you create a Theme for Web object and you set its Base Style property = None, the Action Groups and the Tab controls, will work but with a basic aesthetic. To give them style you have to set the ActionGroup and ActionGroupItem Theme classes for the Action Group control, and the Tab and TabPage classes for the Tab control. 

3) Up to GeneXus 16 Upgrade 2, this property was called Base CSS Library. As of GX 16 Upgrade 3, it is renamed to Base Style, just like the Base Style property offered by the User Control objects.

Run-time/Design-time

This property applies only at design-time.

Availability

This property is available since GeneXus 16.

Scope

Objects: Theme

See Also

Base Style property (User Control object)
RTL

Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.