ZK 7: New Theme System with Bootstrap & CSS 3

August 13, 2013 by Jumper Chen | 24 Comments »

Introduction

ZK 7 is an upcoming big release focusing on HTML5 & CSS3. Simplified by reducing the DOM structure and JavaScript code, ZK 7’s theme will be more easily customizable than previous versions and its JavaScript code running more efficiently than ever. ZK 7 will also support CSS3’s icon font feature bringing the great benefits of being able to scale, change colour and include shadows to your icons easily and conveniently . In the following demo, we will show you how you can customize a theme to look like ones coming from Wrapbootstrap (a marketplace for twitter bootstrap).

ZK 7’s demo is available here

Feature Highlight

Bootstrap Theme Support – In ZK 7, you can apply twitter bootstrap themes to ZK seamlessly, such as Button, Group Button, and Layout System, without breaking the components’ functionality and look & feel.
LESS Support – The theme of ZK 7 is based on LESS, a dynamic stylesheet language, to generate the css.dsp file for ZK 7 to use.
Icon Font Support – With this feature, you can use the setIconSclass method to specify the icon font for a component, which is extended from LabelImageElement class, or, use built-in icons from ZK 7, which is integrated with Font Awesome
CSS3 Support – Since ZK 7’s theme is totally revised by CSS3 features including gradient, box-shadow, border-radius etc, users can now customize their themes with CSS3 pretty much instantaneously.

Demo

In this demo, we customize the page with Pure ZK and CSS3. There are three different coloured themes and they are able to be switched dynamically without having to reload the whole page.

Note:This demo design is referenced from Unicorn Admin Template – WB0F35928

Behind the Scenes

Design phase – Normally, the design comes from a web designer or artist; In this case we choose the unicorn-admin-template from Wrapbootstrap.
Analyze phase – In this phase, we need to choose the right ZK components accordingly to layout the whole page as illustrated below:

Implement phase – After analyzing the page, we can now add some ZK components with corresponding CSS classes to layout the structure of the page. For example,

<div sclass="header">
	// The Header Content
</div>
<div sclass="search">
	// The Search Content
</div>
<div sclass="user-nav">
	// The User-Navigation Content
</div>
<navbar orient="vertical" sclass="sidebar">
	// The Sidebar Content
</navbar>

<div sclass="style-switcher">
	// The Style-Switcher Content
</div>

<div sclass="content">
	<div sclass="content-header">
		// The Dashboard Content
	</div>
	<div sclass="breadcrumb">
		// The Breadcrumb Content
	</div>
	<include src="zk/content.zul" />
</div>

Customize phaseBelow is what a base layout with a normal ZK theme would look like:

After applying the bootstrap CSS file and the customized CSS file which is referred from Wrapbootstrap, we can get the following result.

Three different coloured themes illustrated below:

Fragment example of a customized menupopup.

ZUL File

<menu iconSclass="icon icon-white icon-envelope" label="Messages">
	<menupopup sclass="navpp">
		<menuitem label="new message" />
		<menuitem label="inbox" />
		<menuitem label="outbox" />
		<menuitem label="trash" />
	</menupopup>
</menu>

As you can see from the above, the iconSclass attribute is a new feature of ZK 7 to support icon CSS, rather than using the src attribute that supports image URLs only.

LESS File

.navpp.z-menupopup {
	// change the background style
	background: #FFF;
	.borderRadius('5px');
	.boxShadow('0 5px 10px rgba(0,0,0,0.2)');
	padding: 0;
	
	.z-menupopup-content {
		padding: 6px 0;
	}
	
	// disable the unused style
	.z-menupopup-separator,
	.z-menu-image,
	.z-menuitem-image {
		display: none;
	}

	// change the effect of menu and menuitem
	.z-menu-content,
	.z-menuitem-content {
		padding: 3px 20px;
		line-height: 14px;
		* {
			text-shadow: none;
		}
		&:hover,
		&:active {
			color: #FFF;
			border-color: transparent;
			.borderRadius('0');
			.boxShadow('none');
		}
	}

	// add a top arrow at the top of the popup
	&:before {
		position: absolute;
		top: -7px;
		left: 9px;
		display: inline-block;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #FFF;
		border-left: 7px solid transparent;
		border-bottom-color: #FFF;
		content: '';
	}
}

If we want to change the popup to red like the image below, we simply add the following CSS.

