Layout

Icarus provides a main template.xhtml and additional topbar, layoutmenu, sidebarheader and footer fragments for the base layout. These xhtml files must be placed under WEB-INF folder and client pages should reference the template.xhtml as their template. Provided empty-page.xhtml is a sample content page using the main template.xhtml that defines "content" as the main ui:define placeholder.

Other required resources are the css, js, images and font files that are located inside resources/icarus-layout folder, simply copy the icarus-layout folder to your %WEB-APP-FOLDER%/resources folder so that final path would be %WEB-APP-FOLDER%/resources/icarus-layout/. Please refer to demo app or maven project of the demo app as the reference.

Theme

Icarus provides four different themes (icarus-orange, icarus-blue, icarus-green and icarus-red). Setup is simple as including the primefaces-icarus jar file to your classpath and defining primefaces.THEME context parameter in web.xml such as "icarus-green".

Custom Colors

Creating a custom theme and layout with new main colors is easy using sass as well, assume your color scheme name is "purple";

Theme
  • Open the maven project of the demo app
  • Create a folder called purple under /sass/theme/ folder
  • Create a file named theme.scss under this folder and add the content below.
  • Compile the sass file whose output should be theme.css and place this file under resources/primefaces-icarus-purple folder in your webapp, alternatively you might put it in a jar file under META-INF/resources/primefaces-icarus-purple folder.
  • Configure PrimeFaces using primefaces.THEME context parameter by setting the value as icarus-purple.

Following example colors define shades of purple as the main colors of theme.

$lightColor: #AB47BC;
$regularColor: #8E24AA;
$darkColor: #6A1B9A;

@import "../_theme.scss";
Layout
  • Open the maven project of the demo app
  • Create a file name layout-purple.scss under /sass/layout/ folder
  • Add the content below that defines the colors.
  • Compile the sass file whose output should be layout-purple.css and place this file under resources/icarus-layout/css folder in your webapp.
  • Include layout-purple.css in your template.

Following example colors define shades of purple as the main colors of layout.

$lightColor: #AB47BC;
$regularColor: #8E24AA;
$darkColor: #6A1B9A;
$gradientBack: 115deg, #AB47BC, #6A1B9A;

@import "_layout.scss";

Icons

Icarus uses font awesome icons for layout so enable font awesome support in PrimeFaces by setting primefaces.FONT_AWESOME context parameter in web.xml as true. If your PrimeFaces version does not have the font awesome integration, include the font-awesome manually in your application.

Cards

Card is a section to group content and layout provides a built-in css for it. Apply .card style class to your container to use it.

<div class="card">
    Content here
</div>

Grid CSS

Icarus uses new PrimeFaces Grid CSS throughout the samples, we strongly suggest using Grid CSS as your layout framework as it is well tested and supported by PrimeFaces. Grid CSS is automatically included on newer versions however if your PrimeFaces version is older than 5.3.14, add the provided grid.css file under /icarus-layout/css/ folder to your template manually.

Migration Guide

1.1 to 1.1.1

  • Update layout.js and layout css files
  • Replace theme jar with new jar
  • Update *MenuRenderer.java and *Menu.java

1.0.2 to 1.1

  • Update layout.js and layout-{color}.css
  • Update template xhtml files
  • Replace theme jar with new jar

1.0.1 to 1.0.2

  • Update layout.js and layout-{color}.css
  • Replace theme jar with new jar

1.0 to 1.0.1

  • Update layout.js and layout-{color}.css
  • Replace theme jar with new jar