HARMONY
/

Getting Started

First of all, you'd need SASS to compile CSS, proceed to SASS Installation before beginning if you do not have SASS available in your command line.

Demo project has an integrated jetty plugin so running the sample is easy as building the css first followed by the mvn jetty:run command.

sass --update src/main/webapp/resources/ --sourcemap=none
mvn jetty:run

Navigate to http://localhost:8080/harmony to view the demos which is exactly same as the live version.

Layout

Harmony utilizes JSF templating APIs and provides a main template.xhtml along with additional topbar, sidebar, rightpanel, 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.xhtml is a sample content page using the main template.xhtml that defines "content" as the main ui:define placeholder. By default template defines 3 placeholders (page title, breadcrumb and actual content)to insert content and you can add more as per your requirements.

Sample page below uses the main template from harmony.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
                
    <ui:define name="title">Test Page</ui:define>

    <ui:define name="content">
        Content goes here
    </ui:define>
</ui:composition>

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

GuestPreferences Bean

GuestPreferences is a simple session scoped bean to keep the user customizations of the layout, template xhtml files refer to this bean to dynamically change their behavior such as menu mode or theme. This bean is not necessary to run the harmony and only used for demo purposes. For example template.xhtml includes layout color depending on a user preference using an EL expression.

<h:outputStylesheet name="css/layout-#{guestPreferences.layout}.css" library="harmony-layout" />   

In your application, you may also need a similar bean to make the template dynamic so that your users will be able to change their preferred menu or theme.

<h:outputStylesheet name="css/layout-blue.css" library="harmony-layout" />   

Source code of GuestPreferences.

public class GuestPreferences implements Serializable {

    private String theme = "blue";
                
    public String getTheme() {		
        return theme;
    }

    public void setTheme(String theme) {
        this.theme = theme;
    }
}

Theme

harmony provides 30+ PrimeFaces layout color designs out of the box where each layout offers 3 alternatives; "colored" (default), "light" or "dark". Main difference is the color of panel headers between these options, in colored theme panel headers get the color of the primary color of the layout whereas in light and dark modes headers get a gray and darker color respectively. Setup of a theme simple as including the theme jar in your classpath and defining primefaces.THEME context parameter in web.xml such as "primefaces-harmony-harmony-absolution". Full list of available themes are;

  • primefaces-harmony-absolution
  • primefaces-harmony-absolution-light
  • primefaces-harmony-absolution-dark
  • primefaces-harmony-bliss
  • primefaces-harmony-bliss-light
  • primefaces-harmony-bliss-dark
  • primefaces-harmony-clarity
  • primefaces-harmony-clarity-light
  • primefaces-harmony-clarity-dark
  • primefaces-harmony-comfort
  • primefaces-harmony-comfort-light
  • primefaces-harmony-comfort-dark
  • primefaces-harmony-concord
  • primefaces-harmony-concord-light
  • primefaces-harmony-concord-dark
  • primefaces-harmony-dulce
  • primefaces-harmony-dulce-light
  • primefaces-harmony-dulce-dark
  • primefaces-harmony-dusk
  • primefaces-harmony-dusk-light
  • primefaces-harmony-dusk-dark
  • primefaces-harmony-elegance
  • primefaces-harmony-elegance-light
  • primefaces-harmony-elegance-dark
  • primefaces-harmony-esprit
  • primefaces-harmony-esprit-light
  • primefaces-harmony-esprit-dark
  • primefaces-harmony-essence
  • primefaces-harmony-essence-light
  • primefaces-harmony-essence-dark
  • primefaces-harmony-eternity
  • primefaces-harmony-eternity-light
  • primefaces-harmony-eternity-dark
  • primefaces-harmony-euclid
  • primefaces-harmony-euclid-light
  • primefaces-harmony-euclid-dark
  • primefaces-harmony-faith
  • primefaces-harmony-faith-light
  • primefaces-harmony-faith-dark
  • primefaces-harmony-fate
  • primefaces-harmony-fate-light
  • primefaces-harmony-fate-dark
  • primefaces-harmony-grace
  • primefaces-harmony-grace-light
  • primefaces-harmony-grace-dark
  • primefaces-harmony-hazel
  • primefaces-harmony-hazel-light
  • primefaces-harmony-hazel-dark
  • primefaces-harmony-honor
  • primefaces-harmony-honor-light
  • primefaces-harmony-honor-dark
  • primefaces-harmony-hope
  • primefaces-harmony-hope-light
  • primefaces-harmony-hope-dark
  • primefaces-harmony-infinity
  • primefaces-harmony-infinity-light
  • primefaces-harmony-infinity-dark
  • primefaces-harmony-joy
  • primefaces-harmony-joy-light
  • primefaces-harmony-joy-dark
  • primefaces-harmony-merit
  • primefaces-harmony-merit-light
  • primefaces-harmony-merit-dark
  • primefaces-harmony-navy
  • primefaces-harmony-navy-light
  • primefaces-harmony-navy-dark
  • primefaces-harmony-purity
  • primefaces-harmony-purity-light
  • primefaces-harmony-purity-dark
  • primefaces-harmony-rebel
  • primefaces-harmony-rebel-light
  • primefaces-harmony-rebel-dark
  • primefaces-harmony-rebirth
  • primefaces-harmony-rebirth-light
  • primefaces-harmony-rebirth-dark
  • primefaces-harmony-royal
  • primefaces-harmony-royal-light
  • primefaces-harmony-royal-dark
  • primefaces-harmony-ruby
  • primefaces-harmony-ruby-light
  • primefaces-harmony-ruby-dark
  • primefaces-harmony-solace
  • primefaces-harmony-solace-light
  • primefaces-harmony-solace-dark
  • primefaces-harmony-tranquil
  • primefaces-harmony-tranquil-light
  • primefaces-harmony-tranquil-dark
  • primefaces-harmony-valor
  • primefaces-harmony-valor-light
  • primefaces-harmony-valor-dark
  • primefaces-harmony-vanity
  • primefaces-harmony-vanity-light
  • primefaces-harmony-vanity-dark
  • primefaces-harmony-violet
  • primefaces-harmony-violet-light
  • primefaces-harmony-violet-dark

