• Getting Started

Creating an Interface

The Includable UI is based on a heavily customized version of Bootstrap 2.3. You can use the Boostrap classes to create some default UI elements, like accordions, tooltips and modals. On top of that, there are some Javascript functions available that might make developing your module’s UI a bit easier.jQuery is also available by default.

Headers and containers

Includable renders your module’s UI inside the standard page layout, so you don’t need to include any<html> or <body> tags. You do need to include at least two things on most pages:

A page header

A page header can contain a title and optionally an image. <p class="lead"> also works nicely in a page header. An example:

<div class="page-header">
   <div class="page-header-inner">
      <img src="<?php echo $this->user->picture(); ?>" class="user-image" />
      <h1>Hey <?php echo $this->user->name; ?>! This is your first module.</h1>
      <p class="lead">This is an example module that shows how to call the different parts of the Includable Module API.</p>
   </div>
</div>

A page container

In order to center your content using the default 980px container, you need to use the class content-inner:

<div class="content-inner">
   <p>Hey! My content.</p>
</div>

Doing AJAX requests

Advanced interfaces can be best implemented using the AngularJS support in Includable, but simple AJAX requests to the API you created is also possible with jQuery (/_api/communities/:c/ is the path to the community API for the current community)

$.getJSON('/_api/communities/:c/my/method', {data: 'here'}, function(r){
   if(!r.result){
      alert('Oops, error: ' + r.error.description);
   }else{
      alert('Success, response: ' + r.result);
   }
});

Using UI components

We have a few build in front end components and libraries. An overview of UI components.