Fle-ember-addon-ui NPM

Finish Line Events - Ember Addon UI

This addon is responsible for supplying the stylesheet and user interface components.

Compatibility

Ember.js v3.12 or above
Ember CLI v2.13 or above
Node.js v10 or above

Installation

ember install fle-ember-addon-ui

Usage

Stylesheet

The styles for Finish Line Events can be imported into your Ember application by following these instructions.

First, a Tailwind CSS configuration file has been prepared containing plugins, custom colours, purge rules, everything that is needed to build the styles into your application.

From your ember-cli-build.js file, you must setup PostCSS to consume the configuration:

// ...
const tailwindcssConfig = require('fle-ember-addon-ui/app/tailwind/config');
// ...
module.exports = function (defaults) {
  let app = new EmberApp(defaults, {
    // ...
    postcssOptions: {
      compile: {
        plugins: [
          {
            module: require('postcss-import'),
            options: {
              path: ['node_modules']
            }
          },
          require('tailwindcss')(tailwindcssConfig)
        ]
      }
    }
    // ...
  });

  return app.toTree();
};

After the configuration has been set you need to update your application's app/styles/app.css file to import the Tailwind & fle-ember-addon-ui styles:

/*noinspection CssUnknownTarget*/
@import 'tailwindcss/base';
/*noinspection CssUnknownTarget*/
@import 'fle-ember-addon-ui/app/styles/base.css';

/*noinspection CssUnknownTarget*/
@import 'tailwindcss/components';
/*noinspection CssUnknownTarget*/
@import 'fle-ember-addon-ui/app/styles/components.css';

/*noinspection CssUnknownTarget*/
@import 'tailwindcss/utilities';
/*noinspection CssUnknownTarget*/
@import 'fle-ember-addon-ui/app/styles/utilities.css';