NODATA Theme is a library developed by NODATA that centralizes all assets and guidelines about the styling of UI components.
NODATA Theme library relies on Bootstrap V4 Framework, so you can check Bootstrap Documentation to learn more about what is available.
First, install the library with NPM
npm install @nodata/theme
nodata theme library package comes with a dist/
folder with bundled CSS and JS files.
index.js
includes:
- JS exported functions to load/unload Boostrap Tooltips and Popovers.
- nodata color palette as a variable.
nodata-theme.css
includes:
- Bootstrap CSS.
- nodata Bootstrap theme (colors, sizes, etc.).
- nodata fonts
// In your app main CSS file ex:app.css
@import '~@nodata/theme/dist/nodata-theme.css';
Also included in the library package are SCSS files for customization.
Includes Boostrap classes and variables overrides, nodata color palette (ex: $color-white
) and a few nodata CSS rules.
// In your app Scss file
@import '~@nodata/theme/lib/scss/bootstrap-theme/bootstrap-theme';
// Example of Mixin override
$sizes: map-merge(
(42: 42%), $sizes);
// Import Bootstrap AFTER
@import '~bootstrap/scss/bootstrap';
Add OpenSans and Comfortaa font-families.
// BEFORE any other imports
@import '~@nodata/theme/dist/fonts.css'
@import '~@nodata/theme/lib/scss/bootstrap-theme/bootstrap-theme';
@import '~bootstrap/scss/bootstrap';
// Example
.my-class {
font-family: $nodata-logo-font; // Comfortaa
}
Add nodata icons CSS classes.
// BEFORE any other imports
@import '~@nodata/theme/dist/icons.css'
@import '~@nodata/theme/lib/scss/bootstrap-theme/bootstrap-theme';
@import '~bootstrap/scss/bootstrap';
nodata icons are available in two ways: 1. As CSS classes
i-[icon_name]
.
// example.html
<span class="i-grab"></span>
2. As SCSS variables
$font-icons-[icon_name]
withcontent-icon
mixin.
// example.scss
.my-class {
@include content-icon($font-icons-grab);
}
It requires additional imports:
@import '~@nodata/theme/dist/icons.css'
@import '~@nodata/theme/lib/scss/icons/variables';
@import '~@nodata/theme/lib/scss/mixins';
Additionally, NODATA Theme provides built-in styled components. When you need one of them, you have to import it in your project stylesheet.
Example with the Switch component:
@import '~@nodata/theme/dist/scss/mixins';
@import '~@nodata/theme/dist/scss/custom';
@import '~@nodata/theme/dist/scss/components/switch';
You must import Nodata Theme mixins and custom to make use of any component
See the full component list below:
@nodata/theme provides utilitary methods to use Bootstrap JS tooltips and popovers, as well as colors palettes in JSON files.
import { loadTooltips, colors } from '@nodata/theme';
// Examples of use with Angular (2+)
ngAfterViewInit() {
// This will initialize all tooltips from the current DOM
loadTooltips();
// This will initialize the tooltip element that has the id 'myTooltip'
loadTooltips('myTooltip');
}
You can also do target imports:
import { loadTooltips, disposeTooltips, loadPopovers } from @nodata/theme/dist/interactions
will only import JS interaction files.
import { defaultColorPalette, colors, dashboardColorPalette } from @nodata/theme/dist/colors
will only import JSON color files.
Here are simple examples showing you how every components works.
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
Disabled mode
<label class="switch disabled">
<input type="checkbox" disabled>
<span class="slider"></span>
</label>
<div class="loader loader-overlay is-active"></div>
Options.
- loader-overlay is an optional class that adds a dark overlay onto the loader parent element.
- is-active can be removed to hide the loader
<label class="checkbox-container">
<input type="checkbox">
<div class="checkbox"></div>
</label>
<div class="search-item">
<input type="text" class="search-input">
</div>
Basic example
<div class="info-panel">
<div class="message">The datablock is empty</div>
<a class="back-link">Back to previous page</a>
</div>
With image example
<div class="info-panel row h-100">
<div class="col-4">
<img
class="h-100 w-100"
src="error-404.svg">
</div>
<div class="message">Page not found</div>
<a class="back-link">Back to previous page</a>
</div>