A custom theme can be developed by the following steps.

  • Create a custom theme folder such as primefaces-harmony-myown under webapp/resources and place an empty theme.scss inside.
  • Copy the sass folder from the distribution to webapp/resources.
  • Define the variables listed below and import the ../sass/theme/_theme.scss file.
  • Build the scss to generate css.
  • Set primefaces.THEME context parameter as harmony-myown
  • Either bundle the css in a jar file for reuse between different projects or serve from webapp/resources/primefaces-harmony-myown folder using a h:outputStyleSheet.

Here are the variables required to create a theme.

//mainly used in forms
$primaryColor:#8753c8;
$primaryColorText:#ffffff;
$primaryDarkColor:#5f27a3;
$primaryDarkColorText:#ffffff;
$primaryDarkAltColor:#743db7;
$primaryDarkAltColorText:#ffffff;
$primaryDarkerColor:#441c75;
$primaryDarkerColorText:#ffffff;
$primaryLightColor:#c5a7ea;
$primaryLightColorText:#333333;

//highlighted content
$secondaryColor:#84e8f2;
$secondaryColorText:#333333;
$secondaryDarkColor:#47beca;
$secondaryDarkColorText:#333333;

//headers
$containerHeaderBgColor:$primaryColor;
$containerHeaderBorder:1px solid $primaryColor;
$containerHeaderTextColor:$primaryColorText;
$containerHeaderIconColor:$primaryLightColor;
$containerHeaderIconHoverColor:lighten($primaryLightColor, 15%);

$containerHeaderHoverBgColor:$primaryDarkColor;
$containerHeaderHoverBorder:1px solid $primaryDarkColor;
$containerHeaderHoverTextColor:$primaryDarkColorText;
$containerHeaderHoverIconColor:$primaryDarkColorText;

$containerHeaderActiveBgColor:$secondaryColor;
$containerHeaderActiveBorder:1px solid $secondaryColor;
$containerHeaderActiveTextColor:$primaryLightColorText;
$containerHeaderActiveIconColor:$primaryLightColorText;

$containerHeaderActiveHoverBgColor:$secondaryDarkColor;
$containerHeaderActiveHoverHoverBorder:1px solid $secondaryDarkColor;
$containerHeaderActiveHoverrTextColor:$secondaryDarkColorText;
$containerHeaderActiveHoverIconColor:$secondaryDarkColorText;

@import '../sass/theme/_theme';

An example sass command to compile the css would be;

