@first-lego-league/user-interface

FIRST LEGO League User Interface

A yearly updated, user interface infastructure and common functions for client-side modules of the FIRST LEGO League TMS.

Usage

The package is based on Semantic UI. The package includes all the modules in Semantic-UI.

In order to use it you need to include the current version of the UI in your code. For example, if you're using webpack, you should write:

import '@first-lego-league/user-interface/current/app.js'
import '@first-lego-league/user-interface/current/app.css'

After that, all of the feature offered by Semantic UI will be available in your site. A few things to notice:

• Make sure you add them before any jQuery definitions, like the one presented by Angular.
• Any other UI packages, like Matirial Design or Bootstrap will conflict with Semantic, so please do not use them.
• Please follow the UI standard, as to create a unified style between the different modules.
• For additional features provided by this package behond the basic Semantic UI, please visit The Additional Features page

Contribution

To contribute to this repository, simply create a PR and set one of the Code Owners to be a reviewer. Please notice the linting and UT, because they block merge. Keep the package lightweight and easy to use. Thank you for contributing!

Adding features

In the rare cases in which you need to add something new to the UI framework, rather then simply change the style of an existing feature, follow these steps:

• If the feature is fully JS, add its definition in the correct subdirectory of the definitions directory.
• Add it to the list of features loaded by semantic in semantic.json component field. Notice the order of the components array, they are loaded according to that order.
• If the feature also has CSS, add .less files matching the component's name in the correct subdirectory of the definitions directory, the default theme directory and the site directory.
• The .less file in the definitions directory should follow this template:

/*!
 * # Semantic UI - Title of the component
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */


/*******************************
     Title of the component
*******************************/

/*--------------
   Load Theme
---------------*/

// Override titles here

@type    : 'type-of-the-element';
@element : 'title-of-the-element';

@import (multiple) '../../theme.config';

/*******************************
            Styles Segment
*******************************/

// Add Styles here...

.loadUIOverrides();