.navpp.z-menupopup {
	.verGradient (#830000 , #6f2d2d);
	
	.z-menu-content,
	.z-menuitem-content {
		color: #FFF;
	}
	&:before {
		border-bottom-color: #6f2d2d;
	}
}

Note: .verGradient() is a built-in function for LESS in ZK 7 to generate vertical gradient backgrounds in modern browsers.

ZK 7 Preview is now available for download here.

Example Source
The source code can be found in Github and the layout design is owned by diablo9983.

References

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Tags: Bootstrap, CSS3, Framework, HTML5, icon-font, Java, LESS, ZK

24 Responses to “ZK 7: New Theme System with Bootstrap & CSS 3”

guille says:

08/14/2013 at 06:35

great news!! it was the biggest missing point: css to make look nicer a zk app!
Ondřej Medek says:

08/15/2013 at 00:58

Finally ZK gets nice modern designs. And easily customized. Wow!
JP says:

08/20/2013 at 07:12

I was trying to ZK – Preview with other bootstrap theme and i can’t force ZK components to use bootstrap styles. Is there any chance you could share source code of this example? Off course, without bootstrap theme, just zk source code.
Thanks indeed! Awesome new features!
TerryTornado says:

08/20/2013 at 11:01

Please, check in the code for the sample application.
I cannot see how these work together without the codes.

thanks
Stephan
Jumper Chen says:

08/21/2013 at 20:11

Yes, we will commit the source code to github.
William says:

08/22/2013 at 01:50

That’s a great improvement, congratulations! But I don’t get how bootstrap can be _seamlessly_ applied. Let’s say I have an application developed in ZK 6.5, without any css customization: how can I get default Bootstrap overriding ZK theme?
spanky says:

08/22/2013 at 01:54

please check in the code.
mayito says:

08/23/2013 at 08:04

where is the code for the sample application?
Jumper Chen says:

08/26/2013 at 01:26

Please refer here – https://github.com/jumperchen/ui-examples
About the layout design is owned by diablo9983, please Do Not use this project into your own project directly.
Sabina N says:

08/27/2013 at 12:20

thanks for the demo, getting error on following path entry when importing in eclipse, pls advise
Sabina N says:

08/27/2013 at 14:23

Thanks for the demo project.
When I import in eclipse I am getting error with the following path entry

Was there something missed during check in?
Jumper Chen says:

08/27/2013 at 20:36

I fixed that, please update the source again
Darius says:

09/10/2013 at 09:36

What’s the best migration strategy? We have themes that we have customized and not changed much since at least ZK 5.0. If we want to move to the new approach, what are the steps?

For example, we had changed the colors in the CSS files and on some of the images (first using the theme-changing tool, and then tweaking a bit by hand). Should we start with a new bootstrap theme and make try to make changes? How does the bootstrap theme play with the CSS in the various ZK-specific css file?
Darius says:

09/10/2013 at 12:56

Our application has customized a ZK theme and works in ZK 6.0.1
What steps would be needed to migrate this?

How does the bootstrap theme work with the CSS in ZK-specific files?

Is bootstrap optional?
Darius says:

09/12/2013 at 09:55

Will ZK7’s approach be compatible with IE7 and up?
Jumper Chen says:

09/16/2013 at 01:15

@Darius, the current target is for IE8+
Naman Shah says:

09/19/2013 at 01:32

Great to have all the new features!

But will they will be available for ZK CE?
Dracontis says:

09/24/2013 at 04:40

From this example I can’t figured out how to get example look like on the pictures. Is code on Github incomplete because of Unicorn Template? I can get something like on the picture below ‘Customize phase’.

And, as I can understand, there are no themes for zk and bootstrap? So if I want to move to this framework I should rewrite everything in the application?

And are you planning for Step-by-Step guide how to move old app to bootstrap?
Jumper Chen says:

09/25/2013 at 19:57

@Dracontis,

You may take a look at this blog – http://blog.zkoss.org/index.php/2013/09/03/zk-7-zk-components-x-bootstrap-3/

And all of that features will be released with an Open Source License.
Sabina N says:

10/18/2013 at 15:57

There is a bug in js script in demo project:

$(window).bind(“popstate”, function(e) {
var theme;
e = e.originalEvent;
if (e.state && (theme = e.state.theme)) {
changeTheme(theme, true);
}
});
…..

I believe should be
theme == e.state.theme
ProgramadorJunior says:

12/04/2013 at 09:54

Hi,
How can I download this demo from github??I’m not using maven!
ProgramadorJr says:

12/04/2013 at 10:01

Hi,
How can I download this demo??I’m not using maven!
ProgramadorJunior says:

12/05/2013 at 01:12

Hi,
I downloaded the demo but the styles are not working well. If I look at the browser console it says:
! Invalid CSS rule at: <
! Invalid CSS property declaration at $ (repeated 11 times)

For example in the file grey.css.dsp
Forhad says:

09/17/2018 at 16:24

Can i convert this template to BOOTSTRAP 4 version. I an newbie in admin template design. Please give me any suggestion.