sass src/main/webapp/resources/primefaces-harmony-myown/theme.scss src/main/webapp/resources/primefaces-harmony-myown/theme.css  --sourcemap=none

Watch mode is handy to avoid compiling everytime when a change is made, instead use the following command so that sass generates the file whenever you make a customization. This builds all css files whenever a change is made to any scss file.

sass -w src/main/webapp/resources/ --sourcemap=none

Layout

Layout customization is similar to theme method.

  • Choose a layout name such as layout-myown.
  • Create an empty file named layout-myown.scss inside resources/harmony-layout/css folder.
  • Copy the sass folder from the distribution to webapp/resources.
  • Define the variables listed below and import the /sass/layout/_layout.scss file.
  • Build the scss to generate css
  • Serve the css by importing it using h:outputStylesheet.

Here are the variables required to create a layout.

/*Topbar*/
$topbarBgLeftColor:#2d3f47;
$topbarBgRightColor:#2d3f47;
$topbarLogoColor:#ffffff;
$topbarProfileTextColor:#ffffff;
$topbarQuickMenuIconColor1:#f4f4f4;
$topbarQuickMenuIconColor2:#f4f4f4;
$topbarQuickMenuIconColor3:#f4f4f4;
$topbarQuickMenuIconColor4:#f4f4f4;
$topbarQuickMenuButtonTextColor:#ffffff;
$quickMenuTooltipBgColor:#212121;
$quickMenuTooltipTextColor:#c8c8c8;
$topbarSearchInputTextColor:#ffffff;
$topbarSearchInputBorderColor:#f4f4f4;
$topbarSearchInputBorderFocusColor:#ffffff;
$topbarSearchInputIconColor:#ffffff;
$topbarRightPanelIconColor:#f4f4f4;
$topbarIconHoverBgColor:#425259;
$topbarSidebarButtonColor:#f4f4f4;

/* Topbar Profile */
$profileMenuBgColor:#212121;
$profileMenuItemTextColor:#eaeaea;
$profileMenuItemIconColor:#6f919f;
$profileMenuItemHoverBgColor:#333333;
$profileMenuItemHoverIconColor:#6f919f;
$profileMenuItemHoverTextColor:#f4f4f4;
$profileMenuItemActiveBgColor:#6f919f;
$profileMenuItemActiveTextColor:#ffffff;
$profileMenuItemActiveIconColor:#ffffff;

/*Sidebar*/
$sidebarBgColor:#eaeaea;
$sidebarDividerColor:#d0d0d0;

$sidebarMenuItemTextColor:#333333;
$sidebarMenuItemIconColor:#a6a6a6;
$sidebarMenuItemHoverBgColor:#d0d0d0;
$sidebarMenuItemHoverIconColor:#333333;
$sidebarMenuItemHoverTextColor:#333333;
$sidebarMenuItemActiveBgColor:#acbcc3;
$sidebarMenuItemActiveTextColor:#2d3f47;
$sidebarMenuItemActiveIconColor:#2d3f47;

$sidebarSubmenuBgColor:#f4f4f4;
$sidebarSubmenuItemTextColor:#333333;
$sidebarSubmenuItemIconColor:#a6a6a6;
$sidebarSubmenuItemHoverBgColor:#d0d0d0;
$sidebarSubmenuItemHoverTextColor:#333333;
$sidebarSubmenuItemHoverIconColor:#333333;
$sidebarSubmenuItemActiveBgColor:#eaeaea;
$sidebarSubmenuItemActiveTextColor:#2d3f47;
$sidebarSubmenuItemActiveIconColor:#2d3f47;

$slimMenuTooltipBgColor:#212121;
$slimMenuTooltipTextColor:#ffffff;

//mask
$maskBgColor: #212121;

/*Footer*/
$footerBgColor:#212121;
$footerTextColor:#ffffff;
$footerIconColor:#ffffff;

@import '../../sass/layout/_layout';

SASS Variables

In case you'd like to customize common variables such as font-size, the _variables.scss under the sass folder is where they are defined.

$fontFamily:"Open Sans","Helvetica Neue",sans-serif;
$fontSize:14px;
$textColor:#333333;
$textSecondaryColor:lighten($textColor,25%);
$borderRadius:0px;
$dividerColor:#d8dae2;
$transitionDuration:.3s;

_variables.scss under sass/layout folder define the shared variables of the layout.

@import '../_variables';

