@tui/ui-library

TUI UI CSS library

Usage no npm install needed!

<script type="module">
  import tuiUiLibrary from 'https://cdn.skypack.dev/@tui/ui-library';
</script>

README

ui-library

How to use it

Installation

npm install @tui/ui-library or yarn add @tui/ui-library

Components

You can find a CSS file for each component in dist/components/<<componentname>>/. For example, importing and using the styles for buttons in a .js file in your MFE would look like this:

import '@tui/ui-library/dist/components/button/style.scss'

Themes

Theme files provide some global variables that are needed by the components in order to adhere to the theme guidelines (colors, spacing, etc.). TUI is the only available theme at the moment.

In dist/themes/<<themename>>/, you will find the theme file style.css as well as other global stylesheets. For example, for the TUI theme you could import in your .js files:

import '@tui/ui-library/dist/themes/tui/tui.css'
import '@tui/ui-library/dist/themes/tui/fontface.css'

Themes variables are declared within the "theme" attribute selector, so you will need to add it on either the host page html tag or your MFE:

<html data-theme="tui" lang="en">
<!--or-->
<my-custom-mfe theme="tui" lang="en">

Development mode

You can also clone this repository, install the dependencies and use npm run dev to run a local server where to check the example templates for the components, how themes are generated, the original unprocessed stylesheets (post processed with postcss-preset-env), etc.

Contributing

Fill free to contribute to this repository whenever you need some adjustments. There are only a few rules:

  • Branch name should follow: [prefix*]/[feature] (example: feat/buttons-mixins)
  • Commit message should follow [prefix*]: [Commit message] example: "feat: Mixin approach for buttons."
  • The merging of MR's is the responsibility of the owner.
  • To merge MR, you need at least one approval.

[prefix] one of - fix / chore / feat / docs

Roadmap

  • migration to scss
  • snapshot testing
  • documentation
  • global variables splitting