Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


 

Most web applications delegate to Cascading Style Sheets (CSS) the stylistic details of the page – fonts, colors, margins, borders and alignment. This helps the remaining HTML to remain simple and semantic, which usually makes it easier to read and maintain.

...

Tapestry includes a built-in style sheet, tapestry.css, in all HTML documents (documents that have an outer <html> element and a nested <head> element), as part of the "core" JavaScript stack. For Tapestry 5.4 and later, the core JavaScript stack also includes the CSS for Bootstrap 3.1.1. 

Tapestry 5.5.0 and later also includes Bootstrap 4.3.1. To use it, just add @ImportModule(Bootstrap4Module.class) to your AppModule.

Tapestry 5.5.0 and later also allows you to have Tapestry not provide any CSS at all. To do that, just add @ImportModule(NoBootstrapModule.class) to your module. In this case, you'll need to set the tapestry.default-stylesheet (SymbolConstants#DEFAULT_STYLESHEET) configuration symbol to tell Tapestry what's your main CSS file. Otherwise, an exception will be thrown and the webapp won't start.

Adding your own CSS

A page or component (for example, a layout component) that is rendering the <head> tag can add a style sheet directly in the markup.

...

The SymbolConstants.BOOTSTRAP_ROOT ("tapestry.bootstrap-root") symbol tells Tapestry where the Bootstrap css CSS file is. You can override that symbol (see CSS 85459407) to have it point to your own version of Bootstrap (or even to an empty file if you want to eliminate Bootstrap entirely).

...

For the above, your bootstrap.css file would be in your app's META-INF/assets/css folder.