$bodyBgColor:#f4f4f4;
$breakpoint:1024px;

Similarly _variables.scss files under sass/theme contains the whole set of variables to generate a PrimeFaces theme.

@import '../_variables';

//icons
$iconWidth:$fontSize + 2;
$iconHeight:$fontSize + 2;
$iconFontSize:$fontSize + 2;

//anchor
$linkColor:$primaryColor;
$linkHoverColor:$primaryDarkColor;
$linkActiveColor:$primaryDarkerColor;

//highlight
$highlightBgColor:$secondaryColor;
$highlightColorText:$secondaryColorText;

//input field
$inputPadding:6px;
$inputBgColor:#ffffff;
$inputBorder:1px solid #a6a6a6;
$inputHoverBorderColor:#212121;
$inputFocusBorderColor:$primaryColor;
$inputErrorBorderColor:#a80000;
$inputPlaceholderTextColor:#666666;
$inputFocusShadow:none;
$inputTransition: border-color $transitionDuration;

//input lists
$inputListMinWidth:12em;
$inputListBgColor:#ffffff;
$inputListBorder:0px none;
$inputListPadding:0;
$inputListItemPadding:6px 12px;
$inputListItemBgColor:transparent;
$inputListItemTextColor:#333333;
$inputListItemHoverBgColor:#eaeaea;
$inputListItemHoverTextColor:#333333;
$inputListItemHighlightBgColor:$secondaryColor;
$inputListItemHighlightTextColor:$secondaryColorText;
$inputListItemBorder:0 none;
$inputListItemMargin:0;
$inputListHeaderPaddingTop:6px;
$inputListHeaderPaddingLeft:12px;
$inputListHeaderPaddingRight:12px;
$inputListHeaderPaddingBottom:6px;
$inputListHeaderBgColor:#ffffff;
$inputListHeaderTextColor:$textColor;
$inputListHeaderBorder:1px solid #eaeaea;
$inputListHeaderSearchIconColor:$primaryColor;
$inputListHeaderCloseIconColor:$textColor;
$inputListHeaderCloseIconHoverColor:$primaryColor;
$inputListHeaderCloseIconTransition:color $transitionDuration;

//inputs with panels (password, keyboard)
$inputContentPanelPadding:12px;
$inputContentPanelBgColor:#ffffff;
$inputContentPanelTextColor:$textColor;

//inputs with overlays
$inputOverlayBorder:1px solid #c8c8c8;
$inputOverlayShadow:0 3px 6px 0 rgba(0, 0, 0, 0.16);

//input dropdowns
$inputDropdownIconColor:$textColor;

//inputs with buttons
$inputButtonWidth:30px;

//button
$buttonTextOnlyPadding:6px 14px;
$buttonWithLeftIconPadding:6px 14px 6px 28px;
$buttonWithRightIconPadding:6px 28px 6px 14px;
$buttonIconOnlyPadding:6px;
$buttonIconOnlyWidth:30px;
$buttonBgColor:$primaryColor;
$buttonBorder:1px solid $primaryColor;
$buttonTextColor:$primaryColorText;
$buttonHoverBgColor:$primaryDarkAltColor;
$buttonHoverTextColor:$primaryDarkAltColorText;
$buttonHoverBorderColor:$primaryDarkAltColor;
$buttonActiveBgColor:$primaryDarkColor;
$buttonActiveTextColor:$primaryDarkColorText;
$buttonActiveBorderColor:$primaryDarkColor;
$buttonFocusOutline:1px solid #000000;
$buttonFocusOutlineOffset:1px;
$buttonTransition: background-color $transitionDuration;
$secondaryButtonBgColor:#f4f4f4;
$secondaryButtonBorder:1px solid #f4f4f4;
$secondaryButtonTextColor:#333333;
$secondaryButtonHoverBgColor:#c8c8c8;
$secondaryButtonHoverTextColor:#212121;
$secondaryButtonHoverBorderColor:#c8c8c8;
$secondaryButtonActiveBgColor:$secondaryColor;
$secondaryButtonActiveTextColor:$secondaryColorText;
$secondaryButtonActiveBorderColor:$secondaryColor;
$raisedButtonShadow:0 2px 3px 0 rgba(0, 0, 0, 0.15);
$roundedButtonBorderRadius:15px;

