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.

High-quality video can be found here
 
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:
    Example1
  • 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 phase

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

    Example2

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

    Example3

    Three different coloured themes illustrated below:

    zk7-demo

    Fragment example of a customized menupopup.

    Menupopup-example
    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.

    Menupopup-example2

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

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

  1. guille says:

    great news!! it was the biggest missing point: css to make look nicer a zk app!

  2. Finally ZK gets nice modern designs. And easily customized. Wow!

  3. JP says:

    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!

  4. TerryTornado says:

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

    thanks
    Stephan

  5. Jumper Chen says:

    Yes, we will commit the source code to github.

  6. William says:

    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?

  7. spanky says:

    please check in the code.

  8. mayito says:

    where is the code for the sample application?

  9. Jumper Chen says:

    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.

  10. Sabina N says:

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

  11. Sabina N says:

    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?

  12. Jumper Chen says:

    I fixed that, please update the source again

  13. Darius says:

    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?

  14. Darius says:

    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?

  15. Darius says:

    Will ZK7′s approach be compatible with IE7 and up?

  16. Jumper Chen says:

    @Darius, the current target is for IE8+

  17. Naman Shah says:

    Great to have all the new features!

    But will they will be available for ZK CE?

  18. Dracontis says:

    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?

  19. Jumper Chen says:

    @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.

  20. Sabina N says:

    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

  21. ProgramadorJunior says:

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

  22. ProgramadorJr says:

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

  23. ProgramadorJunior says:

    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

Leave a Reply