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
- Button Component
- Listbox Component
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.
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?
@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.
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.
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”
How I can access and change variables in theme’s LESS styles?
@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.
@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.
@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.
[…] from that, ZK 7 also introduces a new theme ‘Atlantic’ adopting the newest trend in User Interface design – flat design, removing gradients, rounded […]
[…] from that, ZK 7 also introduces a new theme ‘Atlantic’ adopting the newest trend in User Interface design – flat design, removing gradients, rounded […]
[…] from that, ZK 7 also introduces a new theme ‘Atlantic’ adopting the newest trend in User Interface design – flat design, removing gradients, rounded […]
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…
@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.
@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.
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 🙂
Guys the jar in github DOESN’T work…if you download the zip the zip is corrupted..
Hi Nikos, we have update the download link, please try download again.
[…] 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 […]
Can I use Atlantic theme in commercial software ?
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???
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"/>Is it possible to use this theme in commercial software ?
Is it possible to use this theme in commercial software (not open source) ?
Is it possible to use this theme in commercial software ??
Is is possible to use Atlantic Theme in commercial software ?
[…] this release also comes with it a new ‘Atlantic’ theme adopting the newest trend in User Interface design – flat design; removing gradients, […]
[…] this release also comes with it a new ‘Atlantic’ theme adopting the newest trend in User Interface design – flat design; removing gradients, […]
[…] 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 […]
[…] 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 […]
[…] 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 […]
[…] this release also comes with it a new ‘Atlantic’ theme adopting the newest trend in User Interface design – flat design; removing gradients, […]
[…] 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 […]
[…] from that, ZK 7 also introduces a new theme ‘Atlantic’ adopting the newest trend in User Interface design – flat design, removing gradients, rounded […]
[…] this release also comes with it a new ‘Atlantic’ theme adopting the newest trend in User Interface design – flat design; removing gradients, […]
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%.
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!
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!
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.
@vincentjian Will this theme also be available in theme roller soon or how can we change the basic colors like Neus asked?
Greetz chill.
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.
Hi
Our existing application is in ZK 5.0.11, whether its possible to use?
What are all the changes I have to do?
@Karan, you have to upgrade your project to ZK 7 first.
Hello
I try to use this theme and follow those steps.
But the theme isn’t be change…
My ZK is v7.0
Hi
I use this theme setting and follow those steps.
But my theme isn’t be change.
My ZK is 7.
Hi Friend…
I build a maven project with the atlantic teme on my eclipse, but when put on mi pom of my web project, this theme no load, please, can you help me…!!!
My zk is 8.0.2.2, thanks for your support
Hi Jesus,
Please send your questions to info@zkoss.org and our team will then be able to assist you.
Nice theme. I also try to change the theme by using this method.