Introduction

Flat Design is getting more and more popular lately and has become the new trend in the world of user interface design (you can take a look at this article explaining the philosophy of flat design if you’re interested). As of this reason, we have created a whole new theme based on flat design named Atlantic in our latest ZK 7. The basic concept of Atlantic is to remove gradients, rounded corners and shadows that are used in a lot of the breeze theme. This flat design also gives users an advantage of easier customization without having to take care of those skeuomorphic effects.

Check out the theme’s demo to get a hands-on experience on the look and feel!

Atlantic Vs. Breeze

Atlantic & breeze design in various components.

  • Window Component
  • atlantic-window breeze-window
  • Button Component
  • atlantic-button breeze-button
  • Listbox Component
  • atlantic-listbox breeze-listbox

Download & Usage

To use Atlantic, download the theme from github, place the theme jar under WEB-INF/lib and modify zk.xml as follows


    org.zkoss.theme.preferred
    atlantic



Please note that this theme is only available for ZK 7.
For more information on ZK 7, please click here.

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.

40 Responses to “ZK 7 Introduces Atlantic Theme: A New Flat Design”

  1. William says:

    Thanks Vincent. It is a good starting point for customizing our own theme. I’ve already forked it and changed the theme base color. I have a question: I added some custom selectors to norm.less in order to leverage global variables but it seems that when deployed to a webapp the resulting zk.wcs does not follow a specific order so my selectors are overridden by others (for example those contained in groupbutton.less). Is there a way to include my own less file and make it be included at the very end of zk.wcs?

  2. vincentjian says:

    @William, it seems no groupbutton.less in the project? Can you tell me what selectors are overridden? Basically all components’ less files are exists in the project, you can modify the styles directly instead of override them.

  3. William says:

    Sorry Vincent, I meant groupbox. But I’ll try to be more specific:
    I added some selectors to norm.less such as:
    .fontXL {
    font-size : @fontSizeXLarge;
    }

    then I used them in my zul such as:
    or

    but style was overridden by .z-label or other zk default selectors.

  4. William says:

    Some text in my previous message didn’t display.
    I used them my custom selectors in my zul such as in label or button components with sclass=”fontXL”

  5. KMaria says:

    How I can access and change variables in theme’s LESS styles?

  6. vincentjian says:

    @William, like I mentioned before, you can just change .z-label style in norm.less or .z-button style in button.less directly. It is not necessary to use sclass here since you are customizing the theme already. And did you build the theme after adding the selector in norm.less?

    @KMaria, you can fork the source code from github and import the project in your workspace. Then you can modify variables and build the theme with the variables you defined.

  7. William says:

    @Vincent, ok that’s not what I wanted but I’ll live with it. And yes, I built the theme.
    BTW, I would like to suggest to use a variable for main theme colors as well in Atlantic theme, such as
    @baseThemeColor: #5687A8;
    so that it would be easier to customize it.

  8. vincentjian says:

    @William
    I tried the same thing as you do, add extra class in norm.less.
    .fontXL {
    font-size : @fontSizeXLarge;
    }
    Then use it in zul <label value=”Test” sclass=”fontXL” /> and it works fine.

    And thanks for the suggestion, I can try to extract variable to make customization easier.

  9. [...] from that, ZK 7 also introduces a new theme ‘Atlantic’ adopting the newest trend in User Interface design – flat design, removing gradients, rounded [...]

  10. [...] from that, ZK 7 also introduces a new theme ‘Atlantic’ adopting the newest trend in User Interface design – flat design, removing gradients, rounded [...]

  11. [...] from that, ZK 7 also introduces a new theme ‘Atlantic’ adopting the newest trend in User Interface design – flat design, removing gradients, rounded [...]

  12. ggrimoldi says:

    Looking at samples in this document, I can see that new Atlantic style add a vertical overhead in all components.
    That is, buttons are higher, listbox are higher and so on.
    But I remember all that many our customers still use vertical resolution of 768px… and some of them use more toolbars in browsers, so the real used vertical desktop space is about 60% of screen height.
    So this new style could be more cool from a pure look and feel point of view, but can result in a harder way to compose really usable application’s views…

  13. William says:

    @Vincent, maybe you are right about simple label element I did a wrong example, but if you try it in a caption element you’ll see that selector .z-caption overrides fontXL selector. For example:

    <groupbox mold=”3d”>
    <caption label=”Repositories” class=”fontXL”/>
    </groupbox>

    At least, that’s what’s happening to me.

  14. William says:

    @ggrimoldi, Zk people have been so nice to put Atlantic theme opensource on github. You can quickly size down all components modifying parameters in _zkvariables.less and recompiling. That’s what I did along with color changing and in a blink I’ve got a completely different theme that fits my needs.

  15. Eric says:

    We are curious what you guys are going to do with that theme!
    Can you provide some screenshots of your ‘work in progress’? We want to see it in action :-)

  16. Nikos says:

    Guys the jar in github DOESN’T work…if you download the zip the zip is corrupted..

  17. vincentjian says:

    Hi Nikos, we have update the download link, please try download again.

  18. [...] on this design concept, ZK 7 introduces a new Atlantic theme. Not only does this theme adopts the newest look and feel on trend, it also gives users the [...]

  19. PBQ says:

    Can I use Atlantic theme in commercial software ?

  20. Nikos says:

    The theme looks nice but there is no information on how to use for example the navbar with the look and feel of collapsed. Is there any tutorial???

  21. vincentjian says:

    Hi Nikos, you can reference our online document.
    Simply give collapsed attribute like follows will get collpased look and feel of Navbar.
    <navbar collapsed="true"/>

  22. Piotr says:

    Is it possible to use this theme in commercial software ?

  23. Piotr says:

    Is it possible to use this theme in commercial software (not open source) ?

  24. Piotr says:

    Is it possible to use this theme in commercial software ??

  25. Piotr says:

    Is is possible to use Atlantic Theme in commercial software ?

  26. [...] this release also comes with it a new ‘Atlantic’ theme adopting the newest trend in User Interface design – flat design; removing gradients, [...]

  27. [...] this release also comes with it a new ‘Atlantic’ theme adopting the newest trend in User Interface design – flat design; removing gradients, [...]

  28. [...] on this design concept, ZK 7 introduces a new Atlantic theme. Not only does this theme adopts the newest look and feel on trend, it also gives users the [...]

  29. [...] on this design concept, ZK 7 introduces a new Atlantic theme. Not just does this theme adopts the latest feel about trend, it equally provides consumers the [...]

  30. [...] on this design concept, ZK 7 introduces a new Atlantic theme. Not only does this theme adopts the newest look & feel on trend, it moreover gives users the [...]

  31. [...] this release also comes with it a new ‘Atlantic’ theme adopting the newest trend in User Interface design – flat design; removing gradients, [...]

  32. [...] on this design concept, ZK 7 introduces a new Atlantic theme. Not only does this theme adopts the newest look and feel on trend, it also gives users the [...]

  33. [...] from that, ZK 7 also introduces a new theme ‘Atlantic’ adopting the newest trend in User Interface design – flat design, removing gradients, rounded [...]

  34. [...] this release also comes with it a new ‘Atlantic’ theme adopting the newest trend in User Interface design – flat design; removing gradients, [...]

  35. arthur says:

    Hi, can you please provide the source zul file for http://www.zkoss.org/zkthemedemo/demo/ this page. I am struggling with scroll bars. Horizontal scroll bar is appearing for a window when overflow is set to auto even if its width is 100%.

  36. Neus says:

    Hi,
    I like this theme but there is an easy way to create new themes based on atlantic with different color?
    A tool like Theme roller or a tutorial where I can learn how to create themes?

    Thank you!

  37. Neus says:

    Hi,
    I like this theme but is there an easy way to create new themes based on atlantic with different color?
    A tool like Theme roller or a tutorial where I can learn how to create themes?

    Thank you!

  38. arthur. says:

    Hi, I am struggling with changing basic colors in the atlantic theme.. could you please suggest me a source where I can learn on how to change colors?. When i imported the source code in eclipse I am getting some errors. Please help me.

  39. chillworld says:

    @vincentjian Will this theme also be available in theme roller soon or how can we change the basic colors like Neus asked?

    Greetz chill.

  40. vincentjian says:

    Hi Neus, the theme project is on Github, you can fork it and modify _zkvariables.less file to change color. And build you own theme.

Leave a Reply