# Getting Started With fusionCSS

fusionCSS requires that you include a CSS file within the <head> section of your page. It also requires the inclusion of a JavaScript file to implement functionality such as converting horizontal and vertical navigation to drop down lists.

The JavaScript relies on the presence of either jQuery or fusionLib and is supplied in the file fusionCSS.js.

## Using With jQuery

    <link href="css/fusioncss.blue.pink.min.css" rel="stylesheet" type="text/css" />
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
      crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/fusionCSS.js"></script>

## Using With fusionLib

    <link href="css/fusioncss.blue.pink.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="system/libs/js/fusionLib.js"></script>
    <script type="text/javascript" src="js/fusionCSS.js"></script>

## Using With clearFusionCMS

fusionCSS.js should be copied into a new document of type .js and fusioncss.blue.pink.min.css copied to a document of type .css.

Assuming the document holding the JavaScript has an ID of 100 and the CSS has an ID of 101 then fusionCSS can be included by adding the following to the head section of the templates:

    <link href="[[~101]]" rel="stylesheet" type="text/css" />
    [[javascript &core=`1` &src=`[[~100]]`]]