ELCOM

Getting Started

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

Download source

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

Download ELCOM UX Guidelines

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.

File structure

The structure of ELCOM UX Guidelines is similar with that of Bootstrap.

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

  elcom-ux-guidelines /
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  │   ├── elcom-platform.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  ├── img/
  │   ├── icon_start.png
  │   ├── icon_pattern.png
  │   ├── elcom-platform-icons
  └── README.md

Most CSS and JavaScript files are from Bootstrap. In addition, to build the elcom platform style, elcom-platform.css and uxp-pattern.css are customized by elcom platform Team.

Please note that most JavaScript plugins require jQuery to be included. Besides, some free JavaScripts are also applied into ELCOM UX Guidelines to create dynamic samples.

What's included?

ELCOM UX Guidelines is completely based on Bootstrap that is customized by the elcom platform style with the main content below:

Getting Started

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

Patterns

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

Components

Usage of elcom platform components and best practices for customizing elcom platform.

HTML template

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

Here is a typical HTML file:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Bootstrap Template</title>
  5.   </head>
  6.   <body>
  7.     <h1>Hello, world!</h1>
  8.     <script src="http://code.jquery.com/jquery-latest.js"></script>
  9.   </body>
  10. </html>

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

Please note that elcom-platform.css is the Core.css file that is located in skin/css of ElcomResource.war in the elcom platform package. You can copy, rename and put it in the general css folder that contains Bootstrap CSS. 

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Bootstrap Template</title>
  5.     <!-- Bootstrap -->
  6.     <link href="css/bootstrap.css" rel="stylesheet">
    <!-- elcom platform CSS -->
  7.     <link href="css/elcom-platform.css" rel="stylesheet">
  8.   </head>
  9.   <body>
  10.     <h1>Hello, world!</h1>
  11.     <script src="http://code.jquery.com/jquery-latest.js"></script>
  12.     <script src="js/bootstrap.min.js"></script>
  13.   </body>
  14. </html>

What's next?

Based on the Bootstrap development, the elcom platform style and ELCOM UX Guidelines will be updated accordingly. More patterns will be added and customized following Bootstrap and the elcom platform style.