First Lego Legague styles standard and components


023.0.2a year ago3 years agoMinified + gzip package size for @first-lego-league/user-interface in KB


npm codecov Build status GitHub

David Dependency Status David Dev Dependency Status David Peer Dependencies Status

FIRST LEGO League User Interface

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


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


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:

  1. If the feature is fully JS, add its definition in the correct subdirectory of the definitions directory.
  2. 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.
  3. 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.
  4. The .less file in the definitions directory should follow this template: ```less /*!

/******************************* 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...


If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.