//checkbox
$checkboxWidth:20px;
$checkboxHeight:20px;
$checkboxActiveBorderColor:$primaryColor;
$checkboxActiveBgColor:$primaryColor;
$checkboxActiveHoverBgColor:$primaryDarkColor;
$checkboxActiveTextColor:$primaryColorText;
$checkboxFocusBgColor:$inputBgColor;
$checkboxFocusTextColor:$primaryColor;
$checkboxFocusBorderColor:$primaryColor;
$checkboxFocusShadow:none;
$checkboxTransition: background-color $transitionDuration, border-color $transitionDuration;

//radiobutton
$radioButtonWidth:20px;
$radioButtonHeight:20px;
$radioButtonActiveBorderColor:$primaryColor;
$radioButtonActiveBgColor:$primaryColor;
$radioButtonActiveHoverBgColor:$primaryDarkColor;
$radioButtonActiveTextColor:$primaryColorText;
$radioButtonFocusBgColor:$inputBgColor;
$radioButtonFocusTextColor:$primaryColor;
$radioButtonFocusBorderColor:$primaryColor;
$radioButtonFocusShadow:none;
$radioButtonTransition: background-color $transitionDuration, border-color $transitionDuration;

//togglebutton
$toggleButtonBgColor:#dadada;
$toggleButtonBorder:1px solid #dadada;
$toggleButtonTextColor:#333333;
$toggleButtonIconColor:#666666;
$toggleButtonHoverBgColor:#c8c8c8;
$toggleButtonHoverBorderColor:#c8c8c8;
$toggleButtonHoverTextColor:#333333;
$toggleButtonHoverIconColor:#212121;
$toggleButtonActiveBgColor:$secondaryColor;
$toggleButtonActiveBorderColor:$secondaryColor;
$toggleButtonActiveTextColor:$secondaryColorText;
$toggleButtonActiveIconColor:$secondaryColorText;
$toggleButtonActiveHoverBgColor:$secondaryDarkColor;
$toggleButtonActiveHoverBorderColor:$secondaryDarkColor;
$toggleButtonActiveHoverTextColor:$secondaryDarkColorText;
$toggleButtonActiveHoverIconColor:$secondaryDarkColorText;
$toggleButtonFocusOutline:0 none;
$toggleButtonFocusBgColor:#c8c8c8;
$toggleButtonFocusBorderColor:#666666;
$toggleButtonFocusTextColor:#333333;
$toggleButtonFocusIconColor:#212121;

//inplace
$inplacePadding:6px;
$inplaceHoverBgColor:#eaeaea;
$inplaceHoverTextColor:$textColor;
$inplaceTransition:background-color $transitionDuration;

//rating
$ratingTransition:color $transitionDuration;
$ratingCancelIconColor:#e4018d;
$ratingCancelHoverIconColor:#b5019f;
$ratingIconWidth:20px;
$ratingIconHeight:20px;
$ratingIconFontSize:20px;
$ratingStarIconColor:$textColor;
$ratingStarIconHoverColor:$secondaryDarkColor;

//slider
$sliderBgColor:#c8c8c8;
$sliderHeight:4px;
$sliderWidth:4px;
$sliderHandleWidth:16px;
$sliderHandleHeight:16px;
$sliderHandleBgColor:#ffffff;
$sliderHandleBorder:2px solid #666666;
$sliderHandleHoverBorder:2px solid $primaryColor;
$sliderHandleHoverBgColor:2px solid #666666;
$sliderHandleFocusBorder:2px solid $primaryColor;
$sliderHandleFocusBgColor:$primaryColor;
$sliderHandleBorderRadius:50%;
$sliderHandleTransition:background-color $transitionDuration;
$sliderRangeBgColor:$primaryColor;

//calendar
$calendarWidth:260px;
$calendarNavIconColor:#a6a6a6;
$calendarNavIconHoverColor:$primaryColor;
$calendarNavIconTransition:color $transitionDuration;
$calendarTitlePadding:1px 12px;
$calendarTitleBgColor:inherit;
$calendarTitleTextColor:$textColor;
$calendarTableMargin:12px 0 0 0;
$calendarCellPadding:4px;
$calendarCellDatePadding:4px;
$calendarCellDateAnchorPadding:4px;
$calendarCellDateHoverBgColor:#eaeaea;
$calendarCellDateBorderRadius:$borderRadius;
$calendarCellDateSelectedBgColor:$primaryColor;
$calendarCellDateSelectedTextColor:$primaryColorText;
$calendarCellDateTodayBgColor:#d0d0d0;
$calendarCellDateTodayTextColor:$textColor;
$calendarOverlayBorder:0 none;
$calendarTimePickerMargin:12px 0;
$calendarTimePickerLabelPadding:0;
$calendarTimePickerInputPadding:6px 0;
$calendarTimePickerInputMargin:0 10px 10px 40%;

