Version 3 of the GEL is built on Bootstrap 3 and Font Awesome 4.7

Getting Started

Content Delivery Network

This template exemplifies the preferred way to use the GEL in your webapp. It links to the CSS and JavaScript resources hosted on the GEL's content delivery network (CDN).

Doctype

For Internet Explorer to correctly recognize and enable HTML5 and CSS3 functionality, the <!DOCTYPE html> tag must be present.

Compatability mode

For Internet Explorer to correctly recognize and enable HTML5 and CSS3 functionality, the <meta http-equiv="X-UA-Compatible" content="IE=edge"> tag must be present. 
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>GEL Template</title>

        <!-- GEL -->
        <link href="https://bnsfweb.bnsf.com/gel/releases/3.latest/css/gray-light-gel.min.css" rel="stylesheet">
        <script src="https://bnsfweb.bnsf.com/gel/releases/3.latest/js/gel.min.js"></script>
    </head>

    <body>
        <h1>Hello, world!</h1>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

        <!-- Include JavaScript files as needed -->
        <!-- Bootstrap jQuery plugin -->
        <script src="https://bnsfweb.bnsf.com/gel/releases/3.latest/js/bootstrap.min.js"></script>
        <!-- noUiSlider -->
        <script src="https://bnsfweb.bnsf.com/gel/releases/3.latest/js/nouislider.min.js"></script>
        <!-- Moment.js and Bootstrap date/time picker plugin -->
        <script src="https://bnsfweb.bnsf.com/gel/releases/3.latest/js/moment.min.js"></script>
        <script src="https://bnsfweb.bnsf.com/gel/releases/3.latest/js/bootstrap-datetimepicker.js"></script>
    </body>
</html>

Per-tag explanations

CSS (use only one for the desired theme). See Themes Overview for theme selection guidance.

<!-- Light Gray -->
<link href="https://bnsfweb.bnsf.com/gel/releases/3.latest/css/gray-light-gel.min.css" rel="stylesheet">

<!-- Dark Gray -->
<link href="https://bnsfweb.bnsf.com/gel/releases/3.latest/css/gray-dark-gel.min.css" rel="stylesheet">

<!-- Light Blue -->
<link href="https://bnsfweb.bnsf.com/gel/releases/3.latest/css/blue-light-gel.min.css" rel="stylesheet">

<!-- Dark Blue -->
<link href="https://bnsfweb.bnsf.com/gel/releases/3.latest/css/blue-dark-gel.min.css" rel="stylesheet">

JavaScript

<script src="https://bnsfweb.bnsf.com/gel/releases/3.latest/js/gel.min.js"></script>

Component-specific JavaScript (needed only if using jQuery)

<!-- Bootstrap jQuery plugin -->
<script src="https://bnsfweb.bnsf.com/gel/releases/3.latest/js/bootstrap.min.js"></script>
<!-- noUiSlider -->
<script src="https://bnsfweb.bnsf.com/gel/releases/3.latest/js/nouislider.min.js"></script>
<!-- Moment.js and Bootstrap date/time picker plugin -->
<script src="https://bnsfweb.bnsf.com/gel/releases/3.latest/js/moment.min.js"></script>
<script src="https://bnsfweb.bnsf.com/gel/releases/3.latest/js/bootstrap-datetimepicker.js"></script>

Examples

Build on the template above to create complete web sites, data tables, and single page web applications.

Web App

A template for building single page web apps.

Web Site

A simple template for building a website with branding and navigation.

Rich Data Table

A table with sort, searching, filtering, pagination, and per-row actions.

Login

A simple login prompt

Advanced Search

Basic search with revealing advanced search.

Tabbed Card

A card with multiple tabs for data entry and reference.

Advanced Usage

NPM / Managed Dependencies

The GEL can be consumed as a managed dependency by modern front-end stacks such as Angular and React.

Get Started with NPM

Pre-built

Although not recommended, it is possible to use a static build of the GEL within your application.

Get Started with Pre-built
Third-party Content Disclaimer