Elephant Templates are fully responsive by default, using the CSS/JavaScript framework Fomantic-UI.
Since version 3, Elephant introduces two different types of responsiveness, browser-based as server-based.
Browser-based responsiveness is mainly provided by the standard templates + Fomantic-UI. The templates provide the necessary information to the browser, to adjust components for different screen sizes. The browser is then capable of restructure the content dinamically, without reloading the page.
To try the browser-based responsiveness, resize the browser window. You will see how components change, stacking columns, or changing the main menu type when the size resembles a cellphone device.
Server-based responsiveness is controlled by the server side. Allows to provide different content depending on user roles, dao-iterators or dynamic macros.
Server-based responsiveness ensures that site visitors only receive the content addressed to their role or current device. The main difference with browser-based responsiveness is that the browser only receives the appropiate source-content.
A server-driven context is an extension of the server-based responsiveness. Context server-driven property must be set by the Superuser.
Contexts with this property set to true
, can use conditionals inside the EWiki content. Examples would be:
@s{if mobile} ... /* this content will be sent only to mobile devices */ @s{/if}
@s{if rolemap['@partner:on']} ... /* this content will be sent only to partners */ @s{/if}