//spinner
$spinnerButtonWidth: 16px;
$spinnerButtonBorder: 0 none;
$spinnerButtonBgColor:transparent;
$spinnerButtonTextColor:$textColor;
$spinnerButtonHoverBorder: 0 none;
$spinnerButtonHoverBgColor:#eaeaea;
$spinnerButtonHoverTextColor:$textColor;
$spinnerButtonActiveBorder: 0 none;
$spinnerButtonActiveBgColor:$primaryColor;
$spinnerButtonActiveTextColor:$primaryColorText;
$spinnerButtonFocusBorder: 0 none;
$spinnerButtonFocusBgColor:#eaeaea;
$spinnerButtonFocusTextColor:$textColor;

//input switch
$inputSwitchBorderRadius:30px;
$inputSwitchOffBorderColor:#a6a6a6;
$inputSwitchOffBgColor:#ffffff;
$inputSwitchOnBorderColor:$primaryColor;
$inputSwitchOnBgColor:$primaryColor;
$inputSwitchHandleOffBgColor:#666666;
$inputSwitchHandleOnBgColor:#ffffff;
$inputSwitchHandleHoverBgColor:#333333;
$inputSwitchHandleActiveHoverBgColor:$primaryDarkColor;
$inputSwitchOffHandleFocusBgColor:#333333;
$inputSwitchOnHandleFocusBgColor:#d0d0d0;
$inputSwitchHandleHeight:22px;
$inputSwitchHandleWidth:22px;
$inputSwitchTransition:border-color $transitionDuration;

//keyboard
$keyboardButtonPadding:6px;
$keyboardButtonMargin:1px;
$keyboardButtonBorder:1px solid transparent;
$keyboardButtonBgColor:#ffffff;
$keyboardButtonTextColor:$textColor;
$keyboardButtonHoverBorder:1px solid transparent;
$keyboardButtonHoverBgColor:#eaeaea;
$keyboardButtonHoverTextColor:$textColor;
$keyboardButtonActiveBorder:1px solid $primaryColor;
$keyboardButtonActiveBgColor:$primaryColor;
$keyboardButtonActiveTextColor:$primaryColorText;
$keyboardSpecialButtonBorder:1px solid transparent;
$keyboardSpecialButtonBgColor:$secondaryColor;
$keyboardSpecialButtonTextColor:$secondaryColorText;
$keyboardSpecialButtonHoverBorder:1px solid transparent;
$keyboardSpecialButtonHoverBgColor:$secondaryDarkColor;
$keyboardSpecialButtonHoverTextColor:$secondaryDarkColorText;

//panel common
$panelHeaderBorder:$containerHeaderBorder;
$panelHeaderBgColor:$containerHeaderBgColor;
$panelHeaderTextColor:$containerHeaderTextColor;
$panelHeaderIconColor:$containerHeaderIconColor;
$panelHeaderIconHoverColor:$containerHeaderIconHoverColor;
$panelHeaderIconTransition:color $transitionDuration;
$panelHeaderFontWeight:700;
$panelHeaderPadding:8px 14px;
$panelContentBorder:1px solid #c8c8c8;
$panelContentBgColor:#ffffff;
$panelContentTextColor:$textColor;
$panelContentPadding:8px 14px;
$panelContentLineHeight: 1.5;
$panelFooterBorder:1px solid #c8c8c8;
$panelFooterBgColor:#ffffff;
$panelFooterTextColor:$textColor;
$panelFooterPadding:8px 14px;
$panelHeaderHoverBgColor:$containerHeaderHoverBgColor;
$panelHeaderHoverBorder:$containerHeaderHoverBorder;
$panelHeaderHoverTextColor:$containerHeaderHoverTextColor;
$panelHeaderHoverIconColor:$containerHeaderHoverIconColor;
$panelHeaderActiveBgColor:$containerHeaderActiveBgColor;
$panelHeaderActiveBorder:$containerHeaderActiveBorder;
$panelHeaderActiveTextColor:$containerHeaderActiveTextColor;
$panelHeaderActiveIconColor:$containerHeaderActiveIconColor;
$panelHeaderActiveHoverBgColor:$containerHeaderActiveHoverBgColor;
$panelHeaderActiveHoverBorder:$containerHeaderActiveHoverHoverBorder;
$panelHeaderActiveHoverTextColor:$containerHeaderActiveHoverrTextColor;
$panelHeaderActiveHoverIconColor:$containerHeaderActiveHoverIconColor;
$panelHeaderTransition:0 none;

