Ensemble Banner

Adding CLUI to your project

  1. 1. Get files from NPM

    # Set your default NPM registry to the CoreLogic internal registry. If you are using other packages from this 
    # repository, then you probably do not want to do this since most do not have the @corelogic scope.
    $ npm config set @corelogic:registry https://repo2.corelogic.net/repository/npm-all
    
    # If you don't already have a package.json, you'll need to initialize one
    $ npm init
    
    # Add CLUI to your project's dependencies
    $ npm install --save @corelogic/clui@1.0.3-prerelease

  2. 2. Process CLUI files into your asset pipeline.

    When processing your asset pipeline, copy the following files to integrate CLUI into your existing assets:

    Asset Type Source Location Notes
    CSS ./node_modules/@corelogic/clui/dist/css
    Javascript ./node_modules/@corelogic/clui/dist/js
    Fonts ./node_modules/@corelogic/clui/dist/fonts
    Must be accessible by CSS files as ../fonts
    Images ./node_modules/@corelogic/clui/dist/img


  3. 3. Add corelogic-ui.min.css.

    ./node_modules/@corelogic/clui/dist/css/corelogic-ui.min.css

  4. 4. Make sure jQuery is loaded.

    This is not provided by CLUI.

    jquery.min.js

  5. 5. Make sure corelogic-ui.min.js is loaded after jquery.

    ./node_modules/@corelogic/clui/dist/js/corelogic-ui.min.js

    There is a bootstrap-less version available too if you would rather use that. You are required to provide the 3rd party library that provides the bootstrap functionality.

    ./node_modules/@corelogic/clui/dist/js/corelogic-ui-no-bootstrap.min.js

    There is also a javascript module version which is aimed at frameworks like Angular. In the example below, clui is self contained inside of the clui variable. You will also need to load node_modules/@corelogic/clui/dist/js/corelogic-ui-vendor.min.js separately.

    import * as clui from "../node_modules/@corelogic/clui/dist/js/corelogic-ui-module";

  6. 6. Run the intialization function(s).

    Several components require initialization. If you would like to initialize everything, you can run window.clui.init().
  7. 7. At this point you are done.

    Only continue on if you want to customize or add custom components to CLUI .

  8. (Optional) Customizing CLUI with your own Sass components

    You will need to add the following dependencies to your project package.json.

    Library Suggested Version
    bootstrap-sass 3.3.x
    jquery latest
    font-awesome latest


    Once you have them, you can import @corelogic/clui/src/scss/corelogic-ui.scss into your main scss file. If you are overriding a default CLUI class or variable, make sure to import CLUI before your new component. Remember that by importing the main CLUI sass file you can use the CLUI-defined variables located in src/scss/partials/_variables.scss