Menu Top Menu

Spark Documentation

Installation

Spark provides a main template.xhtml and additional layoutmenu.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" as the main ui:define placeholder. Other required resources are the css, js, image and font files that are located inside resources/spark-layout folder, simply copy the spark-layout folder to your %WEB-APP-FOLDER%/resources folder so that final path would be %WEB-APP-FOLDER%/spark-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 "spark", refer to themes page for more information.

Color Alternatives

Spark provides 4 different colors, main one is "green" and alternatives are "blue", "orange" and "red". To change the default green color, replace the spark-layout.css in template.xhtml with the color of your choice like spark-layout-blue.css. Corresponding themes are also provided, names to be used in primefaces.THEME context parameters are spark for default, spark-blue, spark-orange and spark-red for alternatives. Both the layout and theme can be defined dynamically using EL expressions as well. Please refer to the maven project for the sample implementation using a session scoped bean called ThemeView. Demo can be reached at the Colors submenu at the menubar.

Migration Guide
2.1.1 to 2.1.2
  • - Replace theme jar with the new jar.
  • - Replace SparkMenu.java with the new SparkMenu.java.
2.1 to 2.1.1
  • - Update spark-layout.css, spark-layout-{color}.css and layout.js files.
  • - Replace theme jar with the new jar.
  • - Replace SparkMenuRenderer.java with the new SparkMenuRenderer.java.
  • - Replace SparkMenu.java with the new SparkMenu.java.
2.0.1 to 2.1
  • - Update spark-layout.css and spark-layout-{color}.css files.
  • - Replace theme jar with the new jar.
2.0 to 2.0.1
  • - Update layout.js, spark-layout-{color}.css, core-layout.css and template.xhtml
  • - Replace theme jar with the new jar.
  • - Replace SparkMenuRenderer.java with the new SparkMenuRenderer.java.
1.3.1 to 2.0
  • - Replace theme jar with the new jar.
1.3 to 1.3.1
  • - Update spark-layout.css and spark-layout-{color}.css files.
  • - Replace theme jar with the new jar.
1.2 to 1.3
  • - Update core-layout.css, spark-layout.css and spark-layout-{color}.css files.
  • - Replace theme jar with the new jar.
Menus

Spark provides a multi-level menubar positioned at top of the screen. This menu is responsive and adjusts to the screen width automatically. Menu is actually a PrimeFaces component specifically created for Spar under http://primefaces.org/spark 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 Spark 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. Optional "options" facet can be used to display custom content in menubar.

Above the menubar, an additional topbar menu is provided. This menu is also responsive and provides two level of nested menus.

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" />

Core Layout

Core Layout is a set of CSS classes used to create responsive grid layouts with additional utilities. Spark uses Core Layout internally, however for grid layout you may also choose another utility like Grid CSS or Bootstrap Grid.

Responsive Mode
Class GroupClass NameInstructions
Responsive ModeResponsiveMakes 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 bordered ContainerX boxes below.
Responsive50Makes 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 bordered ContainerX boxes below.
Responsive100Makes 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 bordered ContainerX boxes below.
Responsive Element (With Container33 Class)
Responsive Element (With Container33 Class)
Responsive Element (With Container33 Class)
Responsive50 Element (With Container60 Class)
Responsive50 Element (With Container20 Class)
Responsive50 Element (With Container20 Class)
Responsive100 Element (With Container50 Class)
Responsive100 Element (With Container20 Class)
Responsive100 Element (With Container30 Class)
DataList in Container50 Responsive50
  1. Volvo, 1960
  2. Volkswagen, 1983
  3. Honda, 1967
  4. Mercedes, 1988
  5. BMW, 2007
  6. Honda, 1974
  7. BMW, 1969
  8. Audi, 1961
  9. Honda, 1979
  10. Volvo, 1996
DataList - Paginator in Container50 Responsive50
  • Fiat, 1991
  • Audi, 1994
  • Honda, 2000
  • Volvo, 1999
  • Renault, 1976
  • Ford, 1978
  • Mercedes, 1977
Car Info
Single TreeTable in Container60 Responsive100
NameSizeType
Checkbox TreeTable in Container40 Responsive100
NameSizeType
ContainerX's
Class GroupClass NameInstructions
Containers (For Responsive Layout)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;}
.Container60{ width:60%; float:left;}
.Container50{ width:50%; float:left;}
.Container40{ width:40%; float:left;}
.Container33{ width:33.3%; 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%; overflow:hidden; float:left;}
IndentContainerIndentContainerIndent is optional and added inside a ContainerX class to apply formatting such as padding.
ContainerWrapperContainer is used as the wrapper of ContainerX elements to clear the floats.

Container20 - Responsive


Container30 - Responsive


Container50 - Responsive


Container33 - Responsive


Container33 - Responsive


Container33 - Responsive

Container40
Container Indent
Text Colors
Class GroupClass NameInstructions
Text Coloringred
blue
green
orange
white
white
softgray
gray
black
Texts paint the selected color