//accordion
$accordionHeaderMargin: 1px;

//tabview
$tabsNavBorder:0 none;
$tabsNavBgColor:$panelHeaderBgColor;

//scrollpanel
$scrollPanelHandleBgColor:#dadada;
$scrollPanelTrackBorder:0 none;
$scrollPanelTrackBgColor:#f8f8f8;

//paginator
$paginatorBgColor:#ffffff;
$paginatorBorder:1px solid #c8c8c8;
$paginatorIconColor:$textSecondaryColor;
$paginatorPadding:0;
$paginatorElementWidth:32px;
$paginatorElementHeight:32px;
$paginatorElementHoverBgColor:#eaeaea;
$paginatorElementHoverIconColor:#333333;
$paginatorElementMargin:0;
$paginatorElementBorder:0 none;

//datatable
$datatableHeaderCellPadding: 8px 12px;
$datatableHeaderCellBgColor: #ffffff;
$datatableHeaderCellTextColor: $textColor;
$datatableHeaderCellFontWeight: 700;
$datatableHeaderCellBorder: 1px solid #c8c8c8;
$datatableHeaderCellHoverBgColor: #eaeaea;
$datatableHeaderCellHoverTextColor: #333333;
$datatableBodyRowBgColor: #ffffff;
$datatableBodyRowTextColor: $textColor;
$datatableBodyRowBorder: 1px solid #c8c8c8;
$datatableBodyRowEvenBgColor:#f9f9f9;
$datatableBodyRowHoverBgColor: #eaeaea;
$datatableBodyRowHoverTextColor: #333333;
$datatableBodyCellPadding: 6px 12px;
$datatableFooterCellPadding: 8px 12px;
$datatableFooterCellBgColor: #ffffff;
$datatableFooterCellTextColor: $textColor;
$datatableFooterCellFontWeight: 700;
$datatableFooterCellBorder: 1px solid #c8c8c8;
$datatableResizerHelperBgColor: $primaryColor;
$datatableDataIconColor:$textSecondaryColor;

//schedule
$scheduleEventBgColor:$primaryDarkColor;
$scheduleEventBorder:1px solid $primaryDarkColor;
$scheduleEventTextColor:$primaryDarkColorText;

//tree
$treeNodePadding: 2px 0;
$treeNodeLabelPadding: 4px;

//
$messagesMargin:14px 0;
$messagesPadding:14px;
$messagesIconFontSize:24px;
$infoMessageBgColor:#b7d8b7;
$infoMessageBorder:0 none;
$infoMessageTextColor:#212121;
$infoMessageIconColor:#212121;
$warnMessageBgColor:#ffe399;
$warnMessageBorder:0 none;
$warnMessageTextColor:#212121;
$warnMessageIconColor:#212121;
$errorMessageBgColor:#f8b7bd;
$errorMessageBorder:0 none;
$errorMessageTextColor:#212121;
$errorMessageIconColor:#212121;
$fatalMessageBgColor:#bcbcbc;
$fatalMessageBorder:0 none;
$fatalMessageTextColor:#212121;
$fatalMessageIconColor:#212121;
$growlIconFontSize:36px;
$growlMargin:0 0 14px 0;
$growlPadding:14px;
$growlShadow:0 3px 6px 0 rgba(0, 0, 0, 0.16);
$messagePadding:6px;
$messageMargin:0;

//overlays
$overlayContentBorder:1px solid #c8c8c8;
$overlayContainerShadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);

//overlay panel
$overlayPanelCloseIconBgColor:$secondaryColor;
$overlayPanelCloseIconColor:$secondaryColorText;
$overlayPanelCloseIconHoverBgColor:$secondaryDarkColor;
$overlayPanelCloseIconHoverColor:$secondaryDarkColorText;

