Responsiveness

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

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

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.

Page reloading
Since server-based content isn't loaded by browsers, in order to see changes is necessary to reload the page. This only applies if you are making changes to content.

Server-driven context

A server-driven context is an extension of the server-based responsiveness. Context server-driven property must be set by the Superuser.

Beta feature
Since this feature is still in beta stage, some unexpected results may happen. At this moment, server-driven contexts do not allow dynamic macros. Use with care and check with different profiles.

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}
Printer version
English09/24/24 14:43Lluís Turró Cutiller