This next series of blog posts will show you how you can create modern web layouts with UIkit in XPages using 3 special custom controls that we are going to make in the next articles. The aim is to be able quickly create and modify layouts like this example.
The concept is that the panels are collapsible containers of any content with a title and they could be colored using the usual primary/success/info/warning/success colors. These panels can be dragged and dropped and re-arranged anywhere in a grid as the user prefers.
The ccColumn custom control will control the width of these panels at various screen sizes.
The ccGrid will be responsible for the advanced UIkit grid features.
Unfortunately, the original UIkit does not provide you with classes that control the primary, info, warning… colors that I got used to using Bootstrap.I believe that in order to create consistent websites these colors should be easily accessible for the developers for setting font , border or background-colors. I took the liberty and extended the original UIkit css files classes with these additional classes:
border: 1px solid #00a8e6;
border: 1px solid #8cc14c;
border: 1px solid #faa732;
border: 1px solid #da314b;
border: 1px solid #80ddff;