Wiki source code of Foundation Skin

Last modified by Vincent Massol on 2024/02/26 17:51

Hide last authors
Nicolas Lemoine 1.1 1 I've worked a few hours (3 or 4h) on Foundation, trying to provide a real responsive skin for XWiki.
2
3 I've also tried to provide a new experience, with an iOS style. It's just the beginning of the work and I focused on the mobile layout more than the desktop skin. So the desktop version has the same behavior for menus but it could be easily changed.
4
5 It has been done with Zurb Foundation and you can find a demo there: [[http:~~/~~/xwiki.nicolaslemoine.fr>>url:http://xwiki.nicolaslemoine.fr/]]. There is also the edit document which should also work in smartphone and tablet: [[http:~~/~~/xwiki.nicolaslemoine.fr/edit.html>>url:http://xwiki.nicolaslemoine.fr/edit.html]].
6
7 Some screenshots:
8
Nicolas Lemoine 12.1 9 **Mobile**:
Nicolas Lemoine 1.1 10
Nicolas Lemoine 12.1 11 [[image:mobile1.png||width="320px"]]
Nicolas Lemoine 11.1 12
Nicolas Lemoine 12.1 13 [[image:mobile2.png||width="320px"]]
Nicolas Lemoine 11.1 14
Nicolas Lemoine 12.1 15 [[image:mobile3.png||width="320px"]]
Nicolas Lemoine 1.1 16
17
Nicolas Lemoine 12.1 18 **Tablet**:
Nicolas Lemoine 1.1 19
Nicolas Lemoine 12.1 20 [[image:tablet1.png||width="768px"]]
Nicolas Lemoine 1.1 21
Nicolas Lemoine 12.1 22 [[image:tablet2.png||width="768px"]]
Nicolas Lemoine 1.1 23
24
Nicolas Lemoine 12.1 25 **Desktop**:
Nicolas Lemoine 1.1 26
27
Ecaterina Moraru (Valica) 22.1 28 {{warning}}
29 The desktop version is not good so far. It has to look like a website, and currently it's just a bigger version of the mobile layout. It has to be improved.
30 {{/warning}}
Nicolas Lemoine 1.1 31
Nicolas Lemoine 12.1 32 [[image:desktop1.png||width="900px"]]
Nicolas Lemoine 1.1 33
Nicolas Lemoine 12.1 34 [[image:desktop2.png||width="900px"]]
Nicolas Lemoine 1.1 35
Nicolas Lemoine 12.1 36 [[image:desktop3.png||width="900px"]]
Nicolas Lemoine 1.1 37
Nicolas Lemoine 12.1 38 [[image:desktop4.png||width="900px"]]

Get Connected