Cards skin consists of items distributed on a space of X / Y coordinates absolute.
The system is based on css3 transform.
Item Width [responsive]:
- The width of the blocks, which affects the distribution of the items in it.
- The height of the viewport (if empty, it will be like the height of the screen)
- The size (scale) of the composition
- The vertical position of the composition (Y), which may be better in some cases.
There are some parameters to show the distribution for each method:
- Scale of Card
- Circle Radius for Circle and Sinusoide
- Columns and Row Spaces for Grid, Rows and Sinusoide
The elements are distributed absolutely in the viewport.
The magic of cards skin is in custom coordinates.
Through a transformation interface you can position each element as you want, distributing them in the viewport and navigate the elements!
Don’t forget to save the coordinates after moving!
While centering the element it is possible to define the values of the navigation tools (navigation arrows and the back-x), but above all the size of the element for mobile-first matters.
For mobile versions, you can size the focused element to control its alignment in the viewport.
Navigation elements such as the next / prev arrows can be offset for the x and y axes.
Arrows & Circle Style
Popup for total control of the graphic style:
Close button Style
Also for closing control:
Circular Orientation Distribution