@netbek/periodic-table

v0.3.3

Published

2 days ago

Periodic table with responsive layout.

0High
0Medium
0Low

netbek

Periodic table

Periodic table with responsive layout.

Demo

netbek.github.io/periodic-table

Integration

Install the package:

npm install @netbek/periodic-table

Create a Sass file:

@import 'node_modules/@netbek/periodic-table/src/css/mixins';

// Define vars that should override defaults
$nb-periodic-table-cell-bg:                       #eee;
$nb-periodic-table-cell-border:                   #ccc;

// Load default vars
@import 'node_modules/@netbek/periodic-table/src/css/variables';

// Mobile-first layout
@include nb-periodic-table-base;
@include nb-periodic-table-color;
@include nb-periodic-table-size;

// Wide breakpoint layout
@media (min-width: 82em) {
  @include nb-periodic-table-color('category');
  @include nb-periodic-table-size('wide');
}

Create a Nunjucks template:

{%- from "path/to/node_modules/@netbek/periodic-table/nunjucks/macros/nb_pt_legend.njk" import nb_pt_legend %}
{%- from "path/to/node_modules/@netbek/periodic-table/nunjucks/macros/nb_pt_table_18.njk" import nb_pt_table_18 %}
<html>
  <body>
    {% set element_columns = {
        atomic_number: 'Atomic number',
        symbol: 'Symbol',
        name: 'Name',
        atomic_mass: 'Atomic mass',
        electronegativity: 'Electronegativity'
    } %}
    {{ nb_pt_legend(elements, categories, element_columns) }}
    {{ nb_pt_table_18(elements, groups) }}
  </body>
</html>

Render the Nunjucks template:

import nunjucks from 'nunjucks';
import periodicTable from '@netbek/periodic-table';

async function render() {
  const categories = await periodicTable.loadCategories();
  const elements = await periodicTable.loadElements();
  const groups = await periodicTable.loadGroups();

  const data = {
    categories,
    elements,
    groups
  };

  return nunjucks.render('path/to/template.njk', data);
}

render();

Development: Installation

Install Nix:

sh <(curl -L https://nixos.org/nix/install) --daemon

Configure Nix. Edit /etc/nix/nix.conf (for a multi-user installation) or ~/.config/nix/nix.conf (for a single-user installation) to include the following lines:
```
experimental-features = nix-command flakes
trusted-users = root <USER>
```
Replace <USER> with your username on your computer.
Install direnv:
```
sudo apt install direnv
```
Enable direnv in your shell by adding a line to your shell configuration file.
For Bash, edit ~/.bashrc:
```
eval "$(direnv hook bash)"
```
Allow .envrc:
```
direnv allow
```
Enter a PyPI API token as the password in .pypirc.

Development: Usage

Automatically build and refresh browser during development:

gulp livereload

Build and publish the JavaScript and Python distribution packages:

make bump-version [major|minor|patch]
git push
make build-and-commit
git push
make create-release
make publish

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Periodic table

Demo

Integration

Development: Installation

Development: Usage

Feature ideas

Credit

License