Finish Line Events - Ember Addon UI

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

• Board
• Planning & Documentation
• Rails
• Administrator Application
• Organizer Application
• Data Addon
• UI Addon
• SEO Application

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';

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.