SENTINELLAYOUT
- 166
- 24
Sentinel provides a main template.xhtml and additional leftmenu.xhtml, topbar.xhtml files for the base layout. These 3 files must be placed under WEB-INF folder. Provided empty-page.xhtml is a sample content page using the main template.xhtml that defines "content" and "head" ui:define placeholders. Other required resources are the css, js, image and font files that are located inside resources/sentinel-layout folder, simply copy the sentinel-layout folder to your %WEB-APP-FOLDER%/resources folder so that final path would be %WEB-APP-FOLDER%/sentinel-layout/. Please refer to demo app or maven project of the demo app as the reference.
Theme is a regular PrimeFaces theme and setup is simple as defining primefaces.THEME context parameter in web.xml as "sentinel", refer to themes page for more information.
Sentinel provides a navigation menu positioned at left side of the screen. This menu is responsive and adjusts to the screen width automatically. Menu is actually a PrimeFaces component specifically created for Sentinel under http://primefaces.org/sentinel namespace having menu as the tag name., usage is same as a regular PrimeFaces component that utilizes p:submenu and p:menuitem components. This component is placed inside the Sentinel theme jar so this jar must be in your classpath. Demo application features an example menu created declaratively however since this component is a JSF component, you can also use PrimeFaces MenuModel API to create the menu dynamically.
Menu keeps its state using cookies so that between page navigations, state of the menu can be restored. In case you'd like to clear this state, call PF('SentinelMenuWidget').clearMenuState() javascript method. For stateful menu to work, each menuitem and submenu must have explicit ids defined, otherwise ids will be generated by JSF that may be different for each page. So please make sure you have defined explicit ids for each menuitem and submenu to have a stateful menu. Menu is large by default, if you prefer slim menu by default add "slimmenu" style class to the #layout-menubar div in leftmenu.xhtml.
In addition, jQuery and PrimeFaces.js files must be available on the page for menu to work. These files are included automatically whenever there is a PrimeFaces component on the page that depends on them, however you can easily add them manually if required using h:outputScript component with name attribute values jquery/jquery.js and primefaces.js correspondingly under primefaces library. An example would be <h:outputScript name="jquery/jquery.js" library="primefaces" />
Sentinel menus have two direction modes. Default is LTR and for RTL mode add "ui-sentinel-rtl" to the h:body component.
Core Layout is a set of CSS classes used to create responsive grid layouts with additional utilities. Sentinel uses Core Layout internally, however for grid layout you may also choose another utility like Grid CSS or Bootstrap Grid.
| Class Group | Class Name | Instructions |
| Responsive Mode | Responsive | Makes an element responsive using media queries. For example; if screen width is smaller than 1200px and bigger than 960px, this element's width sets to '33%', and if screen width is smaller than 960px and bigger than 640px, this element's width sets to '50%', and if screen width smaller than 640px, this element's width sets to '100%'. Thus, width of this element adjusted to screen resolution on mobile phones and tablets. Resize browser window to see changes of Green ContainerX boxes below. |
| Responsive50 | Makes an element responsive using media queries. For example; if screen width is smaller than 960px, this element's width sets to '100%', Thus, width of this element adjusted to screen resolution on mobile phones and tablets. Resize browser window to see changes of Green ContainerX boxes below. | |
| Responsive100 | Makes an element responsive using media queries. For example; if screen width is smaller than 1200px, this element's width sets to '100%', Thus, width of this element adjusted to screen resolution on mobile phones and tablets. Resize browser window to see changes of Green ContainerX boxes below. |
| Class Group | Class Name | Instructions |
| Containers | Container100 Container96 Container90 Container85 Container80 Container75 Container70 Container60 Container50 Container40 Container33 Container30 Container25 Container20 Container10 Container5 | ContinerX is the essential part of grid layout where the number x defines the width of the cell. In order to make a ContainerX responsive, one of the Responsive style classes described in previous section should be added. In addition, since they float, a class called Container should be the parent to clear the floats. Resize browser window to see changes of red and orange boxes below. .Container100{ width:100%; overflow:hidden; float:left;} , .Container96{ width:96%; float:left;} , .Container90{ width:90%; float:left;} , .Container85{ width:85%; float:left;} , .Container80{ width:80%; float:left;} , .Container75{ width:75%; float:left;} , .Container70{ width:70%; float:left;} , .Container66{ width:66.66%; float:left;} , .Container60{ width:60%; float:left;} , .Container50{ width:50%; float:left;} , .Container40{ width:40%; float:left;} , .Container33{ width:33.33%; float:left;} , .Container30{ width:30%; float:left;} , .Container25{ width:25%; float:left;} , .Container20{ width:20%; float:left;} , .Container10{ width:10%; float:left;} , .Container5{ width:5%; float:left;} |
| Indent | ContainerIndent | ContainerIndent is optional and added inside a ContainerX class to apply formatting such as padding. |
| Container | Wrapper | Container is used as the wrapper of ContainerX elements to clear the floats. |
| Class Group | Class Name | Instructions |
| Selection | Unselectable | Makes text unselectable .Unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} |
| Class Group | Class Name | Instructions |
| Visibilities According To The Platform | ShowOnMobile | Only visible on screen widths smaller than 960px. |
| ShowOnDesktop | Only visible on screen widths bigger than 960px. | |
| Floating According To The Platform | FloatNoneOnMobile | Removes floating on screen widths smaller than 960px. |
| Width Setting For The Platform | WidAutoOnMobile | Switches to auto width on screen widths smaller than 640px so that element with depends on its content. |
| Height Setting For The Platform | HeiAutoOnMobile | Switches to auto height on screen widths smaller than 640px so that element with depends on its content. |
| Class Group | Class Name | Instructions |
| Displaying | DispBlock | Displays an element as a block element .DispBlock{ display:block;} |
| DispNone | The element will not be displayed at all (has no effect on layout) .DispNone{display:none;} | |
| DispTable | Let the element behave like a table element .DispTable{display:table;} | |
| DispInlBlock | Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box .DispInlBlock{display:inline-block;} | |
| DispTableCell | Let the element behave like a td element .DispTableCell{ display:table-cell; vertical-align:middle;} |
| Class Group | Class Name | Instructions |
| Positioning | PosFixed | The element is positioned relative to the browser window .PosFixed{position:fixed;} |
| PosAbsolute | The element is positioned relative to its first positioned (not static) ancestor element .PosAbsolute{position:absolute;} | |
| PosRelative | The element is positioned relative to its normal position, so 'left:20' adds 20 pixels to the element's LEFT position .PosRelative{ position:relative;} | |
| PosStatic | Default value. Elements render in order, as they appear in the document flow .PosStatic{position:static;} |
| Class Group | Class Name | Instructions |
| Text Decoration | Underline | Defines a line below the text .Underline{ text-decoration:underline;} |
| Class Group | Class Name | Instructions |
| Floating | Fleft | The element floats to the left .Fleft{ float:left;} |
| Fright | The element floats to the right .Fleft{ float:right;} | |
| Fnone | The element is not floated, and will be displayed just where it occurs in the text. .Fleft{ float:none;} |
| Class Group | Class Name | Instructions |
| Overflow | OvHidden | The overflow is clipped, and the rest of the content will be invisible .OvHidden{ overflow:hidden;} |
| OvScroll | The overflow is clipped, but a scroll-bar is added to see the rest of the content .OvScroll{ overflow:scroll;} | |
| OvAuto | If overflow is clipped, a scroll-bar should be added to see the rest of the content .OvAuto{ overflow:auto;} | |
| OvVisible | The overflow is not clipped. It renders outside the element's box. .OvVisible{ overflow:visible;} | |
| OvXScroll OvYScroll OvXHidden OvYHidden | Axis of the elements (X or Y) mentioned were hidden or scroll .OvXScroll{ overflow-x:scroll;} , .OvYScroll{ overflow-y:scroll;} , .OvXHidden{ overflow-x:hidden;} , .OvYHidden{ overflow-y:hidden;} |
| Class Group | Class Name | Instructions |
| Empty Boxes | EmptyBox5 EmptyBox10 EmptyBox20 EmptyBox30 EmptyBox40 EmptyBox50 EmptyBox60 EmptyBox70 EmptyBox80 EmptyBox90 EmptyBox100 EmptyBox110 EmptyBox120 EmptyBox130 EmptyBox140 EmptyBox150 | Horizontally , leaving space so that the value of the specified number of pixels .EmptyBox5{ display:block; width:100%; height:5px; overflow:hidden;} , .EmptyBox10{ display:block; width:100%; height:10px; overflow:hidden;} , .EmptyBox20{ display:block; width:100%; height:20px; overflow:hidden;} , .EmptyBox30{ display:block; width:100%; height:30px; overflow:hidden;} , .EmptyBox40{ display:block; width:100%; height:40px; overflow:hidden;} , .EmptyBox50{ display:block; width:100%; height:50px; overflow:hidden;} , .EmptyBox60{ display:block; width:100%; height:60px; overflow:hidden;} , .EmptyBox70{ display:block; width:100%; height:70px; overflow:hidden;} , .EmptyBox80{ display:block; width:100%; height:80px; overflow:hidden;} , .EmptyBox90{ display:block; width:100%; height:90px; overflow:hidden;} , .EmptyBox100{ display:block; width:100%; height:100px; overflow:hidden;} , .EmptyBox110{ display:block; width:100%; height:100px; overflow:hidden;} , .EmptyBox120{ display:block; width:100%; height:100px; overflow:hidden;} , .EmptyBox130{ display:block; width:100%; height:100px; overflow:hidden;} , .EmptyBox140{ display:block; width:100%; height:100px; overflow:hidden;} , .EmptyBox150{ display: block; width: 100%; height:150px; overflow:hidden;} |
| Class Group | Class Name | Instructions |
| Opacity | OpacZero Opac10 Opac20 Opac30 Opac40 Opac50 Opac60 Opac70 Opac80 Opac90 Opac95 Opac100 | Element gives transparency specified value .Opac100{ opacity:1; -webkit-opacity:1; -moz-opacity:1;} , .Opac95{ opacity:0.95; -webkit-opacity:0.95; -moz-opacity:0.95;} , .Opac90{ opacity:0.9; -webkit-opacity:0.9; -moz-opacity:0.9;} , .Opac80{ opacity:0.8; -webkit-opacity:0.8; -moz-opacity:0.8;} , .Opac70{ opacity:0.7; -webkit-opacity:0.7; -moz-opacity:0.7;} , .Opac60{ opacity:0.6; -webkit-opacity:0.6; -moz-opacity:0.6;} , .Opac50{ opacity:0.5; -webkit-opacity:0.5; -moz-opacity:0.5;} , .Opac40{ opacity:0.4; -webkit-opacity:0.4; -moz-opacity:0.4;} , .Opac30{ opacity:0.3; -webkit-opacity:0.3; -moz-opacity:0.3;} , .Opac20{ opacity:0.2; -webkit-opacity:0.2; -moz-opacity:0.2;} , .Opac10{ opacity:0.1; -webkit-opacity:0.1; -moz-opacity:0.1;} , .OpacZero{ opacity:0; -webkit-opacity:0; -moz-opacity:0;} |
| Class Group | Class Name | Instructions |
| Width Special Values | Wid100 Wid90 Wid80 Wid70 Wid60 Wid50 Wid45 Wid40 Wid33 Wid30 Wid25 Wid20 Wid10 | Element data width is specified with a percentage value. Add Responsive class to apply responsive features. .Wid100{ width:100%;} , .Wid90{ width:90%;} , .Wid80{ width:80%;} , .Wid70{ width:70%;} , .Wid60{ width:60%;} , .Wid50{ width:50%;} , .Wid45{ width:45%;} , .Wid40{ width:40%;} , .Wid30{ width:30%;} , .Wid33{ width:33.3%;} , .Wid25{ width:25%;} , .Wid20{ width:20%;} , .Wid10{ width:10%;} |
| Class Group | Class Name | Instructions |
| Text Align | TexAlCenter | Centers the text .TexAlCenter{ text-align:center;} |
| TexAlLeft | Aligns the text to the left .TexAlLeft{ text-align:left;} | |
| TexAlRight | Aligns the text to the right .TexAlRight{ text-align:right;} |
| Class Group | Class Name | Instructions |
| Box Sizing | BoxSizeContent | Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included .BoxSizeContent{ box-sizing:content-box; -webkit-box-sizing:content-box; -moz-box-sizing:content-box;} |
| BoxSizeBorder | The width and height properties (and min/max properties) includes content, padding and border, but not the margin .BoxSizeBorder{ box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;} |
| Class Group | Class Name | Instructions |
| Font Size | Fs130 Fs100 Fs60 Fs50 Fs40 Fs30 Fs29 Fs28 Fs27 Fs26 Fs25 Fs24 Fs23 Fs22 Fs21 Fs20 Fs19 Fs18 Fs17 Fs16 Fs15 Fs14 Fs13 Fs14 Fs13 Fs12 Fs11 Fs10 Fs9 | Set to the specified pixel value of font-size. .Fs9{font-size:9px !important;} , .Fs10{font-size:10px !important;} , .Fs11{font-size:11px !important;} , .Fs12{font-size:12px !important;} , .Fs13{font-size:13px !important;} , .Fs14{font-size:14px !important;} , .Fs15{font-size:15px !important;} , .Fs16{font-size:16px !important;} , .Fs17{font-size:17px !important;} , .Fs18{font-size:18px !important;} , .Fs19{font-size:19px !important;} , .Fs20{font-size:20px !important;} , .Fs21{font-size:21px !important;} , .Fs22{font-size:22px !important;} , .Fs23{font-size:23px !important;} , .Fs24{font-size:24px !important;} , .Fs25{font-size:25px !important;} , .Fs26{font-size:26px !important;} , .Fs27{font-size:27px !important;} , .Fs28{font-size:28px !important;} , .Fs29{font-size:29px !important;} , .Fs30{font-size:30px !important;} , .Fs40{font-size:40px !important;} , .Fs50{font-size:50px !important;} , .Fs60{font-size:60px !important;} , .Fs100{font-size:100px !important;} , .Fs130{font-size:130px !important;} |
| Class Group | Class Name | Instructions |
| Font Weight | FontBold | Defines thick characters. .FontBold{ font-weight:bold;} |
| FontLight | Defines lighter characters. .FontLight{ font-weight:lighter;} | |
| FontNormal | Defines normal characters. This is default. .FontNormal{ font-weight:normal;} |
| Class Group | Class Name | Instructions |
| Transitions Timing | Animated05 | Make css3 transitions with the specified duration. ( Animated05 = Transition ends in 500 milli-seconds with easing) .Animated05{-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} |
| Animated05 | Make css3 transitions with the specified duration. ( Animated1 = Transition ends in 1 second with easing) .Animated1{-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;} |
+1 888 123 4567 