CSS/JS files for EEA Applications

CSS

Add following CSS links in "head" tag.
Add in the same sequence as below and after any other CSS files used in your application:

Bootstrap 4.0 CSS:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

Mayflower v5.34.0 Styles

This is Mayflower v5.34.0 CSS file.
<link rel='stylesheet' href='//eeadev.eea.state.ma.us/eea/cdn/eea/cdn/v5/css/index-generated.css' media='all'>

EEA-mayflower-overrides

This file overrides some of Mayflower styles.
<link rel='stylesheet' href='//eeadev.eea.state.ma.us/eea/cdn/eea/cdn/v5/css/eea-mayflower-overrides.min.css' media='all'>

EEA-buttons-bootstrap-overrides

This file overrides Bootstrap button styles.
<link rel='stylesheet' href='//eeadev.eea.state.ma.us/eea/cdn/eea/cdn/v5/css/eea-buttons-bootstrap-overrides.min.css' media='all'>

EEA-forms-bootstrap-mayflower-overrides

This file overrides Bootstrap and Mayflower form styles.
<link rel='stylesheet' href='//eeadev.eea.state.ma.us/eea/cdn/eea/cdn/v5/css/eea-forms-bootstrap-mayflower-overrides.min.css' media='all'>

App-specific-styles

This is an app specific css file that can be altered by developer to apply a different width app logo, less or more global nav links, a different homepage banner image, and other app specific changes.
<link rel='stylesheet' href='//eeadev.eea.state.ma.us/eea/cdn/eea/cdn/v5/css/styleguide-app-specific-styles.css' media='all'>

EEA Styles update to v5

This file will update styles to utilize full width plus other improvements.
<link rel='icon' href='//eeadev.eea.state.ma.us/eea/cdn/eea/cdn/v5/css/eea-v5-2update.css' media='all'>


Favicon

This is favicon for all EEA applications.
<link rel='icon' href='//eeadev.eea.state.ma.us/eea/cdn/eea/cdn/v5/img/favicon.ico' media='all'>


Javascript

Add following Java script and JS links before close of "body" tag.
Add in the same sequence as below and after any other Javascripts used in your application:

Bootstrap JS (3 Links):

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js">

<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">

<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">

Add this Mayflower required javascript snippet:

            
                            <script>
                            var ma = ma || {};
                            // path to where the handlebar templates are being stored.
                            ma.themePath = "../assets";
                        </script>

Link to these 2 Mayflower JS files from "/js/" folder

<script src="../js/vendor-generated.js">

<script src="../js/index-generated.js">

Add this javascript snippet for scroll up button functionality

            
                                <script>
                                // This is for Scroll to top button when arrow up clicked BEGIN //
                                $(window).scroll(function () {
                                var height = $(window).scrollTop();
                                if (height > 100) {
                                $('#myBtn').fadeIn();
                                } else {
                                $('#myBtn').fadeOut();
                                }
                                });
                                $(document).ready(function () {
                                $("#myBtn").click(function (event) {
                                event.preventDefault();
                                $("html, body").animate({ scrollTop: 0 }, "slow");
                                return false;
                                });

                                });
                                // This is for Scroll to top when arrow up clicked END //
                                </script>