npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@nodata/theme

v10.1.0

Published

nodata theme library

Downloads

94

Readme

NODATA Theme

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.

How to use NODATA Theme?

First, install the library with NPM

npm install @nodata/theme

1. As a standalone CSS library

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.cssincludes:

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

2. Customize features with SCSS

Also included in the library package are SCSS files for customization.

2.1 Basic Boostrap Theme

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

2.2 Include fonts

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
}

2.3 Include icons

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] with content-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';

2.4 Include specific components

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:

2.5 Import JS utils methods and color JSON files

@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.

Components List

Here are simple examples showing you how every components works.

Switch

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

Loader

<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

Checkbox

<label class="checkbox-container">
    <input type="checkbox">
    <div class="checkbox"></div>
</label>

Search Input

<div class="search-item">
    <input type="text" class="search-input">
</div>

Info-panel

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>