How do JSF/PrimeFaces tags get resolved to default CSS styles?

Tags: css,jsf,primefaces

Problem :

I am still learning JSF and I am confused why, for example, the default style for <p:panel> is declared as .ui-panel in the CSS stylesheet. I could establish a pattern if the panel was from the ui namespace (facelets) but it is in the p (PrimeFaces) namespace so ui-panel doesn't really make sense. How does JSF (or in this case, PrimeFaces) map tags to default styles in CSS, i.e. what is the naming convention?

Solution :

Primefaces components are powered by jquery-ui. So the naming convention is based on the naming convention of jquery ui components. Specifically, the class names play an important role in the themeing concept of primefaces that's again based on the themeroller approach of the jquery ui. The classes are split to structural and themeable. The .ui-panel is a themeable class name, classified as a widget container class, and the conventions says

.ui-widget: Class to be applied on outer container of all widgets. Applies font family and font size to widget. Also applies same family and 1em font size to child form elements specifically, to combat inheritance issues in Windows browsers.

as the widget is a panel, hence the .ui-panel. The main focus of the convention is to provide the ability to apply themes that will preserve the visual consistency of the component throughout the application

    CSS Howto..

    How to get a style attribute from a CSS class by javascript/jQuery?

    How do I override Bootstrap's
    border-left with a FontAwesome icon in CSS?

    css3 : how to make div go up to bottom of page?

    How to do aligning image next to textbox with CSS? [closed]

    How to extend a wrapped element background both left and right with different color?

    How to select the last element within an element regardless of type in CSS?

    How to change the size of item-avatar in ionic?

    how can I hide an element inside iFrame using Jquery or CSS

    How to override a CSS class within a content div

    How to increase height of footer's div when browser window is resized?

    How to change CSS property before element is created?

    how to print no blur content over a blurred div

    How to spread three columns in CSS across a page equally

    How do i get a font to show up smooth like this?

    How To Get Circle Image Between
    Tag Like Tumblr In HTML? [closed]

    How to make width of element full width of screen and not parent css

    How do I keep my footer text from appearing outside my footer

    How to find and delete specific row in blogger css with span tag?

    css - how to determine why a particular css rule is being overwritten

    How do I add custom fonts? [duplicate]

    how to get fixed header with css?

    This should be simple but want to do it right. CSS display:none; how to turn back on according to @media

    how to: dynamic navigation bar size depending on dynamic image size?

    How to make text appear when input box is active

    How do you position divs on a line with space in the middle, without fixing the width of the container?

    How does the Meebo bar work so well cross-browser?

    Stop CSS & Jquery Slideshow from looping

    How to code html mailings?

    how to Add sub menu to dropdown menu

    How the browser identifies the CSS framework? [closed]