CDN / Preferred

Content Delivery Network

This template uses 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/4.beta/css/gray-light-gel.min.css" rel="stylesheet">
        <script src="https://bnsfweb.bnsf.com/gel/releases/4.beta/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/4.beta/js/bootstrap.min.js"></script>
        <!-- noUiSlider -->
        <script src="https://bnsfweb.bnsf.com/gel/releases/4.beta/js/nouislider.min.js"></script>
        <!-- Moment.js and Bootstrap date/time picker plugin -->
        <script src="https://bnsfweb.bnsf.com/gel/releases/4.beta/js/moment.min.js"></script>
        <script src="https://bnsfweb.bnsf.com/gel/releases/4.beta/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/4.latest/css/gray-light-gel.min.css" rel="stylesheet">

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

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

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

JavaScript

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

Component-specific JavaScript (needed only if using jQuery)

<script src="https://bnsfweb.bnsf.com/gel/releases/4.latest/js/tether.min.js"></script>
<script src="https://bnsfweb.bnsf.com/gel/releases/4.latest/js/bootstrap.min.js"></script>
<script src="https://bnsfweb.bnsf.com/gel/releases/4.latest/js/nouislider.min.js"></script>
<!-- Moment.js and Bootstrap date/time picker plugin -->
<script src="https://bnsfweb.bnsf.com/gel/releases/4.latest/js/moment.min.js"></script>
<script src="https://bnsfweb.bnsf.com/gel/releases/4.latest/js/bootstrap-datetimepicker.js"></script>
Third-party Content Disclaimer