Mobile
In order to make use of the responsive design, several adjustments have to be made in the respective project.
SCSS plugin (optional): maven-plugin needs to be added to project pom in case project-specific colours are desired. In this case source folder for local SCSS, source folder for jeesl SCSS and destination folder for parsed CSS must be defined.
Local SCSS file (optional): in order to set project-specific colours, redefine the content width or set a non-default background-image, a local SCSS file must be added to the local SCSS folder defined in the pom. A very bright, bright, medium, dark and very dark colour can be set (in this order) via the setColours mixin, otherwise colours will resort to the default jeesl-green tones. In order to change the content container size the setContainerWidth mixin has to be called. This mixin can take a mandatory minimum width that defines the smallest size at which the container stops growing and an optional maximum size, at which the container will grow again (this can be useful if the container is supposed to grow without a boundary but a fixed container width may improve presentation). By default, the regular 968px will be used as maximum container width. Please note that both of these mixins must be called before the import of the . A background image can be set by calling the mixin setBackground with an icon path (the exact path that will be used in the css to display the background, e.g. "/jeesl/javax.faces.resource/background.jpg.xhtml?ln=aupGfx&buildVersion=1626445190" , including quotes). Unlike the previous two, this mixin has to be called after the import.

Build CSS (optional): In order to parse SCSS into CSS from the source to destination folder, both defined in the pom in previous steps, maven command must be executed. This will not only build the existing SCSS into CSS files immediately, but will keep running and track future changes within the SCSS file and immediately transfer these changes into CSS.
File inclusion: both jeesl.responsive.js and either the optional locally defined CSS or jeeslResponsive.css from jeesl-jsf have to be included in the main .xhtml file. The former as the last file within a "last" facet in the body tag, the latter can simply be added within the head tag.
CSS class names: in compliance with the css class-naming standard, new class names are used for the responsive design. Most are used within the jeesl-project, thus not needing any change but few have to be added to the main elements of the page within the actual project.
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
</exclusion>
</exclusions>
</dependency>
<!-- Infinispan -->
<dependency>
<groupId>org.infinispan</groupId>
<artifactId>infinispan-cdi-embedded</artifactId>
<scope>compile</scope>
<exclusions>
<exclusion>
<groupId>org.jboss.logging</groupId>
<artifactId>jboss-logging</artifactId>
</exclusion>
</exclusions>
</dependency>
<!-- <dependency>
<groupId>com.github.ben-manes.caffeine</groupId>
<artifactId>caffeine</artifactId>
</dependency>
<dependency>
<groupId>org.infinispan</groupId>
<artifactId>infinispan-cdi-remote</artifactId>
<version>12.1.7.Final</version>
</dependency>
<dependency>
<groupId>org.infinispan</groupId>
<artifactId>infinispan-query-dsl</artifactId>
<version>12.1.7.Final</version>
</dependency> -->
<!-- Rewrite -->
@import '_colours';
@import '_sizes';
@include setColours(hsla(154,100%,33%,1), hsla(154,100%,27%,1), hsla(154,100%,24%,1), hsla(154,100%,20%,1), hsla(154,100%,18%,1));
@include setContainerWidth(950px, 1050px);
<h:outputScript library="primefaces" name="components.js"/>
<h:outputStylesheet library="css" name="showcase.css" />
</h:head>
<h:outputStylesheet library="css" name="showcaseResponsive.css"/>
<c:if test="#{mobileBrowserBean.isMobile}">
<h:outputStylesheet library="css" name="jeeslResponsiveMobile.css"/>
</c:if>
</f:facet>
<p:growl for="growl" widgetVar="growlWV" severity="info" showDetail="true" life="3000" sticky="false"><p:autoUpdate /></p:growl>
<style>.jeesl-icon, .pf-action-icon, .jeesl-menu-bar-item, .ui-selectonemenu, .ui-icon, .ui-tabs-nav { --icon-height-multiplier: #{sessionTenantBean.iconSizeMultiplier} }</style>
<div id="container" class="clearfix">
<div class="header jeesl-header">