.red{color:#D0525D;}
.blue{color:#33AFDE;}
.green{color:#5fcf80;}
.orange{color:#F7941E;}
.white{color:#F1F6F9;}
.softgray{color:#C3CCD5;}
.gray{color:#778D9B;}
.black{color:#3B3D3F;}
Red Text
Blue Text
Green Text
Orange Text
White Text
Soft Gray Text
Gray Text
Black Text
Selection
Class GroupClass NameInstructions
SelectionUnselectableMakes 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;}
This is unselectable text
Visibilites, Floating And Width Settings on Devices
Class GroupClass NameInstructions
Visibilities According To The PlatformShowOnMobileOnly visible on screen widths smaller than 960px.
ShowOnDesktopOnly visible on screen widths bigger than 960px.
Floating According To The PlatformFloatNoneOnMobileRemoves floating on screen widths smaller than 960px.
Width Setting For The PlatformWidAutoOnMobileSwitches to auto width on screen widths smaller than 640px so that element with depends on its content.
This element has 30% width on bigger screens and auto width on smaller screens as it uses WidAutoOnMobile.
Displaying
Class GroupClass NameInstructions
DisplayingDispBlockDisplays an element as a block element

.DispBlock{ display:block;}
DispNoneThe element will not be displayed at all (has no effect on layout)

.DispNone{display:none;}
DispTableLet the element behave like a table element

.DispTable{display:table;}
DispInlBlockDisplays 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;}
DispTableCellLet the element behave like a td element

.DispTableCell{ display:table-cell; vertical-align:middle;}
Positioning
Class GroupClass NameInstructions
PositioningPosFixedThe element is positioned relative to the browser window

.PosFixed{position:fixed;}
PosAbsoluteThe element is positioned relative to its first positioned (not static) ancestor element

.PosAbsolute{position:absolute;}
PosRelativeThe element is positioned relative to its normal position, so 'left:20' adds 20 pixels to the element's LEFT position

.PosRelative{ position:relative;}
PosStaticDefault value. Elements render in order, as they appear in the document flow

.PosStatic{position:static;}
Underline
Class GroupClass NameInstructions
Text DecorationUnderlineDefines a line below the text

.Underline{ text-decoration:underline;}
This is underlined text
Floating
Class GroupClass NameInstructions
FloatingFleftThe element floats to the left

.Fleft{ float:left;}
FrightThe element floats to the right

.Fleft{ float:right;}
FnoneThe element is not floated, and will be displayed just where it occurs in the text.

.Fleft{ float:none;}
This is floats to the left
This is floats to the right
This is not floated (default)
Overflows
Class GroupClass NameInstructions
OverflowOvHiddenThe overflow is clipped, and the rest of the content will be invisible

.OvHidden{ overflow:hidden;}
OvScrollThe overflow is clipped, but a scroll-bar is added to see the rest of the content

.OvScroll{ overflow:scroll;}
OvAutoIf overflow is clipped, a scroll-bar should be added to see the rest of the content

.OvAuto{ overflow:auto;}
OvVisibleThe 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;}
Empty Boxes
Class GroupClass NameInstructions
Empty BoxesEmptyBox5
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;}
Content
this is empty box with 30px height value (EmptyBox30)
Content
Opacity
Class GroupClass NameInstructions
OpacityOpacZero
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;}
Opac10
Opac30
Opac50
Opac70
Opac100
WidX's
Class GroupClass NameInstructions
Width Special ValuesWid100
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%;}

Wid20 - Responsive


Wid20


Wid20


Wid20 - Responsive


Wid20


Wid33 - Reponsive


Wid33 - Reponsive


Wid33 - Reponsive

Text Aligning
Class GroupClass NameInstructions
Text AlignTexAlCenterCenters the text

.TexAlCenter{ text-align:center;}
TexAlLeftAligns the text to the left

.TexAlLeft{ text-align:left;}
TexAlRightAligns the text to the right

.TexAlRight{ text-align:right;}
This text align center
This text align left
This text align right
Box Size
Class GroupClass NameInstructions
Box SizingBoxSizeContentDefault. 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;}
BoxSizeBorderThe 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;}
Box Sizing : BoxSizeBorder (same width with below box)
Box Sizing : BoxSizeContent
Font Sizes
Class GroupClass NameInstructions
Font SizeFs130
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;}
Font Size : 14px
Font Size : 18px
Font Size : 24px
Font Size : 30px
Font Size : 60px
Font Weights
Class GroupClass NameInstructions
Font WeightFontBoldDefines thick characters.

.FontBold{ font-weight:bold;}
FontLightDefines lighter characters.

.FontLight{ font-weight:lighter;}
FontNormalDefines normal characters. This is default.

.FontNormal{ font-weight:normal;}
This is bold text
This is lighter text
Transitions Timing (For CSS3 Animations)
Class GroupClass NameInstructions
Transitions TimingAnimated03Make css3 transitions with the specified duration. ( Animated05 = Transition ends in 300 milli-seconds with easing)

.Animated05{-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
Animated05Make 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;}
Animated1Make 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;}

Hover Here ( Color and padding changing in 500 milli-seconds with Animated05 )


Hover Here ( Color and padding changing in 1 second with Animated1 )

+1 888 123 4567
info@sparkspark.com