//tooltip
$tooltipBgColor:#333333;
$tooltipTextColor:#ffffff;

//steps
$stepsItemBgColor:#ffffff;
$stepsItemBorder:1px solid #c8c8c8;
$stepsItemNumberColor:$textColor;
$stepsItemTextColor:$textSecondaryColor;
$stepsItemWidth:28px;
$stepsItemHeight:28px;

//progressbar
$progressBarHeight:24px;
$progressBarBorder:0 none;
$progressBarBgColor:#eaeaea;
$progressBarValueBgColor:$primaryColor;

//menu
$menuitemSubMenuPadding:0;
$menuBgColor:#ffffff;
$menuBorder:1px solid #c8c8c8;
$menuPadding:0;
$menuTextColor:$textColor;
$menuitemPadding:6px 12px;
$menuitemTextColor:#333333;
$menuitemIconColor:#333333;
$menuitemHoverTextColor:#333333;
$menuitemHoverIconColor:#333333;
$menuitemHoverBgColor:#eaeaea;
$toggleableMenuHeaderMargin:1px;
$overlayMenuBorder:1px solid #c8c8c8;
$overlayMenuShadow:0 3px 6px 0 rgba(0, 0, 0, 0.16);

//misc
$maskBgColor: rgba(0, 0, 0, 0.4);
$inlineSpacing: 6px;
$chipsItemMargin: 0 4px 0 0;
$dataIconColor:$textSecondaryColor;
$dataIconHoverColor:$textColor;

//general
$disabledOpacity:.5;

Running the Sample

Demo project has an integrated jetty plugin so running the sample is easy as building the css first followed by the mvn jetty:run command. Make sure you have sass installed in your system before running.

sass --update src/main/webapp/resources/ --sourcemap=none
mvn jetty:run

Navigate to http://localhost:8080/harmony to view the demos which is same as the live version.

Menu

Menu is a regular JSF component that supports PrimeFaces MenuModel API allowing both declarative and programmatic approaches.

xmlns:ph="http://primefaces.org/harmony"

<ph:menu>
</ph:menu>

Menu has 4 modes; static, overlay, horizontal and slim. Layout wrapper element in template.xhtml is used to define which mode to use by adding specific classes. Default is static and here is the list of classes for each mode.

  • Static: layout-menu-static
  • Overlay: layout-menu-overlay
  • Horizontal: layout-menu-horizontal
  • Slim: layout-menu-slim

Example layout below always uses a slim mode.

<div class="layout-wrapper layout-menu-slim">
...
</div>

Layout mode can be dynamic using an EL expression as well using an example bean like guestPreferences so that your users can choose the layout they prefer when using your application.

<div class="layout-wrapper layout-menu-static">
...
</div>

Icons

harmony Layout 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.

<context-param>
    <param-name>primefaces.FONT_AWESOME</param-name>
    <param-value>true</param-value>
</context-param>

Card

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. If the card has a title defined with h1 tag, add card-w-title to adjust paddings.

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

<div class="card card-w-title">
    <h1>Card with Title<h1>
    Content here
</div>

RTL

Layout can be used in RTL orientation as well by adding "layout-rtl" to the "layout-wrapper" div in template.xhtml.

Grid CSS

harmony uses new PrimeFaces Grid CSS (ui-g-*) 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 /harmony-layout/css/ folder to your template manually.

Tips

  • Familiarity with SASS is required to make customizations to the layout and theme.
  • Demo application war and the maven project tag are included in distribution however you don't necessarily need them to install harmony, the actual artifacts required are the layout zip file and the theme jar.

Migration Guide

1.0.6 to 2.0.0

  • Update HarmonyMenu*.java file
  • Replace theme jar with new jar

1.0.5 to 1.0.6

  • Update layout.js, layout css and HarmonyMenu*.java files
  • Replace theme jar with new jar

1.0.4 to 1.0.5

  • Update layout.js and layout css files
  • Replace theme jar with new jar

1.0.3 to 1.0.4

  • Update layout.js and layout css files
  • Replace theme jar with new jar

1.0.2 to 1.0.3

  • Update layout.js and layout css files
  • Replace theme jar with new jar

1.0.1 to 1.0.2

  • Update layout.js and layout css files
  • Replace theme jar with new jar

1.0 to 1.0.1

  • Update layout-*.css files and layout.js