Getting Started

Overview of eXo UX Guidelines, its structure and how to get started with eXo UX templates.

The latest version of eXo UI Guidelines project can be downloaded directly from GitHub.

After downloading, you can use code editors, such as Notepad++, Text Editor, Quanta Plus or Sublime Text, to modify files. Also, you are required to have some knowledge of CSS and HTML.

eXo UX Guidelines contains eXo Skin, web content and other extra folders.

After downloading, you need to unzip the compressed folder. The structure of eXo UX Guidelines is displayed below:

  exo-ux-guidelines/
  ├── eXoSkin/
     ├── skin/
        ├── css/
           ├── Core.css
           ├── docs.css
           ├── uxp-pattern.css
           ├── product css
        ├── images/
           ├── themes
              ├── default
              ├── blue
              ├── green
              ├── orange
              ├── pink
              ├── red
           ├── PSD
           ├── system
        ├── bootstrap
  ├── js/
     ├── table.js
     ├── track.js
  ├── img/
     ├── icon_start.png
     ├── icon_pattern.png
  └── skin-module/
  
  └── README.md

The main folder is eXoSkin which has the same folder structure of platform-ui project. It includes 3 main sub-folders: css, images and bootstrap.

css

This folder contains the main css of the Platform.

Core.css is customized basing on Bootstrap to define the main style of eXo Platform.

docs.css and uxp-pattern.css are to define some advanced style for UX Guidelines website.

There is common css folder and each product has each own css that is located in its corresponding folder e.g ecms, forum, calendar...

images

themes contains images/icons that define the Platform color style that includes default and 5 alternative collections in red, green, blue, pink and orange. These color folders are able to be used for adding new theme add-ons.

PSD contains all PSD files that ease users to create more customization in advance.

system contains all common images/icons. In next version, all common images/icons will be moved to this folder.

bootstrap

This folder contains main css and js of Bootstrap that eXo Platform's style based on.

Besides, there are some extra folders:

js contains customized js for UX Guidelines website.

img contains customized images for UX Guidelines website.

skin-module is a similar UX Guidelines project that its interface is customized following eXo Skin Customization feature.

eXo UX Guidelines is completely based on Bootstrap that is customized by the eXo Platform style with the main content below:

Getting Started

Overview of eXo UX Guidelines, its structure and how to get started with eXo UX templates.

Components

Usage of eXo Platform components and best practices for customizing eXo Platform.

Patterns

Patterns used for specific functions or objects that follow the eXo Platform style. With this topic, you can understand and adopt in your developments.

eXo UX Guidelines uses a basic HTML template provided by Bootstrap.

Here is a typical HTML file:

<!DOCTYPE html>
    <html>
    <head>
        <title>Bootstrap Template</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </body>
</html>

To make this a Bootstrapped template with the eXo Platform style, just include the appropriate CSS and JavaScript files of Bootstrap and the customized CSS that is provided by eXo Platform Team.

<!DOCTYPE html>
    <html>
    <head>
        <title>Bootstrap Template</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <!-- eXo Platform CSS -->
        <link href="css/exo-platform.css" rel="stylesheet">
    </head>
    <body>
        <h1>Hello, world!</h1>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>
eXo Skin can be customized. It is possible to build only one package in order to deploy a new skin. There is a set of dedicated variables that can be customized in order to re-configure all our main colors/backgrounds.

The latest update of eXo Skin (platform-ui) can be downloaded directly from GitHub.

Based on the Bootstrap development and eXo Platform new design trend, the eXo Platform style and eXo UX Guidelines will be updated accordingly. More patterns will be added and customized following Bootstrap and the eXo Platform style.